Nested Nav • Natura11y Design Ecosystem

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.

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.

<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>

Figure 1

Nested navigation styles can be customized by redefining the related CSS custom properties.

: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;
}

Figure 2

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).

Introduction

Nested Navigation

Related Custom Properties

Read Next

Navigation

Breadcrumb

Main Menu