25/4/2020 Breadcrumb · Bootstrap

Breadcrumb
Search...
Indicate the current page’s location within a navigational hierarchy that
automatically adds separators via CSS.
Getting started

Layout
Content Example
Components
Alerts Home
Badge

Breadcrumb
Home / Library
Buttons

Button group
Home / Library / Data
Card

Carousel

Collapse
Copy
Dropdowns <nav aria-label="breadcrumb">
<ol class="breadcrumb">
Forms
<li class="breadcrumb-item active" aria-current="page">Home</li>
Input group </ol>
Jumbotron </nav>

List group
<nav aria-label="breadcrumb">
Media object <ol class="breadcrumb">
Modal <li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
Navs
</ol>
Navbar </nav>

Pagination
<nav aria-label="breadcrumb">
Popovers <ol class="breadcrumb">
Progress <li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
Scrollspy
<li class="breadcrumb-item active" aria-current="page">Data</li>
Spinners </ol>
Toasts </nav>

Tooltips

Utilities

Extend Changing the separator

Migration 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,
About
so if you want > as separator, you can use this:

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

It’s also possible to use a base64 embedded SVG icon:

Copy
$breadcrumb-divider:
url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZ
HRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00
eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

The separator can be removed by setting $breadcrumb-divider to none:

https://getbootstrap.com/docs/4.4/components/breadcrumb/ 1/2
25/4/2020 Breadcrumb · Bootstrap

Copy
$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.

https://getbootstrap.com/docs/4.4/components/breadcrumb/ 2/2