Bootstrap breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.
A 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
and content
.
<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="#">CoreUI</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="#">CoreUI</a></li>
<li class="breadcrumb-item"><a href="#">Profile</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<nav class="breadcrumb">
<a class="breadcrumb-item" href="#">CoreUI</a>
<a class="breadcrumb-item" href="#">Profile</a>
<a class="breadcrumb-item" href="#">Data</a>
<span class="breadcrumb-item active">Details</span>
</nav>
Separators can be changed by changing $breadcrumb-divider
. The quote function is needed to generate the quotes around a string, so if you want >
as separator, you can use this:
$breadcrumb-divider: quote(">");
It’s also possible to use a base64 embedded SVG icon:
$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
The separator can be removed by setting $breadcrumb-divider
to none
:
$breadcrumb-divider: none;
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active">Home</li>
<!-- Breadcrumb Menu-->
<li class="breadcrumb-menu">
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<a class="btn" href="#"><i class="cil-speech"></i></a>
<a class="btn" href="#"><i class="cil-graph mr-2"></i> Dashboard</a>
<a class="btn" href="#"><i class="cil-settings mr-2"></i> Settings</a>
</div>
</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Library</li>
<!-- Breadcrumb Menu-->
<li class="breadcrumb-menu">
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<a class="btn" href="#"><i class="cil-speech"></i></a>
<a class="btn" href="#"><i class="cil-graph mr-2"></i> Dashboard</a>
<a class="btn" href="#"><i class="cil-settings mr-2"></i> Settings</a>
</div>
</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">Data</li>
<!-- Breadcrumb Menu-->
<li class="breadcrumb-menu">
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<a class="btn" href="#"><i class="cil-speech"></i></a>
<a class="btn" href="#"><i class="cil-graph mr-2"></i> Dashboard</a>
<a class="btn" href="#"><i class="cil-settings mr-2"></i> Settings</a>
</div>
</li>
</ol>
</nav>
<nav class="breadcrumb">
<a class="breadcrumb-item" href="#">Home</a>
<a class="breadcrumb-item" href="#">Library</a>
<a class="breadcrumb-item" href="#">Data</a>
<span class="breadcrumb-item active">Bootstrap</span>
<!-- Breadcrumb Menu-->
<div class="breadcrumb-menu">
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<a class="btn" href="#"><i class="cil-speech"></i></a>
<a class="btn" href="#"><i class="cil-graph mr-2"></i> Dashboard</a>
<a class="btn" href="#"><i class="cil-settings mr-2"></i> Settings</a>
</div>
</div>
</nav>
Since breadcrumbs provide navigation, it’s useful to add a significant label such as aria-label="breadcrumb"
to explain the type of navigation implemented in the <nav>
element. You should also add an aria-current="page"
to the last item of the set to show that it represents the current page.
For more information, see the WAI-ARIA Authoring Practices for the breadcrumb pattern.