Tailwind CSS Navs

Basic usage

Classes are used throughout, so your markup can be super flexible. Use <ul>s like above, <ol> if the order of your items is important.

Available styles

Change the style of tabs component with modifiers and utilities. Mix and match as needed, or build your own.

Tabs with underline

A basic form of tabs with underline.

With icons

Contained tabs with icons.

With badges

Simple example with badges.

Horizontal alignment

Centered with .justify-center:

Right-aligned with .justify-end:

Vertical

Vertically stacked navigation.

Card type tab

Another type of Tabs.

Segment

Another type of Tabs with segment.

Bar with underline

Another type of Tabs with underlined bar.

Pills on gray color

Another type of Tabs with pills on gray color.

Pills with brand color

Another type of Tabs with pills.

Fill and justify

Force your nav's contents to extend the full available width one of two modifier classes. Notice that all horizontal space is occupied, but not every nav item has the same width.

Example with <ul>-based navigation.

Example with <nav>-based navigation.

Equal-width elements

All horizontal space will be occupied by nav links, but unlike the example above, every nav item will be the same width.

Example with <nav>-based navigation.