Steps v2

Multi-step navigation with bar indicator.

How to

The Steps v2 component is used to help the user get oriented in the middle of a multi-stage process. The label indicates the current step and the number of steps. The bar indicator is a visual hint of the progress.

Set the total steps number by updating the --steps-v2-steps-nr custom property.

To update the bar indicator, modify the (inline) value of the --step-v2-current-step custom propery:

<div class="steps-v2" style="--steps-v2-steps-nr: 10; --step-v2-current-step: 5;"> <!-- 👈 -->
  <p class="text-sm color-contrast-medium margin-bottom-xs">Step 5 of 10</p>

  <div class="steps-v2__indicator" aria-hidden="true"></div>
</div>

Categories

• Navigation > Steps

Bug report & feedback

Component Github page ↗