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


Progress value is 30%


A multi-step indicator to navigate through the stages of a process.

View Demo


All components are based on CodyFrame.

How to

Steps are navigation items that help the user to get oriented in the middle of a multi-stage process.

The component includes some handy custom properties (don't forget to update the --steps-number custom property):

:root {
    --steps-number: 4;
    --step-separator-line-stroke: 3px;
    --step-separator-line-gap: 3px;
    --step-circle-size: 32px;
    --step-circle-font-size: 1em;


✅ Project duplicated

✅ Project created

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