## Documentation

Browse source code

##### On this page

- Default markup
- Breadcrumb variations
- Alternate version

## Breadcrumb

Bootstrap documentation

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.

## 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.

    <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.

    <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

Use the `breadcrumb-alternate` class to make the breadcrumb colors more neutral, retaining its function of showing the current location within an interface.

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