<aside class="au-side-nav au-accordion" aria-label="side navigation">
<a href="#" class="au-side-nav__toggle au-accordion__title au-accordion--closed" aria-controls="nav-default" aria-expanded="false" onclick="return AU.accordion.Toggle( this )">
In this section
</a>
<div id="nav-default" class="au-side-nav__content au-accordion--closed au-accordion__body">
<h2 class="au-sidenav__title"><a href="#">Animals</a></h2>
<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>
</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