loading....
Bskin Bootstrap 5 skin ui kit
Breadcrumb
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
Default Breadcrumb
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page"><a href="#" class="text-decoration-none text-gray">Home</a></li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-secondary">
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
<li class="breadcrumb-item text-white active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-dark">
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Library</a></li>
<li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
<li class="breadcrumb-item text-white active" aria-current="page">Data</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-danger">
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Library</a></li>
<li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
<li class="breadcrumb-item text-white active" aria-current="page">Data</li>
</ol>
</nav>
Animated Breadcrumb
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-danger bg-animation">
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Library</a></li>
<li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
<li class="breadcrumb-item text-white active" aria-current="page">Data</li>
</ol>
</nav>
Gradient Breadcrumb
<nav aria-label="breadcrumb">
<ol class="breadcrumb alert-primary-gradient">
<li class="breadcrumb-item active" aria-current="page"><a href="#" class="text-white text-decoration-none">Home</a></li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-secondary alert-secondary-gradient">
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
<li class="breadcrumb-item text-white active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-dark alert-dark-gradient">
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Library</a></li>
<li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
<li class="breadcrumb-item text-white active" aria-current="page">Data</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-danger alert-danger-gradient">
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Library</a></li>
<li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
<li class="breadcrumb-item text-white active" aria-current="page">Data</li>
</ol>
</nav>
center Breadcrumb
<nav aria-label="breadcrumb">
<ol class="breadcrumb justify-content-center">
<li class="breadcrumb-item active" aria-current="page"><a href="#" class="text-decoration-none text-gray">Home</a></li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-secondary justify-content-center">
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
<li class="breadcrumb-item text-white active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-dark justify-content-center">
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Library</a></li>
<li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
<li class="breadcrumb-item text-white active" aria-current="page">Data</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-danger justify-content-center">
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Library</a></li>
<li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
<li class="breadcrumb-item text-white active" aria-current="page">Data</li>
</ol>
</nav>
Right Breadcrumb
<nav aria-label="breadcrumb">
<ol class="breadcrumb justify-content-end">
<li class="breadcrumb-item active" aria-current="page"><a href="#" class="text-decoration-none text-gray">Home</a></li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-secondary justify-content-end">
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
<li class="breadcrumb-item text-white active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-dark justify-content-end">
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Library</a></li>
<li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
<li class="breadcrumb-item text-white active" aria-current="page">Data</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-danger justify-content-end">
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
<li class="breadcrumb-item"><a class="text-white text-decoration-none" href="#">Library</a></li>
<li class="breadcrumb-item"><i class="text-white fas fa-hand-point-right"></i></li>
<li class="breadcrumb-item text-white active" aria-current="page">Data</li>
</ol>
</nav>
© Copyright-2022 DesignCollection.in. All rights reserved.