Displays the user's current location within a linear task flow, such as a wizard.
Requires a minimum of 2 and a maximum of 6 steps.
If there are more than 6 steps, the horizontal track is replaced with the dropdown component at all breakpoints (see below).
If a step has been visited and the user may return to it (i.e. it's not the current step) then its label and segment are hyperlink blue so users can click on one of them to revisit the prior step.
If a step has been visited and the user may not return to it (i.e. it's completed and readback only) then its label and segment are black/gray so users understand they are not clickable.
Used when there are more than 6 steps in the user's task flow. Webflow doesn't permit the styling of options within a select component, so this was built using a dropdown.
As of this writing, this variation is optional and is approved for use in the consumer segment only.
The bar for a visited step is always blue, to help distinguish it from steps that have not been visited.
If a step has not been visited then both its bar and label are disabled gray.
On smaller breakpoints, the dropdown progress tracker is used in tandem with the horizontal track (appears beneath it) because the latter is not clickable.