• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Side navigation

Component status
Contribution
Current version@spectrum-css/sidenav@5.1.3
ReleasedSeptember 13, 2024
S2-foundations@spectrum-css/sidenav@6.0.0-s2-foundations.13
ReleasedSeptember 12, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Usage notes

Side navigation lets users navigate the entire content of a product or a section. Make sure to use the appropriate variant for the context and user needs. Don’t mix behavior, styles, or variations together in a single navigation menu.

Variants

Standard
Contribution

When navigation is simple use the standard or single level navigation.

Show markup
<nav>
  <ul class="spectrum-SideNav">
    <li class="spectrum-SideNav-item is-selected">
      <!-- aria-current denotes current "page" or "location" -->
      <a href="#" class="spectrum-SideNav-itemLink" aria-current="page">
        <span class="spectrum-SideNav-link-text">Section Title 1</span>
      </a>
    </li>
    <li class="spectrum-SideNav-item is-disabled">
      <a class="spectrum-SideNav-itemLink">
        <span class="spectrum-SideNav-link-text">Section Title 2</span>
      </a>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">
        <span class="spectrum-SideNav-link-text">Section Title 3</span>
      </a>
    </li>
  </ul>
</nav>

Multilevel
Contribution

Use a multi-level side navigation when there are multiple layers of hierarchical navigation.

Show markup
<nav>
  <ul class="spectrum-SideNav spectrum-SideNav--multiLevel">
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">
        <span class="spectrum-SideNav-link-text"> Section Title 1 for a Multilevel Side Nav</span>
      </a>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">
        <span class="spectrum-SideNav-link-text"> Section Title 2</span>
      </a>
      <ul class="spectrum-SideNav">
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">
            <span class="spectrum-SideNav-link-text"> Section Title 1</span>
          </a>
        </li>
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">
            <span class="spectrum-SideNav-link-text"> Section Title 2</span>
          </a>
          <ul class="spectrum-SideNav">
            <li class="spectrum-SideNav-item">
              <a href="#" class="spectrum-SideNav-itemLink">
                <span class="spectrum-SideNav-link-text"> Section Title 1</span>
              </a>
            </li>
            <li class="spectrum-SideNav-item">
              <a href="#" class="spectrum-SideNav-itemLink">
                <span class="spectrum-SideNav-link-text"> Section Title 2</span>
              </a>
            </li>
          </ul>
        </li>
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">
            <span class="spectrum-SideNav-link-text"> Section Title 3</span>
          </a>
        </li>
      </ul>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">
        <span class="spectrum-SideNav-link-text"> Section Title 4</span>
      </a>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">
        <span class="spectrum-SideNav-link-text"> Section Title 5</span>
      </a>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">
        <span class="spectrum-SideNav-link-text"> Section Title 6</span>
      </a>
    </li>
  </ul>
</nav>

Heading
Contribution

When navigation is simple but categorical, use the single level side navigation with headings.

Show markup
<nav>
  <ul class="spectrum-SideNav">
    <li class="spectrum-SideNav-item is-selected">
      <!-- aria-current denotes current "page" or "location" -->
      <a href="#" class="spectrum-SideNav-itemLink" aria-current="page">
        <span class="spectrum-SideNav-link-text"> Section 1</span>
      </a>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">
        <span class="spectrum-SideNav-link-text"> Section 2</span>
      </a>
    </li>
    <li class="spectrum-SideNav-item">
      <h2 class="spectrum-SideNav-heading" id="nav-heading-1">Heading 1</h2>
      <ul class="spectrum-SideNav" aria-labelledby="nav-heading-1">
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">
            <span class="spectrum-SideNav-link-text"> Section 3</span>
          </a>
        </li>
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">
            <span class="spectrum-SideNav-link-text"> Section 4</span>
          </a>
        </li>
      </ul>
    </li>
    <li class="spectrum-SideNav-item">
      <h2 class="spectrum-SideNav-heading" id="nav-heading-2">Heading 2</h2>
      <ul class="spectrum-SideNav" aria-labelledby="nav-heading-2">
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">
            <span class="spectrum-SideNav-link-text"> Section 5</span>
          </a>
        </li>
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">
            <span class="spectrum-SideNav-link-text"> Section 6</span>
          </a>
        </li>
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">
            <span class="spectrum-SideNav-link-text"> Section 7</span>
          </a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Icon
Contribution

Icons can be displayed in first-level items of any type of side navigation (single level or multi-level).

Show markup
<nav>
  <ul class="spectrum-SideNav spectrum-SideNav--multiLevel spectrum-SideNav--hasIcon">
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">
        <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Image" />
        </svg>
        <span class="spectrum-SideNav-link-text"> Section Title 2</span>
      </a>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">
        <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Folder" />
        </svg>
        <span class="spectrum-SideNav-link-text"> Section Title 2</span>
      </a>
      <ul class="spectrum-SideNav">
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">
            <span class="spectrum-SideNav-link-text"> Section Title 1</span>
          </a>
        </li>
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">
            <span class="spectrum-SideNav-link-text"> Section Title 2</span>
          </a>
          <ul class="spectrum-SideNav">
            <li class="spectrum-SideNav-item">
              <a href="#" class="spectrum-SideNav-itemLink">
                <span class="spectrum-SideNav-link-text"> Section Title 1</span>
              </a>
            </li>
            <li class="spectrum-SideNav-item">
              <a href="#" class="spectrum-SideNav-itemLink">
                <span class="spectrum-SideNav-link-text"> Section Title 2</span>
              </a>
            </li>
          </ul>
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">
            <span class="spectrum-SideNav-link-text"> Section Title 3</span>
          </a>
        </li>
      </ul>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">
        <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Star" />
        </svg>
        <span class="spectrum-SideNav-link-text"> Section Title 4</span>
      </a>
    </li>
    <li class="spectrum-SideNav-item is-disabled">
      <a class="spectrum-SideNav-itemLink">
        <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-Document" />
        </svg>
        <span class="spectrum-SideNav-link-text"> Section Title 5</span>
      </a>
    </li>
  </ul>
</nav>

Migration Guide

Core token migration work and design updates added a span tag wrapping the link text.