StepBar

Introduction

StepBar provides a visual representation of a multi-step process, displaying each step as a numbered item with contextual labels. It helps users understand where they are in the flow and how many steps remain. The stepbar is commonly used in forms or multi-page workflows to indicate progression between steps and to communicate the purpose of each stage. Menu is an alternative component to stepbar.

Variants

• Default: The default stepbar uses a boxed layout with an arrow-shaped edge on the right side of each step to indicate progression to the next step. The active step is highlighted using the color theme to clearly show the current position.

• Circle: An alternative Stepbar layout featuring a horizontal line with evenly spaced circles. Each circle represents a step in the process, with the active step visually distinguished to indicate the current stage in the flow.

Interactive demo

Try the interactive demo below to explore the stepbar component.

Best practices

• Placement: Position the Stepbar at the top of the content area to give users a immediate overview of their progress.
• Interaction: Users should be able to navigate back to previous steps to review or edit information. However, navigation to the next step should be disabled until the current step is fully completed and validated.
• Navigation: Even when a Stepbar is present, a BottomBar should also be used to guide users through the process using clear primary and secondary actions. For more details, see the BottomBar documentation. You can also see StepBar and BottomBar in action: Frank fills out a form.