Breadcrumb
LAST MONTH
$58,256
Default Breadcrumb
Default Breadcrumb - View Code
<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="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
Custom Dividers
Custom Dividers - View Code
<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="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
Colored Breadcrumb
Colored Breadcrumb - View Code
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-light-info px-3 py-2 rounded">
<li class="breadcrumb-item"><a href="#" class="text-info"><i data-feather="home" class="feather-sm fill-white"></i></a></li>
<li class="breadcrumb-item"><a href="#" class="text-info">Library</a></li>
<li class="breadcrumb-item active text-info font-medium" aria-current="page">Data</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-light-primary px-3 py-2 rounded">
<li class="breadcrumb-item"><a href="#" class="text-primary"><i data-feather="home" class="feather-sm fill-white"></i></a></li>
<li class="breadcrumb-item"><a href="#" class="text-primary">Library</a></li>
<li class="breadcrumb-item active text-primary font-medium" aria-current="page">Data</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-light-warning px-3 py-2 rounded">
<li class="breadcrumb-item"><a href="#" class="text-warning"><i data-feather="home" class="feather-sm fill-white"></i></a></li>
<li class="breadcrumb-item"><a href="#" class="text-warning">Library</a></li>
<li class="breadcrumb-item active text-warning font-medium" aria-current="page">Data</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-light-danger px-3 py-2 rounded">
<li class="breadcrumb-item"><a href="#" class="text-danger"><i data-feather="home" class="feather-sm fill-white"></i></a></li>
<li class="breadcrumb-item"><a href="#" class="text-danger">Library</a></li>
<li class="breadcrumb-item active text-danger font-medium" aria-current="page">Data</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-light-success px-3 py-2 rounded">
<li class="breadcrumb-item"><a href="#" class="text-success"><i data-feather="home" class="feather-sm fill-white"></i></a></li>
<li class="breadcrumb-item"><a href="#" class="text-success">Library</a></li>
<li class="breadcrumb-item active text-success font-medium" aria-current="page">Data</li>
</ol>
</nav>
Colored Border Breadcrumb
Colored Border Breadcrumb - View Code
<nav aria-label="breadcrumb">
<ol class="breadcrumb border border-light-info px-3 rounded">
<li class="breadcrumb-item"><a href="#" class="text-info">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="text-info">Library</a></li>
<li class="breadcrumb-item active text-info font-medium" aria-current="page">Data</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb border border-light-primary px-3 rounded">
<li class="breadcrumb-item"><a href="#" class="text-primary">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="text-primary">Library</a></li>
<li class="breadcrumb-item active text-primary font-medium" aria-current="page">Data</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb border border-light-warning px-3 rounded">
<li class="breadcrumb-item"><a href="#" class="text-warning">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="text-warning">Library</a></li>
<li class="breadcrumb-item active text-warning font-medium" aria-current="page">Data</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb border border-light-danger px-3 rounded">
<li class="breadcrumb-item"><a href="#" class="text-danger">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="text-danger">Library</a></li>
<li class="breadcrumb-item active text-danger font-medium" aria-current="page">Data</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb border border-light-success px-3 rounded">
<li class="breadcrumb-item"><a href="#" class="text-success">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="text-success">Library</a></li>
<li class="breadcrumb-item active text-success font-medium" aria-current="page">Data</li>
</ol>
</nav>