Buy now
Breadcrumb
Indicate the current page’s location within a navigational hierarchy.
Dark (default) version
<!-- Basic example -->
<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>
<!-- Home icon -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">
<i class="ai-home"></i>
Home
</a>
</li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>// Basic example
nav(aria-label="breadcrumb").mb-3
ol.breadcrumb
li.breadcrumb-item
a(href="#") Home
li.breadcrumb-item
a(href="#") Library
li(aria-current="page").breadcrumb-item.active
| Data
// Home icon
nav(aria-label="breadcrumb")
ol.breadcrumb
li.breadcrumb-item
a(href="#")
i.ai-home
| Home
li.breadcrumb-item
| a(href="#") Library
li(aria-current="page").breadcrumb-item.active
| Data
Light version
<!-- Basic example -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-light">
<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>
<!-- Home icon -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-light">
<li class="breadcrumb-item">
<a href="#">
<i class="ai-home"></i>
Home
</a>
</li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>// Basic example
nav(aria-label="breadcrumb").mb-3
ol.breadcrumb.breadcrumb-light
li.breadcrumb-item
a(href="#") Home
li.breadcrumb-item
a(href="#") Library
li(aria-current="page").breadcrumb-item.active
| Data
// Home icon
nav(aria-label="breadcrumb")
ol.breadcrumb.breadcrumb-light
li.breadcrumb-item
a(href="#")
i.ai-home
| Home
li.breadcrumb-item
| a(href="#") Library
li(aria-current="page").breadcrumb-item.active
| Data