Steps Bar Stable
The Steps Bar provides progress overview to the user in interactive multi-stage processes. It motivates the user to complete the process.
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.
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.