<aside class="au-side-nav" aria-label="side navigation">
<div id="nav-default" class="au-side-nav__content">
<h2 class="au-sidenav__title"><a href="#">Animals</a></h2>
<nav>
<ul class="au-link-list">
<li><a href="#">Mammals</a></li>
<li class="collapsed"><a href="#">Reptiles</a></li>
<li class="collapsed"><a href="#">Insects</a></li>
<li class="expanded active-trail"><a href="#">Dinosaurs</a>
<ul class="au-link-list">
<li><a href="#">Ornithischia</a></li>
<li><a href="#">Sauropodomorpha </a></li>
<li class="expanded active-trail"><a href="#">Theropods</a>
<ul class="au-link-list">
<li><a href="#" class="active">Tyrannosaurus</a></li>
<li><a href="#">Massospondylus</a></li>
<li><a href="#">Baryonyx</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Birds</a></li>
</ul>
</nav>
</div>
</aside>
###Default Open navigation. ###Accordion As above but wrapped in an accordion component.
The following CSS variables can be declared to define presentation:
–side-nav-link-bg–active –side-nav-link-border –side-nav-link-border–bottom –side-nav-parent-bg