Tabler

Source code Sponsor
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
Paweł Kuna
UI Designer
Set status Profile & account Feedback
Settings Logout

Documentation

Steps

Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.

Default markup

Steps show users where they are within a process, what steps they have already completed and what they are expected to complete. Making multi-step processes more user-friendly facilitates users’ interaction with your interface.

Use the steps class to create the default progress tracker and name the steps accordingly.

Step 1 Step 2 Step 3 Step 4 
<div class="steps">
  <a href="#" class="step-item">
    Step 1
  </a>
  <a href="#" class="step-item">
    Step 2
  </a>
  <a href="#" class="step-item active">
    Step 3
  </a>
  <span href="#" class="step-item">
    Step 4
  </span>
</div>

Tooltips

Add tooltips, if you want to provide users with additional information about the steps they are expected to complete. Tooltips are displayed when a user hovers over a given step and help clarify what might not be clear from the interface.

Step 1 Step 2 Step 3 Step 4 
<div class="steps">
  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 1 description">
    Step 1
  </a>
  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 2 description">
    Step 2
  </a>
  <a href="#" class="step-item active" data-bs-toggle="tooltip" title="Step 3 description">
    Step 3
  </a>
  <span href="#" class="step-item" data-bs-toggle="tooltip" title="Step 4 description">
    Step 4
  </span>
</div>

Color

You can customize the default progress indicator by changing the color to one that better suits your design. Click here to see the range of available colors.

Step 1 Step 2 Step 3 Step 4
Step 1 Step 2 Step 3 Step 4 
<div class="steps steps-green">
  <a href="#" class="step-item">
    Step 1
  </a>
  <a href="#" class="step-item">
    Step 2
  </a>
  <a href="#" class="step-item active">
    Step 3
  </a>
  <span href="#" class="step-item">
    Step 4
  </span>
</div>
<div class="steps steps-red">
  <a href="#" class="step-item">
    Step 1
  </a>
  <a href="#" class="step-item">
    Step 2
  </a>
  <a href="#" class="step-item active">
    Step 3
  </a>
  <span href="#" class="step-item">
    Step 4
  </span>
</div>

Steps without title

For designs with limited space, use progress indicators without titles and add tooltips to provide the necessary details.

<div class="steps">
  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 1 description"></a>
  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 2 description"></a>
  <a href="#" class="step-item active" data-bs-toggle="tooltip" title="Step 3 description"></a>
  <span href="#" class="step-item" data-bs-toggle="tooltip" title="Step 4 description"></span>
</div>

Steps with numbers

Use the steps-counter class to create a progress tracker with numbers instead of titles and change the color to customize it.

<div class="steps steps-counter steps-lime">
  <a href="#" class="step-item"></a>
  <a href="#" class="step-item active"></a>
  <span href="#" class="step-item"></span>
  <span href="#" class="step-item"></span>
  <span href="#" class="step-item"></span>
</div>