CODEWITHSUNDEEP
reactjssemantic-uisemantic-ui-react
Paschalidis Christos
Paschalidis Christos

Reputation: 452

Customised semantic-ui-react Menu

I am using semantic-ui-react for sometime now, everything works fine for me but I have an issue with my Navigation Menu.

The thing is that I want it to be customised for mobile and desktop, so in other words I want a complete different implementation for mobile and desktop and I was wondering if there is a proper way to do that using customised semantic (as I am already customising the theme etc etc).

Another thought I have is that maybe there is the only option available for Menu but havent really found anything in documentation.

Best

Upvotes: 1

Views: 1110

Answers (1)

Oleksandr Fediashov
Oleksandr Fediashov

Reputation: 4335

Only the Grid component has viewport breakpoints (in vanilla SUI, too), so you should wrap your menus into it.

<Grid>
  <Grid.Row columns={1} only='mobile'>
    <Grid.Column>
      <MobileMenu />
    </Grid.Column>
  </Grid.Row>
  <Grid.Row columns={1} only='tablet computer'>
    <Grid.Column>
      <ComputerMenu />
    </Grid.Column>
  </Grid.Row>
</Grid>

You can also check device visibility section of Grid's docs.

Upvotes: 3

Related Questions