Top

Usage

The stepped navigation makes use of nav and ol elements for semantic structuring. Each item in the list represents a single step out of multiple consecutive steps.

<nav class="steps">
    <ol>
        <li><span class="step">Review</span></li>
        <li><span class="step">Shipping</span></li>
        <li><span class="step">Billing</span></li>
        <li><span class="step">Complete</span></li>
    </ol>
</nav>

Completed Steps

An .is-complete class should be added to the parent li for every completed step.

<li class="is-complete"><span class="step">Review</span></li>

Linking Steps

An a tag can be used in place of a span to link steps or trigger JavaScript.

<li><a href="#review" class="step">Review</a></li>

Sizes

Adding a .small or .large class to the .steps element will alter the font size.

<nav class="steps large">
    ...
</nav>

Notes

  • Style the ol instead of the wrapping .steps for inline block structuring.
Top

ARIA

The navigation role and the appropriate aria-* attributes are required when supporting ARIA.

<nav class="steps" role="navigation" aria-label="Stepped Navigation">
    ...
</nav>
Top

Variables

Variable Default Description
$step-class .step CSS class name for the individual step element.
$step-class-wrapper .steps CSS class name for the steps list wrapper.