Get started with the responsive navbar component from Flowbite to quickly set up a navigation menu for your website and set up the logo, list of pages, CTA button, search input, user profile options with a dropdown, and more.
Setup # Default navbar #Use this example of a navigation bar built with the utility classes from Tailwind CSS to enable users to navigate across the pages of your website.
By default, navbar content width is controlled by Tailwind class container. If you want your navbar to be full page width set the prop fluid=true.
Utilize the href prop within the NavLi component to incorporate a hyperlink. To initiate the application of the active class, include the activeUrl prop within the NavUl component:
Control the active and nonactive class by using activeClass and nonActiveClass:
Controls whether the navbar dropdown respects the userâs motion preferences set in their operating system or browser. When enabled (default), the navbar dropdown will automatically disable animations for users who have âReduce motionâ enabled in their system accessibility settings. This helps users with vestibular disorders, ADHD, or those who simply prefer fewer animations. Itâs recommended to keep this enabled (true) to ensure your navbar is accessible to users with motion sensitivities. Only disable if you have specific design requirements that require consistent animations for all users.
Transitions #Use slide (default), fly, fade, or scale transtion.
Fly transition # Fade transition # Scale transition # closeOnClickOutside #Controls whether the navbar menu closes when clicking outside of it.
Type: boolean | Default: true
Set closeOnClickOutside to false to disable closing the menu when clicking outside the navbar. Useful for persistent menus or custom close behaviors.
Navbar with dropdown #This example can be used to show a secondary dropdown menu when clicking on one of the navigation links.
Navbar with search #Use this example of a navbar element to also show a search input element that you can integrate for a site-wide search.
Navbar with CTA button #Use the following navbar element to show a call to action button alongside the logo and page links.
Sticky navbar #Use this example to keep the navbar positioned fixed to the top side as you scroll down the document page.
User menu dropdown #Use this example to create a navigation bar with a user profile or button to toggle a dropdown menu.
Solid background #Use this example to show a solid background for the navbar component instead of being transparent.
Breakpoint #Use breakpoint="sm" | "md" (default) | "lg" | "xl" prop to change the breakpoint of navbar.
The component has the following props, type, and default values. See types page for type information.
References #RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4