Example
Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use
our utilities to add additional styles as desired.
<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>
<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>
Separators
We provide custom separator classes for different visual styles. The default separator is a forward
slash (/), but you can use chevron or dot separators with the provided classes.
Chevron Separator
Use the separator-chevron class to display a chevron (›) as the separator.
<nav aria-label="breadcrumb">
<ol class="breadcrumb separator-chevron">
<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>
<nav aria-label="breadcrumb"> <ol class="breadcrumb
separator-chevron"> <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>
Dot Separator
Use the separator-dot class to display a dot (•) as the separator.
<nav aria-label="breadcrumb">
<ol class="breadcrumb separator-dot">
<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>
<nav aria-label="breadcrumb"> <ol class="breadcrumb
separator-dot"> <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>
Default Separator
The default separator is a forward slash (/) and requires no additional classes.
<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>
<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>
With Dropdown
Breadcrumbs can include dropdown menus for navigation options. Use Bootstrap's dropdown component
within breadcrumb items.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item dropdown">
<a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Library
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="breadcrumb-item active" aria-current="page">
Data
</li>
</ol>
</nav>
<nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li
class="breadcrumb-item"> <a href="#">Home</a> </li>
<li class="breadcrumb-item dropdown"> <a class="dropdown-toggle"
href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false"> Library </a> <ul
class="dropdown-menu"> <li><a class="dropdown-item"
href="#">Action</a></li> <li><a
class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li> <li><a
class="dropdown-item" href="#">Something else here</a></li>
</ul> </li> <li class="breadcrumb-item active"
aria-current="page"> Data </li> </ol> </nav>
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
ARIA Authoring Practices Guide breadcrumb pattern.