nav

Navigation sections containing links to other pages or parts of the page. Used for primary navigation, table of contents, breadcrumbs, and pagination.

Usage

Use the <nav> element for:

Primary site navigation in the header
Secondary navigation in sidebars or footers
Breadcrumb navigation
Table of contents
Pagination links
Hierarchical tree navigation for documentation or file browsers

Not all groups of links need to be in a nav element. Reserve nav for major navigation blocks. Use aria-label or aria-labelledby to distinguish multiple nav elements.

Examples

Default

Basic nav with styled list and links.

.horizontal

Horizontal layout for header navigation.

.vertical

Explicit vertical layout for sidebar navigation.

.pills

Pill-shaped links with rounded backgrounds.

.tabs

Tab-style navigation with bottom border indicators.

.breadcrumb

Breadcrumb navigation with separator characters. Use <ol> for proper semantics.

.breadcrumb with separators

Use data-separator to change the separator character.

data-separator="chevron"

data-separator="arrow"

data-separator="dot"

data-separator="pipe"

.breadcrumb collapsed

Use data-collapsed to hide middle items for deep hierarchies.

.breadcrumb with truncation

Use data-truncated on items with long labels.

.minimal

Subtle, minimal link styling.

With current page

Using aria-current="page" for active state.

Nested navigation

Multi-level navigation structure.

In site header

Navigation within a site header.

Brand

.pagination

Page navigation for multi-page content.

.pagination with ellipsis

Use ellipsis for large page counts.

.pagination simple variant

Only prev/next controls, hiding page numbers.

.pagination compact variant

Connected buttons for a tighter appearance.

.pagination sizes

Three sizes for different contexts.

data-size="sm"

default (medium)

data-size="lg"

.tree

Hierarchical tree navigation using <details> and <summary> for collapsible sections. Uses +/- indicators for expand/collapse state.

<nav class="tree" aria-label="Documentation"> <details open> <summary>Getting Started</summary> <ul> <li><a href="#">Installation</a></li> <li><a href="#" aria-current="page">Quick Start</a></li> </ul> </details> <details> <summary>Components</summary> <ul> <li><a href="#">Buttons</a></li> <li><a href="#">Forms</a></li> </ul> </details> </nav>

.tree nested

Tree navigation supports multiple nesting levels for deep hierarchies.

<nav class="tree" aria-label="Documentation"> <details open> <summary>Documentation</summary> <details open> <summary>Elements</summary> <ul> <li><a href="#">Buttons</a></li> <li><a href="#" aria-current="page">Navigation</a></li> </ul> </details> <details> <summary>Layout</summary> <ul> <li><a href="#">Grid</a></li> </ul> </details> </details> </nav>

.tree compact

Use data-layout-density="compact" for tighter spacing in dense navigation.

<nav class="tree" data-layout-density="compact" aria-label="API Reference"> <details open> <summary>API Reference</summary> <ul> <li><a href="#">Methods</a></li> <li><a href="#">Properties</a></li> </ul> </details> </nav>

Variants

Layout Variants

Class	Description
`.horizontal`	Flexbox row layout with wrapping
`.vertical`	Flexbox column layout (default behavior)

Style Variants

Class	Description
`.pills`	Fully rounded links with hover/active backgrounds
`.tabs`	Bottom border indicators with underline on current page
`.breadcrumb`	Horizontal list with separators; supports `data-separator`, `data-collapsed`, `data-truncated`
`.minimal`	Subtle muted links with minimal padding
`.pagination`	Page navigation with prev/next controls; supports `data-variant`, `data-size`
`.tree`	Hierarchical tree navigation using `<details>`/`<summary>` for collapsible sections; supports `data-density`

Tree Attributes

Attribute	Values	Description
`data-density`	`compact`	Reduces spacing for dense navigation
`open`	on `<details>`	Expands section by default

Breadcrumb Attributes

Attribute	Values	Description
`data-separator`	`chevron`, `arrow`, `dot`, `pipe`	Changes the separator character (default is "/")
`data-collapsed`	boolean	Hides middle items, shows only first, "...", and last two
`data-truncated`	on item	Truncates long labels with ellipsis (max 10rem)

Pagination Attributes

Attribute	Values	Description
`data-variant`	`simple`, `compact`	Display variant: simple shows only prev/next, compact connects buttons
`data-size`	`sm`, `lg`	Size variant (default is medium)
`data-prev`	on link	Marks the "previous" link
`data-next`	on link	Marks the "next" link
`data-ellipsis`	on span	Marks ellipsis placeholder (non-interactive)
`data-info`	on span	Page info text (e.g., "Page 3 of 10")

Accessibility

Nav creates a navigation landmark for screen reader navigation
Use aria-label to distinguish multiple nav elements (e.g., "Main navigation", "Footer navigation")
Use aria-current="page" on the link to the current page
Breadcrumbs should use <ol> for ordered sequence semantics
Ensure sufficient color contrast for link text and focus states
Links should have visible focus indicators
Consider keyboard navigation order and tab flow
Tree navigation uses native <details>/<summary> which are keyboard accessible and announce expand/collapse state

Related Elements

<header> - Primary nav typically lives in site headers
<footer> - Secondary nav often appears in footers
<aside> - Sidebar nav can be placed in asides
<main> - Nav should be outside main content area