Logo Logo

Documentation v1.1.5

Preview
Light
Dark
System

Overview

Craft customizes the Bootstrap Breadcrumb  through the SASS variables in src/sass/components/_variables.scss and 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.
  1. Home
  2. Library
  3. Active
<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.
  1. Home
  2. Library
  3. Active
<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.
  1. Home
  2. Library
  3. Active
<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.
  1. Home
  2. Library
  3. Active
<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>
try metronic buy mega bundle
Preview Get Help Buy Now