Default Breadcrumbs
Create navigational links with Bootstrap's
.breadcrumb component. Use
<nav> and
<ol class="breadcrumb"> to display a
breadcrumb trail, indicating the current page's location.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<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" aria-current="page">Data</li>
</ol>
</nav>Breadcrumb with line icon
Use the custom .breadcrumb-line class to
display breadcrumbs with custom Remix Icons. Apply it to the
<ol class="breadcrumb"> to enhance the
breadcrumb trail with icons.
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-line">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-line">
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-line mb-0">
<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" aria-current="page">Data</li>
</ol>
</nav>Breadcrumb with arrow icon
Use the custom .breadcrumb-arrow class to
create breadcrumb trails with arrow-shaped separators using
Remix Icons. Apply it to the
<ol class="breadcrumb"> for a stylish,
icon-based navigation.
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-arrow">
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-arrow mb-0">
<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" aria-current="page">Data</li>
</ol>
</nav>Breadcrumb with double arrow icon
Use the custom .breadcrumb-double-arrow class
to create breadcrumb trails with double arrow separators
using Remix Icons. Apply it to the
<ol class="breadcrumb"> for a unique and
visually distinct navigation style.
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-double-arrow">
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-double-arrow mb-0">
<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" aria-current="page">Data</li>
</ol>
</nav>Breadcrumb with double arrow icon
Use the custom .breadcrumb-double-arrow class
to create breadcrumb trails with double arrow separators
using Remix Icons. Apply it to the
<ol class="breadcrumb"> for a unique and
visually distinct navigation style.
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-double-slash">
<li><i class="ri-home-4-line fs-16 me-2 lh-sm"></i></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-double-slash">
<li><i class="ri-home-4-line fs-16 me-2 lh-sm"></i></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-double-slash mb-0">
<li><i class="ri-home-4-line fs-16 me-2 lh-sm"></i></li>
<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" aria-current="page">Data</li>
</ol>
</nav>
Colored Breadcrumb
Create colorful breadcrumb trails by applying Bootstrap
utility classes like .bg-primary or
.text-light to the <nav> or
<ol class="breadcrumb">. This adds
vibrant backgrounds or text colors to your breadcrumb.
<nav aria-label="breadcrumb">
<ol class="breadcrumb colored-breadcrumb breadcrumb-double-arrow bg-primary mb-3">
<li><i class="ri-home-4-line fs-16 text-white me-2 lh-sm"></i></li>
<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" aria-current="page">Data</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb colored-breadcrumb breadcrumb-double-arrow bg-secondary mb-3">
<li><i class="ri-home-4-line fs-16 text-white me-2 lh-sm"></i></li>
<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" aria-current="page">Data</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb colored-breadcrumb breadcrumb-double-arrow bg-success mb-3">
<li><i class="ri-home-4-line fs-16 text-white me-2 lh-sm"></i></li>
<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" aria-current="page">Data</li>
</ol>
</nav>