Responsive Navigation Bar For Semantic-UIAdam C. |
Semantic-UI is probably the only Modern UI that does not offer Responsive Navigation Bar.
Neither Semantic UI nor Semantic UI React offer a responsive navbar, however, it
can be implemented easily. It can be more complicated, but you can create really flexible markup.
The quote above is from Semantic-UI “Responsive” HomePageLayout example code. It's way too complicated and hard to use in my opinion. I believe they can do better, but no sure why they came up with this cumbersome solution using “Menu”, “Sidebar”, and “Visibility” components along with the third party Media/Device detection package, like, “mobile-detect” in the version < 1.0.0 (BTW, there was actually a bug in their old example, and I have a fixed version here,) and then “@artsy/fresnel”. As I see they have two sets of layout, and then based on the Media/Device to render one of them either from Client Side (browser) or Server Side (SSR.)
As I see, the responsive navigation bar could be achieved purely by CSS styles based on Media Queries. If we have only render one set of layout, then there is no need to worries about the SSR issue.
I was about the switch to Bootstrap due to this limitation, but I do love everything else about Semantic UI, so I did the research online, and came up, which I think, a much better solution. You could see from this website, or from the demo page.
If you are using Semantic-UI-React, then you may give it a try. I created the NPM package: dna-responsive-nav to help you integrate it easily.