Stepbar
Step process bar used for multiple steps forms process
Default stepbar
Declare a .o-stepbar nav tag contaning the stepbar. Within a <ol>ordered list delcare .stepbar-item elements up to 5. Fill the .step-numberand .step-title accordingly.
Be careful to choose short labels when using 5 steps process, otherwise label will be cut to preserve inline layout. More information can be carried on the titleattributle of the <a>link.
Fill a correct description on each .stepbar-link title attributes.
Use .done and .current classes in correct order. There is only one .current item.
Accessibility
In addition to this .current class, you must use aria-current="step" state to represent the current step within the process. This is to ensure a better accessibility to assistive technologies (as screenreaders , screen magnifiers…) that can support it by warning the user of the current element position and type, here it’s a step.
<nav class="o-stepbar">
<ol>
<li class="done stepbar-item">
<a class="stepbar-link" href="#" title="Step 1 : Voluptatem">
<span class="step-number">1</span>
<span class="step-title">Voluptatem</span>
</a>
</li>
<li class="stepbar-item current">
<a class="stepbar-link" href="#" title="Step 2 : Aperiam" aria-current="step">
<span class="step-number">2</span>
<span class="step-title">Aperiam</span>
</a>
</li>
<li class="stepbar-item next">
<a class="stepbar-link" href="#" title="Step 3 : Accusantinum">
<span class="step-number">3</span>
<span class="step-title">Accusantinum</span>
</a>
</li>
<li class="stepbar-item next">
<a class="stepbar-link" href="#" title="Step 4 : Ipsam">
<span class="step-number">4</span>
<span class="step-title">Ipsam</span>
</a>
</li>
<li class="stepbar-item next">
<a class="stepbar-link" href="#" title="Step 5 : Aspernatur">
<span class="step-number">5</span>
<span class="step-title">Aspernatur</span>
</a>
</li>
</ol>
</nav>Mobile stepbar
For mobile view, two classes depending on what you wish to display.
with numbers
Use .xs-numbers class to display step numbers and current step label. You can have up to 4 steps. Further steps will collapse onto new line.
<nav class="o-stepbar xs-numbers">
<ol>
<li class="current stepbar-item">
<a class="stepbar-link" href="#" title="Step 1 : Sign in" aria-current="step">
<span class="step-number">1</span>
<span class="step-title">Sign in</span>
</a>
</li>
<li class="stepbar-item next">
<div class="stepbar-link" title="Step 2 : Review">
<span class="step-number">2</span>
<span class="step-title">Review</span>
</div>
</li>
<li class="stepbar-item next">
<div class="stepbar-link" title="Step 3 : Delivery">
<span class="step-number">3</span>
<span class="step-title">Delivery</span>
</div>
</li>
<li class="stepbar-item next">
<div class="stepbar-link" title="Step 4 : Payment">
<span class="step-number">4</span>
<span class="step-title">Payment</span>
</div>
</li>
</ol>
</nav>with labels
Use .xs-labels class to display step labels without number. You can have up to 3 steps. Further steps will collapse onto new line.
<nav class="o-stepbar xs-labels">
<ol>
<li class="current stepbar-item">
<a class="stepbar-link" href="#" title="Step 1 : Sign in" aria-current="step">
<span class="step-number">1</span>
<span class="step-title">Sign in</span>
</a>
</li>
<li class="stepbar-item next">
<div class="stepbar-link" title="Step 2 : Review">
<span class="step-number">2</span>
<span class="step-title">Review</span>
</div>
</li>
<li class="stepbar-item next">
<div class="stepbar-link" title="Step 3 : Delivery">
<span class="step-number">3</span>
<span class="step-title">Delivery</span>
</div>
</li>
</ol>
</nav>