Chi · Steps

Steps

Steps are a navigation component that helps the user to know the steps of a process.

Examples

To display steps, apply the class a-steps to a unordered list ul and indicate the active link with the class -active in the corresponding li tag.

Base

Step 1
Step 2
Step 3
Step 4
Step 5

<ul class="a-steps">
  <li>
    <a href="#">Step 1</a>
  </li>
  <li>
    <a href="#">Step 2</a>
  </li>
  <li class="-active">
    <a href="#">Step 3</a>
  </li>
  <li>
    <a href="#">Step 4</a>
  </li>
  <li>
    <a href="#">Step 5</a>
  </li>
</ul>