Flowbite Svelte: v0.46.14

Svelte: v5.0.0-next.179

SvelteKit: v2.5.18

Vite: v5.3.3

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.

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 controled by Tailwind class `container`. If you want your navbar to be full page width set the prop `fluid=true`.

Navbar container

If you need more control on navbar content use underlying `NavContainer` component and style it with `class` property.

Active class

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`:

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.