Did you Know ?
You can add additional user in your Account's Settings
Breadcrumb
<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>
Use the items in order to programatically generate the breadcrumb links.use class .breadcrumb to ol
Breadcrumb With Icon
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page"><i class="ri-home-4-line mr-1 float-left"></i>Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#"><i class="ri-home-4-line mr-1 float-left"></i>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="#"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
Use the items in order to programatically generate the breadcrumb links.use class .breadcrumb to ol with Icon
Breadcrumb
<nav aria-label="breadcrumb ">
<ol class="breadcrumb bg-primary">
<li class="breadcrumb-item active text-white" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-primary">
<li class="breadcrumb-item"><a href="#" class="text-white">Home</a></li>
<li class="breadcrumb-item active text-white" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-primary mb-0">
<li class="breadcrumb-item"><a href="#" class="text-white">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="text-white">Library</a></li>
<li class="breadcrumb-item active text-white" aria-current="page">Data</li>
</ol>
</nav>
use class .breadcrumb .bg-primary
Breadcrumb With Icon
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-primary">
<li class="breadcrumb-item active text-white" aria-current="page"><i class="ri-home-4-line mr-1 float-left"></i>Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-primary">
<li class="breadcrumb-item"><a href="#" class="text-white"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
<li class="breadcrumb-item active text-white" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-primary mb-0">
<li class="breadcrumb-item"><a href="#" class="text-white"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
<li class="breadcrumb-item"><a href="#" class="text-white">Library</a></li>
<li class="breadcrumb-item active text-white" aria-current="page">Data</li>
</ol>
</nav>
use class .breadcrumb .bg-primary With Icon.
Breadcrumb With Icon
<nav aria-label="breadcrumb">
<ol class="breadcrumb mm-bg-primary">
<li class="breadcrumb-item active" aria-current="page"><i class="ri-home-4-line mr-1 float-left"></i>Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb mm-bg-primary">
<li class="breadcrumb-item"><a href="#"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb mm-bg-primary mb-0">
<li class="breadcrumb-item"><a href="#"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
use class .breadcrumb .mm-bg-primary
Breadcrumb With Icon
<nav aria-label="breadcrumb">
<ol class="breadcrumb mm-bg-danger">
<li class="breadcrumb-item active" aria-current="page"><i class="ri-home-4-line mr-1 float-left"></i>Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb mm-bg-danger">
<li class="breadcrumb-item"><a href="#" class="text-danger"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb mm-bg-danger mb-0">
<li class="breadcrumb-item"><a href="#" class="text-danger"><i class="ri-home-4-line mr-1 float-left"></i>Home</a></li>
<li class="breadcrumb-item"><a href="#" class="text-danger">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
use class .breadcrumb .mm-bg-danger