Breadcrumbs
Bootstrap 5 Breadcrumbs component
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
Basic example
<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>
Changing the separator
Separators are automatically added in CSS through
::before
and
content. They can be changed by changing $breadcrumb-divider. The
quote
function is needed to generate the quotes around a string, so if you want
> as separator, you can use this:
$breadcrumb-divider: quote(">");
It’s also possible to use an embedded SVG icon:
$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");
The separator can be removed by setting $breadcrumb-divider to none:
$breadcrumb-divider: none;
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.
Breadcrumb - API
CSS variables
As part of MDB’s evolving CSS variables approach, breadcrumb now uses local CSS variables on
.breadcrumb for enhanced real-time customization. Values for the CSS variables
are set via Sass, so Sass customization is still supported, too.
// .breadcrumb
--#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
--#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
--#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
@include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
--#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
--#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
--#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
--#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
--#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
// .navbar
//.breadcrumb
--#{$prefix}breadcrumb-item-color: #{$breadcrumb-item-color};
--#{$prefix}breadcrumb-item-hover-color: #{$breadcrumb-item-hover-color};
--#{$prefix}breadcrumb-item-before-color: #{$breadcrumb-item-before-color};
--#{$prefix}breadcrumb-item-transition: #{$breadcrumb-item-transition};
SCSS variables
$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: $gray-600;
$breadcrumb-active-color: $gray-600;
$breadcrumb-divider: quote('/');
$breadcrumb-divider-flipped: $breadcrumb-divider;
$breadcrumb-border-radius: null;
$breadcrumb-item-color: rgba(0, 0, 0, 0.55);
$breadcrumb-item-transition: color 0.15s ease-in-out;
$breadcrumb-item-hover-color: rgba(0, 0, 0, 0.7);
$breadcrumb-item-before-color: $breadcrumb-item-color;