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