CODEWITHSUNDEEP
javascriptcssreactjssemantic-uisemantic-ui-react
user3142695
user3142695

Reputation: 17332

Semantic UI (React): Responsive vertical menu by changing to horizontal on mobile devices

I am using a vertical menu (semantic ui react). This is my structure for that:

<Grid>
    <Grid.Column mobile={16} tablet={5} computer={5}>
        <div className='ui secondary pointing menu vertical compact inherit'>
            <a className='item'>
                Element
            </a>
        </div>
    </Grid.Column>
</Grid>

But I need the menu to become a horizontal icon menu on mobile devices. Is it possible to make it in this way responsive? I mean on computer it should be a vertical menu with text items and on mobile devices it should be displayed horizontal with icons...

Upvotes: 4

Views: 12430

Answers (2)

Julius Depulla
Julius Depulla

Reputation: 1633

I have been looking for responsive react semantic-ui menu and this looks good, collapses with a hamburger icon

https://codesandbox.io/s/325y47xk36

Upvotes: 1

Oleksandr Fediashov
Oleksandr Fediashov

Reputation: 4335

I think you're looking for stackable menu variation. Also, you can use Grid's visibility for more complex things.

Upvotes: 4

Related Questions