SDC Pattern Library

Navigation

Rationale

Navigation within a survey to allow a respondent to complete sections of a survey in a non-linear fashion.

Research

Overview of research undertaken.

Usage

Where this component should be used.

Horizontal Navigation

TBC

Sectional Navigation

This component should be inserted into the final 4 columns of a standard survey template.

Use this with…

This component should be used with the button--menu component. The menu button will allow the navigation component to be toggled to show and hide on mobile views.

<nav class="nav nav--sections nav--vertical js-nav page__nav" id="section-nav" aria-labelledby="menu-btn" role="menu">
    <h2 class="nav__title venus">Nav Section</h2>
    <ul class="nav__list js-nav-list">
        <li class="nav__item pluto nav__item--completed">
            <a class="nav__link" href="#item1" role="menuitem">Completed nav item</a>
        </li>
        <li class="nav__item pluto nav__item--current">
            <a class="nav__link" href="#item2" role="menuitem">Second item in an unordered list</a>
        </li>
        <li class="nav__item pluto ">
            <a class="nav__link" href="#item3" role="menuitem">Consectetur adipiscing elit curabitur a elit vehicula, finibus arcu ut</a>
        </li>
        <li class="nav__item pluto ">
            <a class="nav__link" href="#item4" role="menuitem">Lorem ipsum dolor sit amet</a>
        </li>
    </ul>
</nav>
 
/* No context defined for this component. */