Some features from this component may require
sgds-navbar component supports 3 types of direct children containers:
.sgds-navbar-brand container is visible across all device sizes and always sits at the left
.sgds-navbar-menu is to the right of
.sgds-navbar-brand, and hidden on mobile
devices (<1024px wide).
Its children can further be positioned with:
Positioned at the left on desktop and top on mobile.
Positioned at the right on desktop and bottom on mobile.
.sgds-navbar-menu element is hidden on mobile devices, you can add a
.sgds-navbar-brand to toggle the visibility of the navbar menu.
Main nav that has a dropdown for secondary selection. Suitable for medium-sized websites.
Main nav with a mega menu for secondary selection. Suitable for large-sized websites.
To add search bars to your main mav, please import
To accommodate links containing longer text, add
to fix the width of their children
To make make a full width navbar, You can wrap
Main navs should:
Having troubles with the guide? Please give us more details and we'll get back to you soon.Chat with the team