Steps Bar Stable Updated

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.

Edit Data

Edit patient data

Select Patient

Choose a patient

Choose Exam

Select the exam type before scanning

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.