Overview
Metronic customizes the Bootstrap Breadcrumb
through the SASS variables in
src/assets/sass/core/components/_variables.scss and adds additonal options in src/assets/sass/core/components/_breadcrumb.scss.
Basic
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.
<ol class="breadcrumb text-muted fs-6 fw-semibold">
<li class="breadcrumb-item"><a href="#" class="">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="">Library</a></li>
<li class="breadcrumb-item text-muted">Active</li>
</ol>Line Separator
Add
.breadcrumb-line to enable line separator style for a breadcrumb.
<ol class="breadcrumb breadcrumb-line text-muted fs-6 fw-semibold">
<li class="breadcrumb-item"><a href="#" class="">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="">Library</a></li>
<li class="breadcrumb-item text-muted">Active</li>
</ol>Dot Separator
Add
.breadcrumb-dot to enable dot separator style for a breadcrumb.
<ol class="breadcrumb breadcrumb-dot text-muted fs-6 fw-semibold">
<li class="breadcrumb-item"><a href="#" class="">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="">Library</a></li>
<li class="breadcrumb-item text-muted">Active</li>
</ol>Without Separator
Add
.breadcrumb-separatorless to remove the separator.
<ol class="breadcrumb breadcrumb-separatorless text-muted fs-6 fw-semibold">
<li class="breadcrumb-item"><a href="#" class="">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="">Library</a></li>
<li class="breadcrumb-item text-muted">Active</li>
</ol>
2024©
Keenthemes
