--- title: Step summary: A step is used to guide users through a complex process and make it easier to complete. Breaking a multi-step process into smaller parts and tracking progress along the way helps users finish it successfully. description: Guide users through multi-step processes with a steps indicator. Show completed, active, and upcoming steps in a clear layout. related: [/ui/components/progress-step] source: core/scss/ui/_steps.scss classnames: component: - class: steps desc: Container element part: - class: step-item desc: One step; mark the current one with aria-current="step" modifier: - class: steps-counter desc: Numbers the steps direction: - class: steps-vertical desc: Stacks the steps in a column color: - class: steps-{color} desc: Any base color for the completed steps; -lt variants use the soft tint --- import Example from '@components/Example.astro'; import CodeDocs from '@components/CodeDocs.astro'; ## Default markup Steps provide a clear visual representation of a user’s progress through a multi-step process. By showing what has been completed and what remains, steps enhance usability and encourage task completion. To create a default progress tracker, use the `.steps` class and define each step as a `.step-item`. The active step clearly indicates the current position in the process. ```html
Step 1 Step 2 Step 3
``` The example below demonstrates a simple progress tracker with four steps, where the third step is active.
Step 1 Step 2 Step 3 Step 4
## Tooltips Add [tooltips](/ui/components/tooltip) if you want to provide users with additional information about the steps they are expected to complete. Tooltips are displayed when a user hovers over a given step and help clarify what might not be clear from the interface. To add a tooltip, use the `data-bs-toggle="tooltip"` attribute and specify the tooltip content with the `title` attribute. ```html Step 1 ``` The example below demonstrates a progress tracker with tooltips for each step.
Step 1 Step 2 Step 3 Step 4
## Color You can customize the default progress indicator by changing the color to one that better suits your design. See the [full list of available colors](/ui/base/colors) for more details. ```html
...
``` The example below demonstrates a progress tracker with two different color schemes.
Step 1 Step 2 Step 3 Step 4
Step 1 Step 2 Step 3 Step 4
## Steps without title For designs with limited space, use progress indicators without titles and add tooltips to provide the necessary details.
## Steps with numbers Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the color to customize it. ```html
...
``` The example below demonstrates a progress tracker with numbers and a different color scheme.
## Accessibility - Use an ordered list for the steps. The numbering is meaning, not decoration, so let the markup carry it. - Mark the current step with `aria-current="step"`. The `active` class only changes the colours. - A completed step and a pending one must differ in more than colour - a checkmark, a label, or the word "done". - If a step is a link, keep it a real link; if it cannot be reached yet, use `aria-disabled="true"` and take it out of the tab order. ## SCSS variables Use these SCSS variables to customize steps. The default values are: