Semantic-UI is probably the only Modern UI that does not offer Responsive Navigation Bar. &nbsp;<figure class="image"><img src="https://images.unsplash.com/photo-1584714268709-c3dd9c92b378?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE1NDAxMH0"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@thenewmalcolm?utm_source=DNX&amp;utm_medium=referral">Obi Onyeador</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure><blockquote>Neither Semantic UI nor Semantic UI React offer a responsive navbar, however, it&nbsp;can be implemented easily. It can be more complicated, but you can create really flexible markup.</blockquote>The quote above is from Semantic-UI “Responsive” <a target="_blank" rel="noopener noreferrer" href="https://github.com/Semantic-Org/Semantic-UI-React/blob/master/docs/src/layouts/HomepageLayout.js">HomePageLayout</a> 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 &lt; 1.0.0 (BTW, there was actually a bug in their old example, and I have a fixed version <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/home">here</a>,) and then “@artsy/fresnel”. &nbsp;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, &nbsp;a much better solution. You could see from this website, or from the<a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/dna-rn"> demo page</a>.If you are using Semantic-UI-React, then you may give it a try. I created the NPM package: <a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/dna-responsive-nav">dna-responsive-nav</a> to help you integrate it easily.&nbsp;

Semantic-UI is probably the only Modern UI that does not offer Responsive Navigation Bar. I created the NPM package: dna-responsive-nav to fix this limitation. If you are using Semantic-UI-React, then you may give it a try. 

All Posts In Responsive