Home Explore Help
Sign In
html-themes
/
tabler.tabler
mirror of https://github.com/tabler/tabler.git
2
0
Fork 0
Files Issues 0 Wiki
Branch: dev
Branches Tags
tabler.tabler
/
docs
/
content
/
ui
/
components
/
steps.md

steps.md 4.8 KB
Permalink History Raw

title: Steps summary: 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. new: true

description: Simplify complex processes with steps.

Default markup

Steps provide a clear visual representation of a user’s progress through a multi-step process. By showing what has been completed and what remains, steps enhance usability and encourage task completion.

To create a default progress tracker, use the .steps class and define each step as a .step-item. The active step clearly indicates the current position in the process.

<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>
</div>

The example below demonstrates a simple progress tracker with four steps, where the third step is active.

{% capture html -%}

Step 1 Step 2 Step 3 Step 4
{%- endcapture %} {% include "docs/example.html" html=html %}

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.

To add a tooltip, use the data-bs-toggle="tooltip" attribute and specify the tooltip content with the title attribute.

<a
  href="#"
  class="step-item"
  data-bs-toggle="tooltip"
  data-bs-placement="top"
  title="Step 1 description"
>
  Step 1
</a>

The example below demonstrates a progress tracker with tooltips for each step.

{% capture html -%}

<a
href="#"
class="step-item"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Step 1 description"

Step 1

<a
href="#"
class="step-item"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Step 2 description"

Step 2

<a

href="#"
class="step-item active"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Step 3 description"

Step 3

<span

href="#"
class="step-item"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Step 4 description"

Step 4

{%- endcapture %} {% include "docs/example.html" html=html %}

Color

You can customize the default progress indicator by changing the color to one that better suits your design. See the full list of available colors for more details.

<div class="steps steps-green">...</div>

The example below demonstrates a progress tracker with two different color schemes.

{% capture html -%}

Step 1 Step 2 Step 3 Step 4
Step 1 Step 2 Step 3 Step 4
{%- endcapture %} {% include "docs/example.html" html=html %}

Steps without title

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

{% capture html -%}

<a
href="#"
class="step-item"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Step 1 description"

<a
href="#"
class="step-item"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Step 2 description"

<a

href="#"
class="step-item active"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Step 3 description"

<span

href="#"
class="step-item"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Step 4 description"

{%- endcapture %} {% include "docs/example.html" html=html %}

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">...</div>

The example below demonstrates a progress tracker with numbers and a different color scheme.

{% capture html -%}

{%- endcapture %} {% include "docs/example.html" html=html %}