Navbar
The navbar component can be used to show a list of navigation links positioned on the top side of your page based on multiple layouts, sizes, and dropdowns
Default navbar
html
typescript
<flowbite-navbar [isOpen]="true">
<flowbite-navbar-content>
<flowbite-navbar-item>Hello world!</flowbite-navbar-item>
</flowbite-navbar-content>
</flowbite-navbar>Navbar with brand
Use this example to display a brand element inside the navbar by importing the
html
typescript
<flowbite-navbar [isOpen]="true">
<flowbite-navbar-brand> Flowbite </flowbite-navbar-brand>
<flowbite-navbar-content>
<flowbite-navbar-item> Home </flowbite-navbar-item>
<flowbite-navbar-item> Contacts </flowbite-navbar-item>
</flowbite-navbar-content>
</flowbite-navbar>Navbar with dropdown
Use this example to feature a dropdown menu when clicking on the settings dropdown inside the navbar by importing the
html
typescript
<flowbite-navbar [isOpen]="true">
<flowbite-navbar-brand> Flowbite </flowbite-navbar-brand>
<flowbite-navbar-content>
<flowbite-navbar-item>Hello world!</flowbite-navbar-item>
<flowbite-dropdown label="Settings">
<flowbite-dropdown-item> Profile </flowbite-dropdown-item>
<flowbite-dropdown-item> Billing </flowbite-dropdown-item>
<flowbite-dropdown-item> App settings </flowbite-dropdown-item>
</flowbite-dropdown>
</flowbite-navbar-content>
</flowbite-navbar>Responsive navbar
On mobile device the navigation bar will be collapsed and you will be able to use the hamburger menu to toggle the menu items by adding the
html
typescript
<flowbite-navbar>
<flowbite-navbar-brand> Flowbite </flowbite-navbar-brand>
<flowbite-navbar-toggle />
<flowbite-navbar-content>
<flowbite-navbar-item> Home </flowbite-navbar-item>
<flowbite-navbar-item> Pricing </flowbite-navbar-item>
<flowbite-navbar-item> Contacts </flowbite-navbar-item>
</flowbite-navbar-content>
</flowbite-navbar>