Health Design System

Side Nav: Accordion

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

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