Breadcrumb

A breadcrumb shows where the current page sits in the site hierarchy and links to the levels above it.

Default markup

Add the breadcrumb class to the list and breadcrumb-item to each item. Mark the current page with the active class on its li.

<!-- BEGIN BREADCRUMB -->
<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <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">Data</li>
  </ol>
</nav>
<!-- END BREADCRUMB -->

Different separators

The separator is drawn in CSS and is a slash by default. breadcrumb-dots, breadcrumb-arrows and breadcrumb-bullets change it.

<!-- BEGIN BREADCRUMB -->
<nav aria-label="Breadcrumb">
  <ol class="breadcrumb breadcrumb-dots">
    <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">Data</li>
  </ol>
</nav>
<!-- END BREADCRUMB -->
<!-- BEGIN BREADCRUMB -->
<nav aria-label="Breadcrumb">
  <ol class="breadcrumb breadcrumb-arrows">
    <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">Data</li>
  </ol>
</nav>
<!-- END BREADCRUMB -->
<!-- BEGIN BREADCRUMB -->
<nav aria-label="Breadcrumb">
  <ol class="breadcrumb breadcrumb-bullets">
    <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">Data</li>
  </ol>
</nav>
<!-- END BREADCRUMB -->

With icon

An item can hold an icon next to or instead of the text.

<!-- BEGIN BREADCRUMB -->
<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#" aria-label="Home">
        <!-- Download SVG icon from http://tabler.io/icons/icon/home -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
          <path d="M5 12l-2 0l9 -9l9 9l-2 0" />
          <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
          <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
        </svg>
      </a>
    </li>
    <li class="breadcrumb-item">
      <a href="#">Library</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>
<!-- END BREADCRUMB -->

Muted breadcrumbs

The breadcrumb-muted class renders the trail in the secondary text color, so it takes less attention than the page title next to it.

<!-- BEGIN BREADCRUMB -->
<nav aria-label="Breadcrumb">
  <ol class="breadcrumb breadcrumb-muted">
    <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">Data</li>
  </ol>
</nav>
<!-- END BREADCRUMB -->

A breadcrumb usually sits in the page header, above the title:

<div class="page-header">
  <div class="row align-items-center mw-100">
    <div class="col">
      <!-- BEGIN BREADCRUMB -->
      <nav aria-label="Breadcrumb">
        <ol class="breadcrumb">
          <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">Articles</li>
        </ol>
      </nav>
      <!-- END BREADCRUMB -->
      <h2 class="page-title">
        <span class="text-truncate">How to Build a Modern Dashboard with Tabler</span>
      </h2>
    </div>
    <div class="col-auto">
      <div class="btn-list">
        <a href="#" class="btn d-none d-md-inline-flex">
          <!-- Download SVG icon from http://tabler.io/icons/icon/edit -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
            <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
            <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415" />
            <path d="M16 5l3 3" />
          </svg> Edit
        </a>
        <a href="#" class="btn btn-primary">Publish</a>
      </div>
    </div>
  </div>
</div>

Accessibility

Wrap the list in <nav aria-label="Breadcrumb">. That label is what tells this navigation apart from the others on the page.
Mark the last item with aria-current="page". It is the current page, so it should not be a link.
Keep the separator in CSS, as Tabler does. A separator typed into the markup is read out between every item.
Breadcrumbs show where a page sits, not where the user has been. Keep them the same for everyone who lands on that page.

Class reference

Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.

`breadcrumb`	component	Container element, an ordered list
`breadcrumb-item`	part	One step in the trail
`breadcrumb-arrows`	style	Chevron between the items
`breadcrumb-bullets`	style	Bullet between the items
`breadcrumb-dots`	style	Dot between the items
`breadcrumb-muted`	style	Quieter text color for the whole trail

CSS

Variables

The component uses local CSS variables on .breadcrumb for real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. Source: core/scss/ui/_breadcrumbs.scss.

--breadcrumb-padding-x: #{$breadcrumb-padding-x};
--breadcrumb-padding-y: #{$breadcrumb-padding-y};
--breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
--breadcrumb-font-size: #{$breadcrumb-font-size};
--breadcrumb-bg: #{$breadcrumb-bg};
--breadcrumb-border-radius: #{$breadcrumb-border-radius};
--breadcrumb-divider-color: #{$breadcrumb-divider-color};
--breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
--breadcrumb-item-active-color: #{$breadcrumb-active-color};
--breadcrumb-item-active-font-weight: #{$breadcrumb-active-font-weight};
--breadcrumb-item-disabled-color: #{$breadcrumb-disabled-color};
--breadcrumb-link-color: #{$breadcrumb-link-color};

Sass variables

Override these variables before importing Tabler to change the defaults. Source: core/scss/_variables.scss.

$breadcrumb-font-size: null;
$breadcrumb-padding-y: 0;
$breadcrumb-padding-x: 0;
$breadcrumb-item-padding-x: 0.5rem;
$breadcrumb-margin-bottom: 1rem;
$breadcrumb-bg: null;
$breadcrumb-divider-color: var(--gray-500);
$breadcrumb-active-color: inherit;
$breadcrumb-divider: string.quote('/');
$breadcrumb-border-radius: null;
$breadcrumb-link-color: var(--link-color);
$breadcrumb-active-font-weight: var(--font-weight-semibold);
$breadcrumb-disabled-color: var(--disabled-color);

$breadcrumb-variants: (
  dots: '·',
  arrows: '›',
  bullets: '\02022',
);

Menu

Breadcrumb

Default markup

Different separators

With icon

How to Build a Modern Dashboard with Tabler

Accessibility

Class reference

CSS

Variables

Sass variables

On this page

Menu

Breadcrumb

Default markup

Different separators

With icon

Muted breadcrumbs

Breadcrumb in headers

How to Build a Modern Dashboard with Tabler

Accessibility

Class reference

CSS

Variables

Sass variables

Related

On this page

Get Admin Template, Icons, Illustrations and Emails in one bundle.