tabler/docs/components/breadcrumb.mdx

---
title: Breadcrumb
description: Breadcrumbs are used to show the current website or app location and reduce the number of actions users have to take. Thanks to breadcrumbs, they can easily navigate within the website hierarchy and better understand its structure.
bootstrapLink: components/breadcrumb/
---

## Default markup

Add the `:before` pseudo-element in `li` tags to use the default separators. The `active` modifier in a `li` tag will help you indicate the current page location and facilitate navigation within your website or app.

```html code example centered
<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>
```

## Breadcrumb variations

If you wish to use different separators, modify the `$breadcrumb-variants` variable in the Tabler config. Depending on the aesthetics of your design, you can choose dots, bullets or arrows.

```html code example centered
<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>
```

```html code example centered
<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>
```

```html code example centered
<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>
```

## Breadcrumb in headers

If you wish to use breadcrumbs in headers, place them above the headers.

```html example vertical centered columns={3}
<div class="page-header">
  <div class="row align-items-center mw-100">
    <div class="col">
      <div class="mb-1">
        <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="#">Articles</a></li>
        </ol>
      </div>
      <h2 class="page-title">
        <span class="text-truncate">Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods.</span>
      </h2>
    </div>
    <div class="col-auto">
      <div class="btn-list">
        <a href="#" class="btn d-none d-md-inline-flex"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <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.415z" />
            <path d="M16 5l3 3" />
          </svg> Edit</a>
        <a href="#" class="btn btn-primary">Publish</a>
      </div>
    </div>
  </div>
</div>
```

```html
<div class="page-header">
  <div class="row align-items-center mw-100">
    <div class="col">
      <div class="mb-1">
        <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="#">Articles</a></li>
        </ol>
      </div>
      <h2 class="page-title">
        <span class="text-truncate">Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods.</span>
      </h2>
    </div>
    <div class="col-auto">
      <div class="btn-list">
        <a href="#" class="btn d-none d-md-inline-flex">
          <!-- SVG icon from http://tabler-icons.io/i/edit -->
          <svg>...</svg> Edit
        </a>
        <a href="#" class="btn btn-primary">Publish</a>
      </div>
    </div>
  </div>
</div>
```