Search code examples
reactjsuser-interfacemenusemantic-uisemantic-ui-react

How to recreate auto-collapasable menu with semantic-ui for react?

Original semantic-ui menu does auto turn into a hamburger icon

enter image description here

seems like via code duplication. Is it possible to recreate it in semantic-ui-react with out code duplication (as one component) and how to do such thing?

Solution

  • Neither Semantic UI, nor Semantic UI React have a responsive NavBar. However, I want to implement it as add-on for Semantic UI React in near future.

    At the current moment, you can implement it using Menu and Sidebar components. It will allow you to avoid code and markup duplication.

    I've made a CodeSandbox that shows how to do this.