Steps Bar Stable Dark theme

The Steps Bar provides progress overview to the user in interactive multi-stage processes. It motivates the user to complete the process.

Usage Code

General guidance

With a Steps Bar you can split up complex linear processes in clear steps. It is aligned horizontally and is normally shown above the information and tasks the user has to focus on. The steps can optionally be supported by a short label text, which can consist of two hierarchies.

Steps Bar with applied light and dark theming

For a simple indication of the progress of non-interactive processes it is better to use the Progress component. For a simple navigation approach inside the content maybe Tabs, In-Page Navigation or Breadcrumb are working better.

Dos and don’ts

Do use a small number of steps, as this really motivates the user to complete the process.
Do use short label text for the steps. Otherwise, the text will be wrapped into many lines if the space is limited.