Skip to content

StepIndicator

Description

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. activeItem is the active indicator.

Demos

  • 3. Oppsummering

StepIndicator with navigation. Every visited step can be clicked.

StepIndicator with urls, for visited steps only

  • 1. Om din nye bolig
  • 2. Ditt lån og egenkapital
  • 3. Oppsummering

Default StepIndicator with no navigation

  • 3. Oppsummering

StepIndicator with custom renderer.