Bootstrap Breadcrumb

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

Examples

Custom Bootstrap breadcrumb style examples enhanced by Torus Kit that includes custom dividers, color variations with dark breadcrumb style or custom home icon.

Overview

Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>

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

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

Dividers

Dividers are automatically added in CSS through ::before and content. They can be changed by modifying a local CSS custom property --bs-breadcrumb-divider, or through the $breadcrumb-divider Sass variable — and $breadcrumb-divider-flipped for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>

When modifying via Sass, the quote function is required to generate the quotes around a string. For example, using > as the divider, you can use this:

$breadcrumb-divider: quote(">");

It’s also possible to use an embedded SVG icon. Apply it via our CSS custom property, or use the Sass variable.

<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");

You can also remove the divider setting --bs-breadcrumb-divider: ''; (empty strings in CSS custom properties counts as a value), or setting the Sass variable to $breadcrumb-divider: none;.

<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
$breadcrumb-divider: none;

Dividers styles

There is a couple of predefined style for breadcrumb dividers in Torus Kit. Use any of these to fit into your design by adding .breadcrumb-divider-<style> class.

Chevron divider

Common divider form is a chevron. Add .breadcrumb-dividers-chevron class to .breadcrumb to enable.

<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-dividers-chevron">
<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>
</nav>

Bar divider

To style a breadcrumb with vertical bar, add .breadcrumb-dividers-bar class to .breadcrumb.

<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-dividers-bar border">
<li class="breadcrumb-item"><a href="#" class="py-2 px-1 ms-2">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="py-2 px-1">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#" class="py-2 px-1">Data</a></li>
</ol>
</nav>

Label divider

Label-like style with semi-transparent gradient will fit into any light or dark background. Add .breadcrumb-dividers-label class to .breadcrumb. This style works best with shadows utility.

<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-dividers-label bg-light">
<li class="breadcrumb-item"><a href="#" class="p-2">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="p-2">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#" class="p-2">Data</a></li>
</ol>
</nav>

<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-dividers-label shadow bg-white">
<li class="breadcrumb-item"><a href="#" class="p-2">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="p-2">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#" class="p-2">Data</a></li>
</ol>
</nav>

<nav aria-label="breadcrumb">
<ol class="breadcrumb links-light text-light breadcrumb-dividers-label shadow bg-primary">
<li class="breadcrumb-item"><a href="#" class="p-2">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="p-2">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#" class="p-2">Data</a></li>
</ol>
</nav>

Home icon

Sometimes it’s better to indicate home page using icon instead of just a plain text. Here comes a .breadcrumb-home class that has to be added into breadcrumb <a href> link. This icon is included in simple Torus Kit Font so it gets the same color as other breadcrumb items - can be used even on dark background using .links-light and .text-light.

<!-- Default -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-transparent breadcrumb-dividers-chevron">
<li class="breadcrumb-item"><a href="#" class="breadcrumb-home p-2"></a></li>
<li class="breadcrumb-item"><a href="#" class="p-2">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#" class="p-2">Data</a></li>
</ol>
</nav>

<!-- Dark links -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-transparent breadcrumb-dividers-chevron links-dark">
<li class="breadcrumb-item"><a href="#" class="breadcrumb-home p-2"></a></li>
<li class="breadcrumb-item"><a href="#" class="p-2">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#" class="p-2">Data</a></li>
</ol>
</nav>

<!-- Dark background color -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-dark breadcrumb-dividers-chevron text-light links-light">
<li class="breadcrumb-item"><a href="#" class="breadcrumb-home p-2"></a></li>
<li class="breadcrumb-item"><a href="#" class="p-2">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#" class="p-2">Data</a></li>
</ol>
</nav>

<!-- Primary background color -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-primary breadcrumb-dividers-chevron text-light links-light">
<li class="breadcrumb-item"><a href="#" class="breadcrumb-home p-2"></a></li>
<li class="breadcrumb-item"><a href="#" class="p-2">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#" class="p-2">Data</a></li>
</ol>
</nav>

Color variations

Light variation is a default for breadcrumbs. In order to use dark color, you need to add .links-light and .text-light class to .breadcrumb which changes the text and dividers colors to white.

<!-- Light variation -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb border bg-transparent p-2">
<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>
</nav>

<!-- Dark variations -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-dark links-light text-light p-2">
<li class="breadcrumb-item"><a href="#" class="breadcrumb-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>
</nav>

<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-primary links-light text-light breadcrumb-dividers-chevron">
<li class="breadcrumb-item"><a href="#" class="p-2">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="p-2">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#" class="p-2">Data</a></li>
</ol>
</nav>

<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-pink links-light text-light breadcrumb-dividers-label">
<li class="breadcrumb-item"><a href="#" class="p-2">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="p-2">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#" class="p-2">Data</a></li>
</ol>
</nav>

<nav aria-label="breadcrumb">
<ol class="breadcrumb links-light text-light breadcrumb-dividers-label" data-tor="bg(#269389)">
<li class="breadcrumb-item"><a href="#" class="p-2">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="p-2">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#" class="p-2">Data</a></li>
</ol>
</nav>

Accessibility

Since breadcrumbs provide a navigation, it’s a good idea to add a meaningful label such as aria-label="breadcrumb" to describe the type of navigation provided in the <nav> element, as well as applying an aria-current="page" to the last item of the set to indicate that it represents the current page.

For more information, see the WAI-ARIA Authoring Practices for the breadcrumb pattern.