Side navigation

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

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>