Steppers portray progress through a sequence of steps.

Default Progress Stepper

The default stepper has a horizontal layout. The stepper fills all available space and evenly distributes its steps.

Use the aria-currentattribute to denote the current step in the list. All items after the current will be shown in progress.

The default state for each item will be the complete or active state until it reaches [aria-current] element. Then the rest will be upcoming state. You can also use .progress-stepper__items--upcoming on the progress-stepper__items container to show upcoming state for all items.

The stepper can be sized and aligned using standard CSS:

Vertical Progress Stepper

Use the progress-stepper--vertical modifier for a stepper with vertical layout.