Skip to content
Home

StepIndicator

Info
Demos
Properties
Events

Import

import { StepIndicator } from '@dnb/eufemia'

Description

The step indicator (progress indicator) is a visual representation of a user's 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 to fulfill the process.

If the user should be able to navigate back and forth, use the mode="loose" property. More about the modes further down.

The current active step is set with the current_step property or within the data with the is_current object property.

NB: Ensure, whenever possible, to bind the current_step to the browsers path location. See the example below or the example on CodeSandbox.

Modes

The mode property is mandatory. It tells the component how it should behave.

Strict mode

Use strict for a chronological step order.

The user can navigate between the visited steps and the current step. The component keeps track of these reached steps.

Loose mode

Use loose if the user should be able to navigate freely between all steps. Also, those which are not visited before.

Static mode

Use static for non-interactive steps.

Modify a step

You can easily modify a step – e.g. should one step not be interactive, you can use the inactive property on that step:

const steps = [
  { title: 'Active' },
  { title: 'Not active', inactive: true },
]

More details about modifying steps in the properties panel.

Redesign in version 10.72.0

The StepIndicator has been majorly redesigned. In general it should still work with the same code. But any customization to the style or selection of elements could cause issues.

  • The sidebar has been removed. The component still exists to avoid breaking changes, but it will just add an invisible div.
  • Removing the sidebar means the list of steps is not visible initially. Since this was always the case on small screens, it hopefully won't cause many issues.
  • The new prop expandedInitially allows you to start with the list of steps visible.
  • Custom rendering of steps using the on_item_render and on_render props will no longer do anything of value, it will be the same as using the item's title prop.
  • The sidebar_id prop no longer adds anything as we no longer have a sidebar. But if you need an id for other purposes, use the id prop.