🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%

Steps v2

Multi-step navigation with bar indicator.

View Demo


All components are based on CodyFrame.

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.

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

<div class="steps-v2" style="--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>


✅ Project duplicated

✅ Project created

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