Missing responsive navbar?

[ghoshnirmalya]

I'm unable to find any particular way through which I can make a responsive navbar. Is that component available here?

[levithomason]

Menus can collapse to take up only as much space as needed, stack on mobile devices, stretch to take up the full width of their container, and evenly divide their items.

https://react.semantic-ui.com/collections/menu#compact
https://react.semantic-ui.com/collections/menu#stackable
https://react.semantic-ui.com/collections/menu#fluid
https://react.semantic-ui.com/collections/menu#evenly-divided

Additionally, you can put a Menu in a Grid for even more responsive control:

https://react.semantic-ui.com/collections/grid

---

EDIT http -> https links, thanks @clodal

[clodal]

Links provided above are broken. The following are the updated versions:

https://react.semantic-ui.com/collections/menu#menu-example-compact
https://react.semantic-ui.com/collections/menu#menu-example-stackable
https://react.semantic-ui.com/collections/menu#menu-example-fluid
https://react.semantic-ui.com/collections/menu#menu-example-evenly-divided

[layershifter]

Little outdated, but I've made a codepen that shows how to make it.

[levithomason]

Haha, boy, it seems my response got mix feelings. I have no idea why, but it sure does make me curious.

[jjwilliams42]

Somewhat unrelated, but, why is the semantic ui react documentation not responsive at all? When I visit on my phone, i have to pinch and zoom everywhere, unlike the CSS doc site.

I'm a long time fan of semantic ui, wrote a yeoman extension for it even for .NET Core project generation (the CSS version). But I've had problems getting the React version to be responsive, or maybe it's because of my lack of understanding of the proper pieces that must be used to make it responsive.

[brianespinosa]

@jackjwilliams All components that are responsive in SUI are responsive in SUIR. Item, Form, and Grid can all be defined with responsive props which render them with the proper SUI markup for collapsing, doubling, etc.

Regarding the docs... no. They are not responsive. That would probably be a good addition to the project which we could make a separate issue for if one does not already exist.

[veswill3]

@jackjwilliams and @brianespinosa - I noticed that the docs were not responsive a while ago and created an issue for this #2230. Still waiting for the fix to push.

Thanks for the example @layershifter, any chance that could be added as an example to the docs, maybe in the layouts area?

[brianespinosa]

@veswill3 @jackjwilliams looks like #2231 was merged 3 days ago so I assume that means when the next release of SUIR goes out we will get the necessary viewport tags added to the docs.

[hubertguillemain]

@layershifter your codepen is a good start, but it's only a binary approach (Mobile resolution/not mobile resolution) which switches a hardcoded set of menu items from a flat list into a sidebar.

What I would be looking for is something that gradually adapts and move items in the collapsed zone one by one as the screen gets smaller.

[levithomason]

This sounds like a feature request, please open a new issue.