Documentation v8.1.6

Preview Downloads Purchase

Overview

Metronic customizes the Bootstrap Breadcrumb  through the SASS variables in src/sass/components/_variables.scssand adds additonal options in src/sass/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 pe-3"><a href="#" class="pe-3">Home</a></li>
    <li class="breadcrumb-item pe-3"><a href="#" class="pe-3">Library</a></li>
    <li class="breadcrumb-item pe-3 text-muted">Active</li>
</ol>

Line Separator

Add .breadcrumb-lineto enable line separator style for a breadcrumb.
<ol class="breadcrumb breadcrumb-line text-muted fs-6 fw-semibold">
    <li class="breadcrumb-item pe-3"><a href="#" class="pe-3">Home</a></li>
    <li class="breadcrumb-item pe-3"><a href="#" class="pe-3">Library</a></li>
    <li class="breadcrumb-item pe-3 text-muted">Active</li>
</ol>

Dot Separator

Add .breadcrumb-dotto enable dot separator style for a breadcrumb.
<ol class="breadcrumb breadcrumb-dot text-muted fs-6 fw-semibold">
    <li class="breadcrumb-item pe-3"><a href="#" class="pe-3">Home</a></li>
    <li class="breadcrumb-item pe-3"><a href="#" class="pe-3">Library</a></li>
    <li class="breadcrumb-item pe-3 text-muted">Active</li>
</ol>

Without Separator

Add .breadcrumb-separatorlessto remove the separator.
<ol class="breadcrumb breadcrumb-separatorless text-muted fs-6 fw-semibold">
    <li class="breadcrumb-item pe-3"><a href="#" class="pe-3">Home</a></li>
    <li class="breadcrumb-item pe-3"><a href="#" class="pe-3">Library</a></li>
    <li class="breadcrumb-item pe-3 text-muted">Active</li>
</ol>
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Video Tutorials
From guides and how-tos, to live demos and code examples to get started right away.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New ?
Latest features and improvements added with our users feedback in mind.
Buy now