Steps

Steps show progress through a sequence. It is an ordered list with the current step marked.

<ol class="steps">
  <li>Cart</li>
  <li aria-current="step">Details</li>
  <li>Pay</li>
</ol>
A three-step flow, on step two

A stepper

Each <li> is a step, numbered in order and joined by a line.

  1. Cart
  2. Details
  3. Pay
<ol class="steps">
  <li>Cart</li>
  <li>Details</li>
  <li>Pay</li>
</ol>
Three steps in order

The current step

Mark where you are with aria-current="step".

  1. Cart
  2. Details
  3. Pay
<ol class="steps">
  <li>Cart</li>
  <li aria-current="step">Details</li>
  <li>Pay</li>
</ol>
The second step is current