Photo: Abbey Alabi
Nested Nav
Introduction
The nested navigation component provides a structured, multi-level sidebar navigation. It supports up to three levels of hierarchy, with indentation and font size communicating depth.
Nested Navigation
Add .nested-nav to a <ul> element. In Figure 1, the level-one link marks the active section, and the nested link marks the current page.
HTML
<nav>
<ul class="nested-nav"> <li> <a href="#">Overview</a> </li> <li> <a href="#" aria-current="true">American Robin</a> <ul> <li> <a href="#" aria-current="page">Nesting</a> </li> <li> <a href="#">Diet</a> </li> <li> <a href="#">Migration</a> </li> </ul> </li> <li> <a href="#">Eastern Bluebird</a> <ul> <li> <a href="#">Identification</a> <ul> <li> <a href="#">Plumage</a> </li> <li> <a href="#">Song</a> </li> </ul> </li> <li> <a href="#">Habitat</a> </li> </ul> </li> <li> <a href="#">Conservation</a> </li> <li> <a href="#">Resources</a> </li> </ul>
</nav>Related Custom Properties
Nested navigation styles can be customized by redefining the related CSS custom properties.
CSS
:root { --nav-nested-padding-x: var(--nav-divider-padding-x); --nav-nested-padding-y: 0.5em; --nav-nested-parent-font-size: var(--font-size-md); --nav-nested-child-font-size: var(--font-size-sm); --nav-nested-indicator-width: 3px; --nav-nested-indicator-color: currentColor;}| Custom property | Default | Purpose |
|---|---|---|
--nav-nested-padding-x | var(--nav-divider-padding-x) | Horizontal padding for navigation links at all levels. Level 2 and 3 multiply this value to create indentation. |
--nav-nested-padding-y | 0.5em | Vertical padding for navigation links. |
--nav-nested-parent-font-size | var(--font-size-md) | Font size for level-1 navigation links. |
--nav-nested-child-font-size | var(--font-size-sm) | Font size for level-2 and level-3 navigation links. |
--nav-nested-indicator-width | 3px | Width of the active indicator bar on level-1 items. |
--nav-nested-indicator-color | currentColor | Color of the active indicator bar. Defaults to currentColor. Override with a color token such as var(--color-primary). |
