Indicate the current step within a sequential navigation.
Declare a list, each item need to contain a first <div>
with class .arrow
and attribute aria-hidden="true"
, next add the correct css classes.
Add the o-wizard-step-bar
class on the ul
element (root of your list). Then, to design steps, add visited
, on
or next
classes if yout want a visited step, the current step or a futur step. These classes are to be added to the list items (li
tag).
The number of steps can be adjusted using the special attribute data-step
(present on the ul
tag of the component). 5 steps max.