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
  • Personal info
  • Billing info
  • Login info
Step description
  • Personal infoName and address
  • Billing infoCredit card info
  • Login infoUsername and password
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
  • Personal info
  • Billing info
  • Login info
Step description
  • Personal infoName and address
  • Billing infoCredit card info
  • Login infoUsername and password
Numeric
  • Cart
  • 2Checkout
  • 3Delivery
  • 4Confirm
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>
Colors

Try other colors
Sizes