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


Progress value is 30%

Steps v2

Multi-step navigation with bar indicator.

Copy: 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