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.

• Angular Breadcrumb
• React Breadcrumb
• Vue Breadcrumb

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

<navaria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item active"aria-current="page">Home</li></ol></nav><navaria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">Home</a></li><liclass="breadcrumb-item active"aria-current="page">Library</li></ol></nav><navaria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">Home</a></li><liclass="breadcrumb-item"><ahref="#">Library</a></li><liclass="breadcrumb-item active"aria-current="page">Data</li></ol></nav>

Dividers

Dividers are automatically added in CSS through::before andcontent. 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.

<navstyle="--cui-breadcrumb-divider: '>';"aria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">Home</a></li><liclass="breadcrumb-item active"aria-current="page">Library</li></ol></nav>

When modifying via Sass, thequote 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 anembedded SVG icon. Apply it via our CSS custom property, or use the Sass variable.

<navstyle="--cui-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='%236c757d'/%3E%3C/svg%3E&#34;);"aria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">Home</a></li><liclass="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;.

<navstyle="--cui-breadcrumb-divider: '';"aria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">Home</a></li><liclass="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 asaria-label="breadcrumb" to explain the type of navigation implemented in the<nav> element. You should also add anaria-current="page" to the last item of the set to show that it represents the current page.

For more information, see theARIA 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 forReact.js,Vue.js, andAngular, 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