Vertical 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 - .stepper.stepper-vertical

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

Compressed version - .stepper.stepper-vertical.stepper-vertical-sm

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

With content

You can get 2 types of vertical steppers with content. One type has the stepper outside the panels and other example has the stepper inside the panels. You can find both examples below and also the code snipet in the right section (code section).

Stepper inside the panels - .stepper.stepper-vertical.stepper-content

Stepper outside the panels - .stepper.stepper-vertical.stepper-content.stepper-content-outside

No ellipsis - .stepper.stepper-vertical.no-ellipsis

Here you can find an example of the stepper where the labels will be visible all the time, no ellipsis will appear if the label is too long. We don't recommend you to have more then 2 rows per label.

Transitions - .stepper.stepper-vertical.transition

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.

				
<!-- Vertical stepper - .stepper.stepper-vertical -->
<div class="stepper stepper-vertical">
   <ul>
      <li class="visited">
         <a href="#">
            <span>Visited step but not completed</span>
            <span class="step">Step 1/4</span>
         </a>
      </li>
      <li class="passed">
         <a href="#">
            <span>Visited step and completed</span>
            <span class="step">Step 2/3</span>
         </a>
      </li>
      <li class="active">
         <a href="#">
            <span>Active step</span>
            <span class="step">Step 3/4</span>
         </a>
      </li>
      <li>
         <a href="#">
            <span>Future step</span>
            <span class="step">Step 4/4</span>
         </a>
      </li>
   </ul>
</div>

<!-- Stepper compressed - .stepper.stepper-vertical.stepper-vertical-sm -->
<div class="stepper stepper-vertical stepper-vertical-sm">
   ...
</div>

<!-- With content - stepper inside the panels - .stepper.stepper-vertical.stepper-content -->
<div class="stepper stepper-vertical stepper-content transition">
   <ul>
      <li class="visited">
         <a href="#">
            <span>Visited step but not completed</span>
            <span class="step">Step 1/4</span>
         </a>
         <div class="panel">
            <div class="panel-heading">
               <h3 href="panel-title">Title here</h3>
            </div>
            <div class="panel-body">
               Lorem ipsum...
            </div>
         </div>
      </li>
      <li class="passed">
         <a href="#">
            <span>Visited step and completed</span>
            <span class="step">Step 2/4</span>
         </a>
         <div class="panel">
            <div class="panel-heading">
               <h3 href="panel-title">Title here</h3>
            </div>
            <div class="panel-body">
               Lorem ipsum...
            </div>
         </div>
      </li>
      <li class="active">
         <a href="#">
            <span>Active step</span>
            <span class="step">Step 3/4</span>
         </a>
         <div class="panel">
            <div class="panel-heading">
               <h3 href="panel-title">Title here</h3>
            </div>
            <div class="panel-body">
               Lorem ipsum...
            </div>
         </div>
      </li>
      <li>
         <a href="#">
            <span>Future step</span>
            <span class="step">Step 4/4</span>
         </a>
         <div class="panel">
            <div class="panel-heading">
               <h3 href="panel-title">Title here</h3>
            </div>
            <div class="panel-body">
               Lorem ipsum...
            </div>
         </div>
      </li>
   </ul>
</div>

<!-- Stepper outside the panels  - .stepper.stepper-vertical.stepper-content.stepper-content-outside -->
<div class="stepper stepper-vertical stepper-content stepper-content-outside">
   ...
</div>

<!-- Stepper with no ellipsis on labels  - .stepper.stepper-vertical.no-ellipsis -->
<div class="stepper stepper-vertical no-ellipsis">
   ...
</div>

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