Logo

Documentation v1.0.0

  • Base
  • Breadcrumb
Preview Upgrade to Pro

Overview

Ceres HTML Free customizes the Bootstrap Breadcrumb  through the SASS variables in src/sass/_variables.scssand adds additonal options in src/sass/_breadcrumb.scss.

Basic Example

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-bold">
    <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 px-3 text-muted">Active</li>
</ol>

Line Separator

Add .breadcrumb-lineto enable line separator style for a breadcrumb.
  1. Home
  2. Library
  3. Active
<ol class="breadcrumb breadcrumb-line text-muted fs-6 fw-bold">
    <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 px-3 text-muted">Active</li>
</ol>

Dot Separator

Add .breadcrumb-dotto enable dot separator style for a breadcrumb.
  1. Home
  2. Library
  3. Active
<ol class="breadcrumb breadcrumb-dot text-muted fs-6 fw-bold">
    <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 px-3 text-muted">Active</li>
</ol>

Without Separator

Add .breadcrumb-separatorlessto remove the separator.
  1. Home
  2. Library
  3. Active
<ol class="breadcrumb breadcrumb-separatorless text-muted fs-6 fw-bold">
    <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 px-3 text-muted">Active</li>
</ol>
Upgrade To Pro
Pro Version Benefits Free Pro
UI Elements 20 100
In-house Components 20 40
Crafted Pages 5 20
Complete Documentation
Product Support
Layout Builder
Source Vectors
Email Templates
User Management App
Calendar App
Chat App
Customers App
Upgrade to Ceres HTML Pro
Download Ceres HTML Free