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

<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>

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.