Bootstrap 5 Breadcrumb
Breadcrumb
Bootstrap breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.
🤖 Looking for the LLM-optimized version? View llm.md
Other frameworks
CoreUI components are available as native Angular, React, and Vue components. To learn more please visit the following pages.
Example
The breadcrumb navigation provides links back to each previous page the user navigated through and shows the current location in a website or an application. You don’t have to add separators, because they automatically added in CSS through ::before
and content
.
<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 --cui-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="--cui-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="--cui-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='%236c757d'/%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'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");
You can also remove the divider setting --cui-breadcrumb-divider: '';
(empty strings in CSS custom properties counts as a value), or setting the Sass variable to $breadcrumb-divider: none;
.
<nav style="--cui-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;
Accessibility
Since breadcrumbs provide navigation, it’s useful to add a significant label such as aria-label="breadcrumb"
to explain the type of navigation implemented in the <nav>
element. You should also add an aria-current="page"
to the last item of the set to show that it represents the current page.
For more information, see the ARIA Authoring Practices Guide breadcrumb pattern.
Customizing
CSS variables
Breadcrumbs 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.
--cui-breadcrumb-padding-x: #{$breadcrumb-padding-x};
--cui-breadcrumb-padding-y: #{$breadcrumb-padding-y};
--cui-breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
@include rfs($breadcrumb-font-size, --cui-breadcrumb-font-size);
--cui-breadcrumb-bg: #{$breadcrumb-bg};
--cui-breadcrumb-border-radius: #{$breadcrumb-border-radius};
--cui-breadcrumb-divider-color: #{$breadcrumb-divider-color};
--cui-breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
--cui-breadcrumb-item-active-color: #{$breadcrumb-active-color};
SASS variables
$breadcrumb-font-size: null;
$breadcrumb-padding-y: 0;
$breadcrumb-padding-x: 0;
$breadcrumb-item-padding-x: .5rem;
$breadcrumb-margin-bottom: 1rem;
$breadcrumb-bg: null;
$breadcrumb-divider-color: var(--#{$prefix}secondary-color);
$breadcrumb-active-color: var(--#{$prefix}secondary-color);
$breadcrumb-divider: string.quote("/");
$breadcrumb-divider-flipped: $breadcrumb-divider;
$breadcrumb-border-radius: null;
CoreUI vs Bootstrap
While this Breadcrumb component is fully compatible with Bootstrap and follows its core principles, CoreUI delivers a more complete solution for modern app development.
What sets CoreUI apart from Bootstrap?
- ✅ Fully compatible with Bootstrap – Built directly on Bootstrap, all classes and behaviors work as expected.
- 🧠 Framework-native versions – CoreUI provides dedicated libraries for React.js, Vue.js, and Angular, unlike Bootstrap which relies on third-party plugins for JavaScript frameworks.
- 👨💻 Maintained by a full-time team – CoreUI is developed as a professional product, not a volunteer-driven project.
- 📦 More built-in components – Includes additional ready-to-use components like range sliders, multi-selects, steppers, etc.
- 🛠️ Sass Modules support today – CoreUI already supports Sass Modules, which are planned for Bootstrap 6.
- 🌍 Better LTR/RTL support – Uses modern CSS logical properties for seamless bidirectional layout support.
- 🔒 LTS (Long-Term Support) – Bootstrap now offers LTS only via paid third parties like HeroDevs, while CoreUI continues to offer long-term support natively and for free.
Whether you’re building internal tools, dashboards, or SaaS platforms — CoreUI combines the familiarity of Bootstrap with a more powerful, scalable, and production-ready ecosystem.
👉 Explore CoreUI Bootstrap Components
👉 Compare CoreUI vs Bootstrap