Indicate the current page’s location within a navigational hierarchy that automatically adds separators via
CSS.
Read the official
Bootstrap Documentation for a full list of
instructions
and other options.
Avatar has 6 different sizes to use with the template. An avatar can have different sizes like larger and smaller avatar. Use .avatar class to add avatar style image.
<!-- Basic Breadcrumb -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="javascript:void(0);">Home</a>
</li>
<li class="breadcrumb-item">
<a href="javascript:void(0);">Library</a>
</li>
<li class="breadcrumb-item active">Data</li>
</ol>
</nav>
<!-- Basic Breadcrumb with icon -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="javascript:void(0);" class="d-flex align-items-center"><i class="ri-star-line me-1 text-body"></i>Home</a>
</li>
<li class="breadcrumb-item">
<a href="javascript:void(0);" class="d-flex align-items-center"><i class="ri-star-line me-1 text-body"></i>Library</a>
</li>
<li class="breadcrumb-item active">
<a href="javascript:void(0);" class="d-flex align-items-center"><i class="ri-star-line me-1 text-body"></i>Data</a>
</li>
</ol>
</nav>
Custom styling of the breadcrumb used by this template. Use class .breadcrumb-style1 and
.breadcrumb-style2 for these breadcrumb styles.
<!-- Style1 Breadcrumb-->
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-style1">
<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>
</ol>
</nav>
<!-- Style2 Breadcrumb-->
<nav aria-label="breadcrumb mb-0">
<ol class="breadcrumb breadcrumb-style2">
<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>
</ol>
</nav>