<div class="grid-row grid-gap">
<div class="tablet:grid-col-4">
<nav aria-label="Secondary navigation,">
<ul class="usa-sidenav">
<li class="usa-sidenav__item">
<a href="javascript:void(0);" class="usa-current">Current page</a>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Parent link</a>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Parent link</a>
</li>
</ul>
</nav>
</div>
<div class="tablet:grid-col-4">
<nav aria-label="Secondary navigation,,">
<ul class="usa-sidenav">
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Parent link</a>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);" class="usa-current">Current page</a>
<ul class="usa-sidenav__sublist">
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Child link</a>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Child link</a>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Child link</a>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Child link</a>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);" class="usa-current">Child link</a>
</li>
</ul>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Parent link</a>
</li>
</ul>
</nav>
</div>
<div class="tablet:grid-col-4">
<nav aria-label="Secondary navigation,,,">
<ul class="usa-sidenav">
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Parent link</a>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);" class="usa-current">Current page</a>
<ul class="usa-sidenav__sublist">
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Child link</a>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Child link</a>
<ul class="usa-sidenav__sublist">
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Grandchild link</a>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Grandchild link</a>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);" class="usa-current">Grandchild link</a>
</li>
</ul>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Child link</a>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Child link</a>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Child link</a>
</li>
</ul>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Parent link</a>
</li>
</ul>
</nav>
</div>
</div>
No notes defined.
package:
name: metro-digital-design-system-demo
version: 0.1.0
uswds:
path: ../../../dist
placeholderLink: javascript:void()
sidenav:
aria: Secondary navigation
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