Steps

Documentation and examples for showing step indicator or navigation used to indicate completion status of an activity.

Basic Example

The base step component is built with flexbox of lines to display a paragraph like content.

<ul class="steps">
  <li class="step-item">
    <a href="" class="step-link">
      <span class="step-number">1</span>
      <span class="step-title">Personal Information</span>
    </a>
  </li>
  <li class="step-item">
    <a href="" class="step-link">
      <span class="step-number">2</span>
      <span class="step-title">Account Information</span>
    </a>
  </li>
  <li class="step-item">
    <a href="" class="step-link">
      <span class="step-number">3</span>
      <span class="step-title">Payment Information</span>
    </a>
  </li>
</ul>

Active State

An active state indicator which is the current step currently in progress of a wizard.

<li class="step-item active">
  <a href="" class="step-link">
    <span class="step-number">1</span>
    <span class="step-title">Personal Information</span>
  </a>
</li>

Disabled State

A disabled state are those steps which cannot be accessed while the current step is not yet completed.

<li class="step-item disabled">
  <a href="" class="step-link">
    <span class="step-number">1</span>
    <span class="step-title">Personal Information</span>
  </a>
</li>

Complete State

A complete state indicator are those steps that are already completed.

<li class="step-item complete">
  <a href="" class="step-link">
    <span class="step-number">1</span>
    <span class="step-title">Personal Information</span>
  </a>
</li>

Smaller Indicator

A step indicator with smaller title perfect for using inside a smaller element like cards and widgets.

<ul class="steps steps-sm">...</ul>

Large Indicator

A step indicator with bigger title perfect to use in a full page layout.

<ul class="steps steps-lg">
  <li class="step-item">
    <a href="#" class="step-link">
      <span class="step-number">1</span>
      <span class="step-title">
        <span>Personal</span>
        <span>Information</span>
      </span>
    </a>
  </li>
  ...
</ul>

Justified

A step indicator that expand the width to fill all available space of a parent element having equal width in every step item.

<ul class="steps steps-lg steps-justified">...</ul>

Tab Variation

A step indicator that uses tab style variation and also expand the width to fill all available space of a parent element having equal width in every step item.

<ul class="steps steps-tab">...</ul>

Using Icon

A step indicator that uses icon instead of a step number indicator.

<li class="step-item">
  <a href="" class="step-link">
    <span class="step-icon"><i data-feather="credit-card"></i></span>
    <span class="step-title">Personal Information</span>
  </a>
</li>

With Desription

A step indicator with some brief description to every steps.

Vertical

A step indicator that align vertically perfect for larger list of steps.

<ul class="steps steps-vertical">...</ul>

Sub Steps

A step indicator that have a sub step inside of a parent step element. Applicable only when steps are set to vertical

<li class="step-item">
  <a href="" class="step-link">
    <span class="step-number">1</span>
    <span class="step-title">Personal Information</span>
  </a>
  <ul>
    <li class="complete"><a href="">Contact Details</a></li>
    <li class="active"><a href="">Job Experience</a></li>
    <li class="disabled"><a href="">Educational Background</a></li>
  </ul>
</li>

Components