Bootstrap 5 Breadcrumbs

• Bootstrap Navbars
• Bootstrap Pagination

Add breadcrumbs by adding a single class name.

Bootstrap provides the .breadcrumb class which styles a list into a breadcrumb.

Bootstrap adds separators (by using :before and content) to the list as well as display: inline-block to the li element — resulting in that "breadcrumb" effect.

Creating a Breadcrumb

To create a breadcrumb:

• It's a good idea to enclose the breadcrumb in a nav element with aria-label="breadcrumb".
• Add class="breadcrumb" to the ul element that represents the breadcrumb.
• Add the .breadcrumb-item class to each li element within the breadcrumb.
• Also add class="active" to the li that represents the current page/section (the page that the user is currently on) — which would almost always be the last crumb in the breadcrumb.

Change the Divider

Bootstrap automatically adds a divider to the breadcrumb. You can change the divider via the --bs-breadcrumb-divider custom property:

It can also be changed via through the $breadcrumb-divider Sass variable, or flipped via $breadcrumb-divider-flipped for its RTL counterpart.

Non-List Breadcrumbs

Breadcrumbs don't necessarily need to be in a list. You can use them like this if required:

• Bootstrap Navbars
• Bootstrap Pagination