Step indicators

Step indicators are used to represent an ordered, sequential process. They can be used as navigation, or just as a visual indicator for where a user is within a process.

Horizontal

  1. Applicant information
  2. Mark information
  3. Goods and services 
<ol class="nav-steps">
    <li  style="width:33.3%">
        <span>Applicant information</span>
    </li>
    <li class="active" style="width:33.3%">
        <span>Mark information</span>
    </li>
    <li class="" style="width:33.3%">
        <span>Goods and services</span>
    </li>
</ol>

Vertical

The veritcal style is useful for navigation or for “scroll spy” behavior.

  1. Applicant information
  2. Mark information
  3. Goods and services 
<ol class="nav-steps">
    <li  style="width:33.3%">
        <span>Applicant information</span>
    </li>
    <li class="active" style="width:33.3%">
        <span>Mark information</span>
    </li>
    <li class="" style="width:33.3%">
        <span>Goods and services</span>
    </li>
</ol>

Dots

The dot step indicator is useful for very simple processes, like a tour.

  1. Step 1
  2. Step 2
  3. Step 3 
<ol class="nav-dots">
    <li>
        <a href="">Step 1</a>
    </li>
    <li class="active">
        <a href="">Step 2</a>
    </li>
    <li>
        <a href="">Step 3</a>
    </li>
</ol>