Bootstrap 5 Breadcrumbs
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
navelement witharia-label="breadcrumb". - Add
class="breadcrumb"to theulelement that represents the breadcrumb. - Add the
.breadcrumb-itemclass to eachlielement within the breadcrumb. - Also add
class="active"to thelithat 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: