Hierarchical, vertical navigation.
Code snippet
<nav>
<ul class="ds-c-vertical-nav">
<li class="ds-c-vertical-nav__item">
<a class="ds-c-vertical-nav__label" href="javascript:void(0);"> Parent link </a>
</li>
<li class="ds-c-vertical-nav__item">
<button
class="ds-c-vertical-nav__label ds-c-vertical-nav__label--current ds-c-vertical-nav__label--parent"
title="Collapse sub-navigation"
aria-expanded="true"
>
Current page
<svg
aria-labelledby="icon-46__title"
aria-hidden="true"
class="ds-c-icon ds-c-icon--arrow ds-c-icon--arrow-up"
focusable="false"
id="icon-46"
role="img"
viewBox="0 0 320 512"
xmlns="http://www.w3.org/2000/svg"
>
<title id="icon-46__title">up arrow</title>
<path
fill="currentColor"
d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
></path>
</svg>
</button>
<ul class="ds-c-vertical-nav__subnav">
<li class="ds-c-vertical-nav__item">
<a class="ds-c-vertical-nav__label" href="javascript:void(0);"> Child link </a>
</li>
<li class="ds-c-vertical-nav__item">
<button
class="ds-c-vertical-nav__label ds-c-vertical-nav__label--current ds-c-vertical-nav__label--parent"
title="Collapse sub-navigation"
aria-expanded="true"
>
Child link
<svg
aria-labelledby="icon-46__title"
aria-hidden="true"
class="ds-c-icon ds-c-icon--arrow ds-c-icon--arrow-up"
focusable="false"
id="icon-46"
role="img"
viewBox="0 0 320 512"
xmlns="http://www.w3.org/2000/svg"
>
<title id="icon-46__title">up arrow</title>
<path
fill="currentColor"
d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
></path>
</svg>
</button>
<ul class="ds-c-vertical-nav__subnav">
<li class="ds-c-vertical-nav__item">
<a class="ds-c-vertical-nav__label" href="javascript:void(0);"> Grandchild link </a>
</li>
<li class="ds-c-vertical-nav__item">
<a
class="ds-c-vertical-nav__label ds-c-vertical-nav__label--current"
href="javascript:void(0);"
>
Grandchild link
</a>
</li>
</ul>
</li>
<li class="ds-c-vertical-nav__item">
<a class="ds-c-vertical-nav__label" href="javascript:void(0);"> Child link </a>
</li>
</ul>
</li>
<li class="ds-c-vertical-nav__item">
<a class="ds-c-vertical-nav__label" href="javascript:void(0);"> Parent link </a>
</li>
</ul>
</nav>