Bootstrap breadcrumb
Bootstrap breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators.
Overview
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>Breadcrumb menu
<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="cui-speech"></i></a>
<a class="btn" href="#"><i class="cui-graph"></i> Dashboard</a>
<a class="btn" href="#"><i class="cui-settings"></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="cui-speech"></i></a>
<a class="btn" href="#"><i class="cui-graph"></i> Dashboard</a>
<a class="btn" href="#"><i class="cui-settings"></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="cui-speech"></i></a>
<a class="btn" href="#"><i class="cui-graph"></i> Dashboard</a>
<a class="btn" href="#"><i class="cui-settings"></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="cui-speech"></i></a>
<a class="btn" href="#"><i class="cui-graph"></i> Dashboard</a>
<a class="btn" href="#"><i class="cui-settings"></i> Settings</a>
</div>
</div>
</nav>Accessibility
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.