Steps

The steps component is used to indicate the progress of a multi-step procedure and is usually placed at the top of the page. It is most commonly used in multi-page registration forms or product checkouts.

By default, later steps are not allowed to be navigated to; users are only allowed to navigate using the steps component to steps they have already completed, with the exception of the active step - the one currently being edited before being tagged as completed.

A multi-step procedure divided in more than 6 steps might intimidate users, so it is recommended that a single procedure should not be divided in more steps. It is also suggested that step labels are kept short and clear to the user.

The steps component automatically responds to resolution changes, and at extra small resolution tiers, it changes to vertical orientation to properly accommodate its content.

Code output

HTML Markup

Copy<div class="steps">
  <a class="step"> <!--indicates step not yet reached-->
    <span class="step-no"></span>
    <span class="step-desc">Step</span>
  </a>
  <a class="step completed"> <!--indicates step is completed-->
    <span class="step-no"></span>
    <span class="step-desc">Step</span>
  </a>
  <a class="step active"> <!--indicates step is active-->
    <span class="step-no"></span>
    <span class="step-desc">Step</span>
  </a>
  <a class="step completed active"> <!--indicates step has been already completed and is now active-->
    <span class="step-no"></span>
    <span class="step-desc">Step</span>
  </a>
</div>