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.

Horizontal style (Default)

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

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

Vertical style

Follow the code from the right panel to get the styles for the horizontal stepper. Comparing with the default stepper (horizontal), you need to add an additional class to have the vericat syle applied .stepper-vertical

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>


<!-- Vertical - .stepper.stepper-vertical -->
<div class="stepper stepper-vertical">
   ...
</div>


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