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.
Default nav
<nav aria-label="Example navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul></nav>.horizontal
Horizontal layout for header navigation.
Horizontal nav
<nav class="horizontal" aria-label="Horizontal navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#" aria-current="page">About</a></li> <li><a href="#">Contact</a></li> </ul></nav>.vertical
Explicit vertical layout for sidebar navigation.
Vertical nav
<nav class="vertical" aria-label="Sidebar navigation"> <ul> <li><a href="#">Dashboard</a></li> <li><a href="#" aria-current="page">Settings</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Help</a></li> </ul></nav>.pills
Pill-shaped links with rounded backgrounds.
Pill nav
<nav class="horizontal pills" aria-label="Pill navigation"> <ul> <li><a href="#">All</a></li> <li><a href="#" aria-current="page">Active</a></li> <li><a href="#">Completed</a></li> <li><a href="#">Archived</a></li> </ul></nav>.tabs
Tab-style navigation with bottom border indicators.
Tab nav
<nav class="horizontal tabs" aria-label="Tab navigation"> <ul> <li><a href="#">Overview</a></li> <li><a href="#" aria-current="page">Details</a></li> <li><a href="#">Reviews</a></li> <li><a href="#">Related</a></li> </ul></nav>.breadcrumb
Breadcrumb navigation with separator characters. Use <ol> for proper semantics.
Breadcrumb nav
<nav class="breadcrumb" aria-label="Breadcrumb"> <ol> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Category</a></li> <li><span aria-current="page">Current Page</span></li> </ol></nav>.breadcrumb separators
Use data-separator to change the separator character.
Breadcrumb separator variants
<nav class="breadcrumb" data-separator="chevron" aria-label="Breadcrumb"> <ol> <li><a href="#">Home</a></li> <li><a href="#">Docs</a></li> <li><span aria-current="page">Nav</span></li> </ol></nav> <!-- data-separator values: chevron, arrow, dot, pipe -->.breadcrumb collapsed
Use data-collapsed to hide middle items for deep hierarchies.
Collapsed breadcrumb
<nav class="breadcrumb" data-collapsed aria-label="Breadcrumb"> <ol> <li><a href="#">Home</a></li> <li><a href="#">Level 1</a></li> <li><a href="#">Level 2</a></li> <li><a href="#">Level 3</a></li> <li><a href="#">Level 4</a></li> <li><span aria-current="page">Current Page</span></li> </ol></nav>.bottom
Sticky bottom tab bar for mobile navigation. Stacks icon and label vertically in each link.
Bottom tab bar
<nav class="bottom" aria-label="Bottom tab bar"> <ul> <li><a href="#" aria-current="page"><icon-wc name="home"></icon-wc> Home</a></li> <li><a href="#"><icon-wc name="search"></icon-wc> Search</a></li> <li><a href="#"><icon-wc name="bell"></icon-wc> Alerts</a></li> <li><a href="#"><icon-wc name="user"></icon-wc> Profile</a></li> </ul></nav>.minimal
Subtle, minimal link styling.
Minimal nav
<nav class="horizontal minimal" aria-label="Minimal navigation"> <ul> <li><a href="#">Privacy</a></li> <li><a href="#">Terms</a></li> <li><a href="#">Cookies</a></li> <li><a href="#">Sitemap</a></li> </ul></nav>.pagination
Page navigation for multi-page content.
Pagination
<nav class="pagination" aria-label="Pagination"> <ul> <li><a href="#" data-prev>Previous</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#" aria-current="page">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#" data-next>Next</a></li> </ul></nav>.pagination variants
Ellipsis, simple (prev/next only), and compact (connected buttons) variants.
Simple pagination
<nav class="pagination" data-variant="simple" aria-label="Pagination"> <ul> <li><a href="#" data-prev>Previous</a></li> <li><span data-info>Page 3 of 10</span></li> <li><a href="#" data-next>Next</a></li> </ul></nav>Compact pagination
<nav class="pagination" data-variant="compact" aria-label="Pagination"> <ul> <li><a href="#" data-prev>Prev</a></li> <li><a href="#">1</a></li> <li><a href="#" aria-current="page">2</a></li> <li><a href="#">3</a></li> <li><a href="#" data-next>Next</a></li> </ul></nav>.tree
Hierarchical tree navigation using <details> and <summary> for collapsible sections. Uses +/- indicators for expand/collapse state.
Tree navigation
<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.
Nested tree
<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-density="compact" for tighter spacing in dense navigation.
Compact tree
<nav class="tree" data-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>; supports data-density |
.bottom |
Sticky bottom tab bar for mobile; flex row with icon+label stacking and safe-area padding |
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") |
Tree Attributes
| Attribute | Values | Description |
|---|---|---|
data-density |
compact |
Reduces spacing for dense navigation |
open |
on <details> |
Expands section by default |
Accessibility
- Nav creates a navigation landmark for screen reader navigation
- Use
aria-labelto 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
- Tree navigation uses native
<details>/<summary>which are keyboard accessible and announce expand/collapse state