Skip to main content
codeFork me on GitHub favoriteMade by Daemon & djibe

Steppers

Steppers convey progress through numbered steps.

Steppers are no longer cited in Material guidelines. The link refers to the archived version of Material design.

Material Design: Steppers

Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation.

Horizontal steppers

Horizontal steppers are ideal when the contents of one step depend on an earlier step.

check
Name of step 1
2
Name of step 2
3
Name of step 3 
<div class="stepper-horiz">
  <div class="stepper done">
    <div class="stepper-icon">
      <i class="material-icons">check</i>
    </div>
    <span class="stepper-text">Name of step 1</span>
  </div>
  <div class="stepper active">
    <div class="stepper-icon">
      <span>2</span>
    </div>
    <span class="stepper-text">Name of step 2</span>
  </div>
  <div class="stepper">
    <div class="stepper-icon">
      <span>3</span>
    </div>
    <span class="stepper-text">Name of step 3</span>
  </div>
</div>

Vertical steppers

Vertical steppers are designed for narrow screen sizes. They are ideal for mobile.

check
Name of step 1
edit
Name of step 2
shopping_cart
Name of step 3 
<div class="stepper-vert">
  <div class="stepper done">
    <div class="stepper-icon">
      <i class="material-icons">check</i>
    </div>
    <span class="stepper-text">Name of step 1</span>
  </div>
  <div class="stepper active">
    <div class="stepper-icon">
      <span class="material-icons">edit</span>
    </div>
    <span class="stepper-text">Name of step 2</span>
  </div>
  <div class="stepper">
    <div class="stepper-icon">
      <span class="material-icons">shopping_cart</span>
    </div>
    <span class="stepper-text">Name of step 3</span>
  </div>
</div>