View on GitHub
Step navigation
Provide visual feedback on the users' position in a multiple step action.
Example
<div class="step-navigation step-navigation-primary my-3">
<div class="step-navigation-item active">
<span class="step-navigation-step mr-2">1.</span>
<span class="step-navigation-label d-none d-lg-inline-block">Product kiezen</span>
<span class="step-navigation-label d-md-inline-block d-lg-none">Product</span>
</div>
<div class="step-navigation-item">
<span class="step-navigation-step mr-2">2.</span>
<span class="step-navigation-label d-none d-lg-inline-block">Afspraak plannen</span>
<span class="step-navigation-label d-md-inline-block d-lg-none">Plannen</span>
</div>
<div class="step-navigation-item">
<span class="step-navigation-step mr-2">3.</span>
<span class="step-navigation-label d-none d-lg-inline-block">Bestelling controleren</span>
<span class="step-navigation-label d-md-inline-block d-lg-none">Controleren</span>
</div>
<div class="step-navigation-item">
<span class="step-navigation-step mr-2">4.</span>
<span class="step-navigation-label d-none d-lg-inline-block">Betalen</span>
<span class="step-navigation-label d-md-inline-block d-lg-none">Betalen</span>
</div>
</div>Steps
<div class="step-navigation step-navigation-primary my-3">
<div class="step-navigation-item active">
<span class="step-navigation-step mr-2">1.</span>
...
</div>
<div class="step-navigation-item">
<span class="step-navigation-step mr-2">2.</span>
...
</div>
<div class="step-navigation-item">
<span class="step-navigation-step mr-2">3.</span>
...
</div>
<div class="step-navigation-item">
<span class="step-navigation-step mr-2">4.</span>
...
</div>
</div>
<div class="step-navigation step-navigation-primary my-3">
<div class="step-navigation-item visited">
<span class="step-navigation-step mr-2">1.</span>
...
</div>
<div class="step-navigation-item active">
<span class="step-navigation-step mr-2">2.</span>
...
</div>
<div class="step-navigation-item">
<span class="step-navigation-step mr-2">3.</span>
...
</div>
<div class="step-navigation-item">
<span class="step-navigation-step mr-2">4.</span>
...
</div>
</div>
<div class="step-navigation step-navigation-primary my-3">
<div class="step-navigation-item visited">
<span class="step-navigation-step mr-2">1.</span>
...
</div>
<div class="step-navigation-item visited">
<span class="step-navigation-step mr-2">2.</span>
...
</div>
<div class="step-navigation-item active">
<span class="step-navigation-step mr-2">3.</span>
...
</div>
<div class="step-navigation-item">
<span class="step-navigation-step mr-2">4.</span>
...
</div>
</div>
<div class="step-navigation step-navigation-primary my-3">
<div class="step-navigation-item visited">
<span class="step-navigation-step mr-2">1.</span>
...
</div>
<div class="step-navigation-item visited">
<span class="step-navigation-step mr-2">2.</span>
...
</div>
<div class="step-navigation-item visited">
<span class="step-navigation-step mr-2">3.</span>
...
</div>
<div class="step-navigation-item active">
<span class="step-navigation-step mr-2">4.</span>
...
</div>
</div>Number of steps
The number of steps can be adjusted. For example, here are two step-navigation components with a different number of items. The maximum number of items is 6.
<div class="step-navigation step-navigation-primary my-3">
<div class="step-navigation-item">
<span class="step-navigation-step mr-2">1.</span>
...
</div>
<div class="step-navigation-item">
<span class="step-navigation-step mr-2">2.</span>
...
</div>
</div>
<div class="step-navigation step-navigation-primary my-3">
<div class="step-navigation-item">
<span class="step-navigation-step mr-2">1.</span>
...
</div>
<div class="step-navigation-item">
<span class="step-navigation-step mr-2">2.</span>
...
</div>
<div class="step-navigation-item">
<span class="step-navigation-step mr-2">3.</span>
...
</div>
<div class="step-navigation-item">
<span class="step-navigation-step mr-2">4.</span>
...
</div>
<div class="step-navigation-item">
<span class="step-navigation-step mr-2">5.</span>
...
</div>
</div>Colors
This component is available in the pimary, secondary and variable colors of the Liander theme.
<div class="step-navigation step-navigation-primary my-3">
<div class="step-navigation-item visited">
<span class="step-navigation-step mr-2">1.</span>
...
</div>
<div class="step-navigation-item active">
<span class="step-navigation-step mr-2">2.</span>
...
</div>
<div class="step-navigation-item">
<span class="step-navigation-step mr-2">3.</span>
...
</div>
</div>
<div class="step-navigation step-navigation-secondary my-3">
<div class="step-navigation-item visited">
<span class="step-navigation-step mr-2">1.</span>
...
</div>
<div class="step-navigation-item active">
<span class="step-navigation-step mr-2">2.</span>
...
</div>
<div class="step-navigation-item">
<span class="step-navigation-step mr-2">3.</span>
...
</div>
</div>
<div class="step-navigation step-navigation-tertiary my-3">
<div class="step-navigation-item visited">
<span class="step-navigation-step mr-2">1.</span>
...
</div>
<div class="step-navigation-item active">
<span class="step-navigation-step mr-2">2.</span>
...
</div>
<div class="step-navigation-item">
<span class="step-navigation-step mr-2">3.</span>
...
</div>
</div>
<div class="step-navigation step-navigation-success my-3">
<div class="step-navigation-item visited">
<span class="step-navigation-step mr-2">1.</span>
...
</div>
<div class="step-navigation-item active">
<span class="step-navigation-step mr-2">2.</span>
...
</div>
<div class="step-navigation-item">
<span class="step-navigation-step mr-2">3.</span>
...
</div>
</div>
<div class="step-navigation step-navigation-warning my-3">
<div class="step-navigation-item visited">
<span class="step-navigation-step mr-2">1.</span>
...
</div>
<div class="step-navigation-item active">
<span class="step-navigation-step mr-2">2.</span>
...
</div>
<div class="step-navigation-item">
<span class="step-navigation-step mr-2">3.</span>
...
</div>
</div>