Make Semantic UI menu collapse and responsive

Question

I have looked everywhere on the docs, and nothing. Im looking for a similar navbar collapse function that's used in bootstrap with the hamburger(I can click on) to side and menu items inside of it. Please help. Semantic UI looks good but can be a pain to use

Answer 1

This is a pretty good (and simple) implementation (credit: https://codepen.io/designosis/pen/LbMgya)

HTML

<div class="ui grid">

    <div class="computer only row">
        <div class="column">
            <div class="ui menu">
                <a class="item">Menu Item A</a>
                <a class="item">Menu Item B</a>
                <a class="item">Menu Item C</a>
                <a class="item">Menu Item D</a>
            </div>
        </div>
    </div>

     <div class="tablet mobile only row">
        <div class="column">
            <div class="ui menu">
                <a id="mobile_item" class="item"><i class="bars icon"></i></a>
            </div>
        </div>
    </div>

</div>

<div class="ui pushable segment">
        <div class="ui sidebar vertical menu">
            <a class="item">Menu Item A</a>
            <a class="item">Menu Item B</a>
            <a class="item">Menu Item C</a>
            <a class="item">Menu Item D</a>
        </div>
        <div class="pusher">
                <div id="content" class="ui segment">
                        Content here
                </div>
         </div>
</div>

CSS

#content {
  min-height: 100px;
}
.ui.grid{
  padding: 0 !important;
}
.pushable.segment{
  margin: 0 !important;
}

JavaScript

$('.ui.sidebar').sidebar({
  context: $('.ui.pushable.segment'),
  transition: 'overlay'
}).sidebar('attach events', '#mobile_item');

Answer 2

Here is a collapsable NavMenu component I've made using the Responsive component available in Semantic-UI-React:

import React, { useState } from 'react';
import { Menu, Responsive, Dropdown, DropdownMenu } from 'semantic-ui-react';
import { withRouter } from 'react-router-dom';
import LogoutModal from './LogoutModal';

function NavMenu(props) {
    const [activeItem, setActiveItem] = useState('Laptop Item')
    const [showModal, setShowModal] = useState(false)


    return (
        <div>
            <Menu pointing secondary>
                <Responsive as={Menu.Item} minWidth={790}
                    name='Laptop Item'
                    active={activeItem === 'Laptop Item'}
                    onClick={() => setActiveItem('Test Item')}
                />
                <Responsive as={Menu.Item} minWidth={790}
                    name='Laptop Item 2'
                    active={activeItem === 'Laptop Item 2'}
                    onClick={() => setActiveItem('Test Item 2')}
                />
                <Responsive as={Menu.Item} minWidth={790}
                    name='Laptop Item 3'
                    active={activeItem === 'Laptop Item 3'}
                    onClick={() => setActiveItem('Test Item 3')}
                />
                <Menu.Menu position = 'right'>
                    <Responsive as ={Menu.Item} minWidth={790}
                        name = "Sign Out"
                        onClick={() => setShowModal(true)}
                    />
                </Menu.Menu>
                <Responsive as ={Menu.Menu} maxWidth={789}  position='right'>
                    <Dropdown
                        item
                        icon ='bars'
                        >
                        <Dropdown.Menu>
                            <Dropdown.Item text='Mobile/Tablet Item 1'/>
                            <Dropdown.Item text='Mobile/Tablet Item 2'/>
                            <Dropdown.Item text='Mobile/Tablet Item 3'/>
                            <Dropdown.Item text='Sign Out'/>
                        </Dropdown.Menu>
                    </Dropdown>
                </Responsive>
            </Menu>
        </div>
    )
}

export default withRouter(NavMenu);

I'm going for a traditional looking navigation bar with links on the left side and a Logout button on the right side. Although the width in pixels of an iPad (as shown in Chrome dev tools) is 768px, for some reason the breakpoint is 790px for me (appreciate if someone can tell me why this is). That is why min width for 'Laptop Items' is 790 and maxWidth for 'Mobile/Tablet Items' is 789.

I did not find the responsive component in the Semantic-UI docs. It is listed under "Addons" in Semantic-UI-React.

If you're not using React an alternative is to implement the side bar for mobile users.