Search code examples
javascriptcssreactjssemantic-uisemantic-ui-react

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

Solution

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