Flowbite Svelte: v0.46.14
Svelte: v5.0.0-next.179
SvelteKit: v2.5.18
Vite: v5.3.3
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. Loading...