Navigation

Navbar

The navbar component provides versatile options for displaying navigation links at the top of your page, with various layouts, sizes, and dropdowns.

Basic example

Default

Basic navbar example with title only.

Variants

With title as logo

Basic navbar example with title as logo.

With dropdown

Below given example displays navbar with dropdown menu.

With indicator & avatar

Below given example displays navbar with notifications indicator & user details avatar.

With centered brand name

Below given example displays navbar with centered brand name.

With search

Below given example displays navbar with search input.

With CTA button

Below given example displays navbar with call to action button.

Illustrations

Responsive (hamburger)

The example below demonstrates a responsive navbar that includes a hamburger menu for smaller screens.

With solid background

The example below demonstrates a navbar with solid background.

Sticky navbar

The example below demonstrates a sticky navbar.

Multilevel navigation (collapse)

The example below demonstrates a navbar with multi level navigation using collapse.

Multilevel navigation (dropdown)

The example below demonstrates a navbar with multi level navigation using dropdown.

With submenu

The example below demonstrates a navbar with submenu.

Mega menu

On click

Craft user-friendly Mega Menus with Tailwind CSS, incorporating multi-level dropdown navigation to streamline content access and enhance the browsing experience for website visitors.

On hover

The example below shows a navbar that features a mega menu activated on hover.

Class referenceThe component, style, color, state, size and modifier classes available for this component.
ClassTypeDescription
navbarcomponentBase class for navbar container.
navbar-startplacementChild element, fills 50% of width to be on start.
navbar-centerplacementChild element, fills remaining space to be on center.
navbar-endplacementChild element, fills 50% of width to be on end.