Navbar Examples
The Navbar component provides a responsive navigation bar with flexible configurations, including brand logos, links, toggles, and interactive elements.
Default Navbar #
Use this example of a navigation bar to enable users to navigate across your website with basic navigation links.
<Navbar>
<NavbarBrand Href="/">
<img src="/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
</NavbarBrand>
<NavbarToggle />
<NavbarCollapse>
<NavbarLink Href="/" Active>Home</NavbarLink>
<NavbarLink Href="/about">About</NavbarLink>
<NavbarLink Href="/services">Services</NavbarLink>
<NavbarLink Href="/pricing">Pricing</NavbarLink>
<NavbarLink Href="/contact">Contact</NavbarLink>
</NavbarCollapse>
</Navbar>Navbar with CTA Button #
Include a call-to-action button alongside navigation items to encourage user interaction.
<Navbar>
<NavbarBrand Href="/">
<img src="/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
</NavbarBrand>
<div class="flex md:order-2">
<Button Color="ButtonColor.Default">Get started</Button>
<NavbarToggle />
</div>
<NavbarCollapse>
<NavbarLink Href="/" Active>Home</NavbarLink>
<NavbarLink Href="/about">About</NavbarLink>
<NavbarLink Href="/services">Services</NavbarLink>
<NavbarLink Href="/contact">Contact</NavbarLink>
</NavbarCollapse>
</Navbar>Navbar with Disabled Link #
Demonstrate how to display disabled navigation items that cannot be interacted with.
<Navbar>
<NavbarBrand Href="/">
<img src="/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
</NavbarBrand>
<NavbarToggle />
<NavbarCollapse>
<NavbarLink Href="/" Active>Home</NavbarLink>
<NavbarLink Href="/about">About</NavbarLink>
<NavbarLink Href="/services" Disabled>Services</NavbarLink>
<NavbarLink Href="/pricing">Pricing</NavbarLink>
<NavbarLink Href="/contact">Contact</NavbarLink>
</NavbarCollapse>
</Navbar>Navbar with Dropdown #
Add dropdown menus to navigation items and include a user profile dropdown for additional interactions.
<Navbar>
<NavbarBrand Href="/">
<img src="/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
</NavbarBrand>
<div class="flex md:order-2">
<Dropdown ArrowIcon="false" Inline="true">
<Label>
<Avatar Alt="User settings" ImageUrl="https://flowbite.com/docs/images/people/profile-picture-5.jpg" Rounded />
</Label>
<ChildContent>
<DropdownHeader>
<span class="block text-sm">Bonnie Green</span>
<span class="block truncate text-sm font-medium">name@flowbite.com</span>
</DropdownHeader>
<DropdownItem>Dashboard</DropdownItem>
<DropdownItem>Settings</DropdownItem>
<DropdownItem>Earnings</DropdownItem>
<DropdownDivider />
<DropdownItem>Sign out</DropdownItem>
</ChildContent>
</Dropdown>
<NavbarToggle />
</div>
<NavbarCollapse>
<NavbarLink Href="/" Active>Home</NavbarLink>
<NavbarLink HasDropdown>
<ChildContent>Features</ChildContent>
<DropdownContent>
<DropdownItem>Analytics</DropdownItem>
<DropdownItem>Automation</DropdownItem>
<DropdownItem>Reports</DropdownItem>
</DropdownContent>
</NavbarLink>
<NavbarLink Href="/pricing">Pricing</NavbarLink>
<NavbarLink HasDropdown>
<ChildContent>Resources</ChildContent>
<DropdownContent>
<DropdownHeader>Documentation</DropdownHeader>
<DropdownItem>Getting Started</DropdownItem>
<DropdownItem>Components</DropdownItem>
<DropdownDivider />
<DropdownHeader>Help</DropdownHeader>
<DropdownItem>Support</DropdownItem>
<DropdownItem>Contact</DropdownItem>
</DropdownContent>
</NavbarLink>
</NavbarCollapse>
</Navbar>