<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>

Side nav

Usage guidelines

Variants

###Default Open navigation. ###Accordion As above but wrapped in an accordion component.

Tokens

The following CSS variables can be declared to define presentation:

Colours

–side-nav-link-bg–active –side-nav-link-border –side-nav-link-border–bottom –side-nav-parent-bg