Tailwind CSS Navs

List-based nav

Use <ul> or <ol> markup when navigation items should be presented as an ordered or unordered list.

Nav styles

Mix modifiers and utilities to build underline tabs, pills, segmented navs, and other navigation patterns.

Underline tabs

Use underline tabs for simple section switching with a lightweight active state.

Tabs with icons

Add icons to tabs when labels benefit from an extra visual cue.

Tabs with badges

Add badges to highlight counts, statuses, or updates inside nav items.

Nav alignment

Centered nav

Center nav items with justify-center.

Right-aligned nav

Align nav items to the right with justify-end.

Vertical nav

Stack nav items vertically for sidebars, settings menus, or compact lists.

Card-style tabs

Use card-style tabs for a more contained, panel-like navigation treatment.

Segmented tabs

Use segmented tabs for compact view or filter switches.

Underline bar tabs

Use an underline bar to create a stronger active indicator beneath each item.

Stone pill tabs

Use neutral pill tabs for low-contrast navigation on light or muted surfaces.

Brand pill tabs

Use brand-colored pills to emphasize the active tab more strongly.

Scrollable nav

Use a horizontally scrollable nav when there are too many items to fit in one row.

Fill and justify nav

Stretch nav items across the available width while letting each item size to its content.

Using <ul>-based navigation.

Using <nav> markup

The same fill-and-justify pattern using <nav> markup instead of a list.

Equal-width nav items

Make every nav item the same width while still filling the full row.

Using <nav> markup

The same equal-width pattern using <nav> markup instead of a list.