The step indicator (progress indicator) is a visual representation of a users progress through a set of steps or series of actions. Their purpose is to both guide the user through the process and to help them create a mental model of the amount of time and effort that is required of them.

If the user should be able to navigate back and forth, use the enable_navigation property.

The current active step is set with the current_step property.

API changes in next major version 10

The API has been simplified and some properties have to be changes by the next major version release.

The documentation is updated and every property name that will be deprecated is clear marked with a strike-through line. In v9 you will get a console warning during development when you use the outdated properties.


StepIndicator with navigation

Every visited step can be clicked.

StepIndicator customized

Completely customized step indicator.

Step One

Default StepIndicator with no navigation

Default StepIndicator with strings only

StepIndicator with custom renderer.

StepIndicator with urls

NB: The URL support is deprecated. You have to handle this kind of logic internal in your application from v10 of @dnb/eufemia.