Go to homepage

Projects /

Steps v2

Multi-step navigation with bar indicator.

View Demo

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>


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.