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

11,447

Solution 1

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

Solution 2

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

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

Share:
11,447
user3142695
Author by

user3142695

People who say nothing is impossible should try gargling with their mouths closed.

Updated on August 07, 2022

Comments

  • user3142695
    user3142695 over 1 year

    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...