Skip to main content
U.S. flag

An official website of the United States government

Dot gov

Official websites use .gov
A .gov website belongs to an official government organization in the United States.

Https

Secure .gov websites use HTTPS
A lock ( ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

Side navigation

Hierarchical, vertical navigation to place at the side of a page. This should correspond to other headers on the page.

View USWDS component

View Login.gov SCSS on GitHub

Single level

<nav aria-label="Secondary navigation" class="tablet:grid-col-4">
  <ul class="usa-sidenav">
    <li class="usa-sidenav__item usa-parent">
      <a href="" class="usa-current">Current page</a>
    </li>
    <li class="usa-sidenav__item usa-parent">
      <a href="">Parent link</a>
    </li>
    <li class="usa-sidenav__item usa-parent">
      <a href="">Parent link</a>
    </li>
  </ul>
</nav>

Two levels

<nav aria-label="Secondary navigation" class="tablet:grid-col-4">
  <ul class="usa-sidenav">
    <li class="usa-sidenav__item usa-parent">
      <a href="" class="usa-current">Current page</a>
      <ul class="usa-sidenav__sublist">
        <li class="usa-sidenav__item">
          <a href="" class="usa-current">Child link</a>
        </li>
        <li class="usa-sidenav__item">
          <a href="">Child link</a>
        </li>           
      </ul>
    </li>
    <li class="usa-sidenav__item usa-parent">
      <a href="">Parent link</a>
    </li>
  </ul>
</nav>

Three levels

<nav aria-label="Secondary navigation" class="tablet:grid-col-4">
  <ul class="usa-accordion usa-sidenav">
    <li class="usa-sidenav__item usa-parent">
      <a href="" class="usa-current">Current page</a>
      <ul class="usa-sidenav__sublist">
        <li class="usa-sidenav__item">
          <a href="">Child link</a>
          <ul class="usa-sidenav__sublist">
        <li class="usa-sidenav__item">
          <a href="" class="usa-current">Grandchild link</a>
        </li>
        <li class="usa-sidenav__item">
          <a href="">Grandchild link</a>
        </li>           
      </ul>
        </li>
        <li class="usa-sidenav__item">
          <a href="">Child link</a>
        </li>           
      </ul>
    </li>
    <li class="usa-sidenav__item usa-parent">
      <a href="">Parent link</a>
    </li>
  </ul>
</nav>