Get started with the header component for the navigation of a website featuring multi-level dropdowns, mega-menus, search bars, language selectors, and more.
Use this example of a responsive navigation bar for your website by showing multiple menu items, a few CTA buttons, and a hamburger icon to toggle the mobile view.
You may want to use a more complex dropdown component for a menu item to showcase multiple categories and actions instead of a list of sub-menu items.
This example can be often used if you want to highlight the branding of your company by placing the logo in the center of the navbar and the menu on the left side.
Use this example if you want to create a multi-level dropdown element inside the header component based on the collapse feature from the core library.
Get started with this example of a double navbar where the sub-navbar can be used for the menu items and the right side of the component can highlight the CTA's of your website.
Use this example if you want to enable a responsive search bar feature for your website visitors to submit a query search and return a list of page results.
This advanced example of a mega-menu navbar can be used to showcase multiple layers of menu items and website page categories.
This is a great example if you want to show the avatar of a logged-in website visitor and a choice of pages relevant to the administration of their account.