Horizontal stepper

A stepper/wizard leads a user through a process step by step. It contains a series of single-step instructions, and is often used for a setup and configuration tasks or a longer workflow. Read more about steppers/wizards in the UX Guidelines.
Also you can check out the wizards.

Use when

The user needs guidance through a multi-step process, for instance if it's a low frequency task or the steps to take are unclear
Steps have to be done in a specific order
The task has a clear start and end

Design

There are 2 options for the stepper: horizontal and vertical, on 2 sizes.

Follow the code from the right panel to get the styles for the horizontal stepper, regular size.

Demo page! Here you can find a demo page where you can test the horizontal stepper.

Compressed version

Here you can find an example of the compressed version for the horizontal stepper:

Transitions

If you'd like a smooth animation to be applyed on each step as you go through them just add .transition class in the parent div.

				
<!-- Horizontal stepper (default) - .stepper -->
<div class="stepper">
   <ul>
      <li class="passed">
         <a href="#">
            <span>Review payslips</span>
            <span class="step">Step 1/3</span>
         </a>
      </li>
      <li class="active">
         <a href="#">
            <span>Wage run</span>
            <span class="step">Step 2/3</span>
         </a>
      </li>
      <li>
         <a href="#">
            <span>Payout completed</span>
            <span class="step">Step 3/3</span>
         </a>
      </li>
   </ul>
</div>

<!-- Stepper with animation - .stepper.transition -->
<div class="stepper transition">
   ...
</div>