Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Default markup

The dividers are automatically created in the content of the :before pseudo-element of li tags. You can inform the current page using the active modifier in a li tag. It will disable the navigation of inner links.

<ol class="breadcrumb" aria-label="breadcrumbs">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Library</a></li>
  <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
</ol>

You can add more variations by modify $breadcrumb-variants variable in Tabler config.

<ol class="breadcrumb breadcrumb-dots" aria-label="breadcrumbs">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Library</a></li>
  <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
</ol>
<ol class="breadcrumb breadcrumb-arrows" aria-label="breadcrumbs">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Library</a></li>
  <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
</ol>
<ol class="breadcrumb breadcrumb-bullets" aria-label="breadcrumbs">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Library</a></li>
  <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
</ol>

Alternate version

<ol class="breadcrumb breadcrumb-alternate" aria-label="breadcrumbs">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Library</a></li>
  <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
</ol>