Basic progress nav
You can use different elements (button, anchor, span, ... ) as the progress nav trigger. To disable an item you can use the modifier .ox-progress-nav__trigger--disabled
, when using buttons be sure to disable them as well.
Example
- Quote details
- Transport details
1
2
3
4
5
6
7
8
9
10
11
<ol class="ox-progress-nav">
<li class="ox-progress-nav__item">
<a href="#" class="ox-progress-nav__trigger">Quote details</a>
</li>
<li class="ox-progress-nav__item" aria-current="page">
<span class="ox-progress-nav__trigger">Transport details</span>
</li>
<li class="ox-progress-nav__item">
<button class="ox-progress-nav__trigger ox-progress-nav__trigger--disabled" disabled>Review & send</button>
</li>
</ol>