Breadcrumb
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
Example
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.
Using embedded SVG
Inlining SVG as data URI requires to URL escape a few characters, most notably <
, >
and #
. That’s why the $breadcrumb-divider
variable is passed through our escape-svg()
Sass function. When using the CSS custom property, you need to URL escape your SVG on your own. Read Kevin Weber’s explanations on CodePen for detailed information on what to escape.
<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z' fill='%23000000'/%3E%3C/svg%3E");" 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,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 16 16'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z' fill='#{$breadcrumb-divider-color}'/></svg>");
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;
Dark variant
Add .breadcrumb-dark
to the .breadcrumb
for a dark variant.
<nav aria-label="dark breadcrumb">
<ol class="breadcrumb breadcrumb-dark">
<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>
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 ARIA Authoring Practices Guide breadcrumb pattern.
CSS
Variables
As part of Boosted Innovation Cup’s evolving CSS variables approach, breadcrumbs now use 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.
--#{$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-font-weight: #{$breadcrumb-font-weight}; // Boosted mod
--#{$prefix}breadcrumb-color: #{$breadcrumb-color}; // Boosted mod
--#{$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};
Customization through CSS variables can be seen on the .breadcrumb-dark
modifier class where we override specific values without adding duplicate CSS selectors.
--#{$prefix}breadcrumb-color: #{$breadcrumb-dark-color}; // Boosted mod
--#{$prefix}breadcrumb-bg: #{$breadcrumb-dark-bg}; // Boosted mod
--#{$prefix}breadcrumb-divider-color: #{$breadcrumb-dark-divider-color}; // Boosted mod
--#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-dark-active-color}; // Boosted mod
Sass variables
Variables for all breadcrumbs:
$breadcrumb-font-size: $font-size-sm;
$breadcrumb-font-weight: $font-weight-bold; // Boosted mod
$breadcrumb-padding-y: .5rem;
$breadcrumb-padding-x: 0;
$breadcrumb-item-padding-x: $spacer * .5;
$breadcrumb-margin-bottom: 1rem;
$breadcrumb-color: $black; // Boosted mod
$breadcrumb-bg: null;
$breadcrumb-divider-color: null;
$breadcrumb-active-color: null;
$breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='12' height='12'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
$breadcrumb-divider-flipped: $breadcrumb-divider;
$breadcrumb-border-radius: null;
Variables for dark breadcrumb:
$breadcrumb-dark-color: $white; // Boosted mod
$breadcrumb-dark-bg: null; // Boosted mod
$breadcrumb-dark-divider-color: $black; // Boosted mod: since the divider is inverted for SVG reasons
$breadcrumb-dark-active-color: null; // Boosted mod