Stepbar

Indicate the current step within a sequential navigation.

Default stepbar

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.

  • 1
  • 2
  • 3
{% highlight html %} {% endhighlight %}