<div class="grid-row grid-gap">
<div class="tablet:grid-col-4">
<h6 class="usa-heading-alt">Single level</h6>
<nav aria-label="Secondary navigation">
<ul class="usa-sidenav">
<li class="usa-sidenav__item">
<a href="" class="usa-current">Current page</a>
</li>
<li class="usa-sidenav__item">
<a href="">Parent link</a>
</li>
<li class="usa-sidenav__item">
<a href="">Parent link</a>
</li>
</ul>
</nav>
</div>
<div class="tablet:grid-col-4">
<h6 class="usa-heading-alt">Two levels</h6>
<nav aria-label="Secondary navigation">
<ul class="usa-sidenav">
<li class="usa-sidenav__item">
<a href="">Parent link</a>
</li>
<li class="usa-sidenav__item">
<a href="" class="usa-current">Current page</a>
<ul class="usa-sidenav__sublist">
<li class="usa-sidenav__item">
<a href="">Child link</a>
</li>
<li class="usa-sidenav__item">
<a href="">Child link</a>
</li>
<li class="usa-sidenav__item">
<a href="">Child link</a>
</li>
<li class="usa-sidenav__item">
<a href="">Child link</a>
</li>
<li class="usa-sidenav__item">
<a href="" class="usa-current">Child link</a>
</li>
</ul>
</li>
<li class="usa-sidenav__item">
<a href="">Parent link</a>
</li>
</ul>
</nav>
</div>
<div class="tablet:grid-col-4">
<h6 class="usa-heading-alt">Three levels</h6>
<nav aria-label="Secondary navigation">
<ul class="usa-sidenav">
<li class="usa-sidenav__item">
<a href="">Parent link</a>
</li>
<li class="usa-sidenav__item">
<a href="" class="usa-current">Current page</a>
<ul class="usa-sidenav__sublist">
<li class="usa-sidenav__item">
<a href="">Child link</a>
</li>
<li class="usa-sidenav__item">
<a href="">Child link</a>
<ul class="usa-sidenav__sublist">
<li class="usa-sidenav__item">
<a href="">Grandchild link</a>
</li>
<li class="usa-sidenav__item">
<a href="">Grandchild link</a>
</li>
<li class="usa-sidenav__item">
<a href="" class="usa-current">Grandchild link</a>
</li>
</ul>
</li>
<li class="usa-sidenav__item">
<a href="">Child link</a>
</li>
<li class="usa-sidenav__item">
<a href="">Child link</a>
</li>
<li class="usa-sidenav__item">
<a href="">Child link</a>
</li>
</ul>
</li>
<li class="usa-sidenav__item">
<a href="">Parent link</a>
</li>
</ul>
</nav>
</div>
</div>
No notes defined.
<div class="grid-row grid-gap">
{%- for nav in sidenavs -%}
<div class="tablet:grid-col-4">
<h6 class="usa-heading-alt">{{ nav.title }}</h6>
{%- render '@sidenav--default', {sidenav: nav} -%}
</div>
{%- endfor -%}
</div>
package:
name: null
version: 2.1.0
uswds:
path: ../../dist
sidenav:
links:
- text: Parent link
- text: Current page
current: true
links:
- text: Child link
- text: Child link
current: true
links:
- text: Grandchild link
- text: Grandchild link
- text: Grandchild link
current: true
- text: Grandchild link
- text: Child link
- text: Child link
- text: Child link
- text: Parent link
sidenavs:
- title: Single level
links:
- text: Current page
current: true
- text: Parent link
- text: Parent link
- title: Two levels
links:
- text: Parent link
- text: Current page
current: true
links:
- text: Child link
- text: Child link
- text: Child link
- text: Child link
- text: Child link
current: true
- text: Parent link
- title: Three levels
links:
- text: Parent link
- text: Current page
current: true
links:
- text: Child link
- text: Child link
links:
- text: Grandchild link
- text: Grandchild link
- text: Grandchild link
current: true
- text: Child link
- text: Child link
- text: Child link
- text: Parent link