Basic
<ul class="nav nav-process nav-process-circle">
<li class="nav-item complete">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item processing">
<a class="nav-link" href="#"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
</ul>Colors
Try other colors
Sizes
Step title
Step description
Basic
<ul class="nav nav-process nav-process-iconic">
<li class="nav-item complete">
<a class="nav-link" href="#"><i class="fa fa-user"></i></a>
</li>
<li class="nav-item processing">
<a class="nav-link" href="#"><i class="fa fa-credit-card"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-key"></i></a>
</li>
</ul>Colors
Try other colors
Sizes
Step title
Step description
Numeric
Basic
<ul class="nav nav-process nav-process-box">
<li class="nav-item complete">
<a class="nav-link" href="#">
<span class="nav-link-number"><i class="ti-check"></i></span>
<span class="nav-title">Confirm Order</span>
</a>
</li>
...
</ul>Colors
Try other colors
Sizes
Best practice
It is recommended to use box process in a separate card, or in card header with a bottom border. Following example demonstrates a box process in a separate card.
Basic
<ul class="nav nav-process nav-process-block">
<li class="nav-item complete">
<a class="nav-link" href="#">
<span class="nav-link-number">1</span>
<div class="nav-link-body">
<span class="nav-title">Personal info</span>
<span>Name and address</span>
</div>
</a>
</li>
...
</ul>