Skip to content



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.

In this example we've sent the component an array of objects to simulate a scenario in a web application.

Previously visited pages will be clickable anchor links and unvisited/unlocked items are simply unclickable spans. active_item selects the active step.


StepIndicator with navigation. Every visited step can be clicked.

StepIndicator with urls, for visited steps only

Default StepIndicator with no navigation

Default StepIndicator with strings only

StepIndicator with custom renderer.