-
-
-
Notifications
Check all -
-
Edwin Day30 mins ago
Marked the bug analysis task as done
-
Ralph Waters45 mins ago
New bugs added for designer
-
-
-
-
-
Cart
Check all 
Mi Watch Revolve
$ 10.00
Ulrich Duffel Bag
$140.00
Tree Stylish Pot
$ 840.00
-
Total
$ 990.00
- Proceed to checkout
-
-
-
Messages
Send a new message -
online
-
warning
-
online
-
-
Helen Walter
Admin
Breadcrumbs
ADMIN PANELDefault breadcrumb
You can copy below html code and use this design
<div class="overflow-auto custom-scroll">
<nav class="w-full text-primary">
<ol class="flex items-center justify-center breadcrumb">
<li class="bg-primaryLight">
<a class="h-7 flex items-center justify-center relative w-[30px]" href="javascript:void(0)">
<div class="leading-none icbu">
<span class="text-base iconlyBulk-Home"></span>
</div>
</a>
</li>
<li class="px-2">
<span>/</span>
</li>
<li class="capitalize">Documents</li>
<li class="px-2">
<span>/</span>
</li>
<li class="font-light capitalize active">Add page</li>
</ol>
</nav>
</div>
Breadcrumb
You can set breadcrumb with the page name.
<div class="overflow-auto custom-scroll">
<div class="breadcrumb-2 breadcrumb-style-3">
<nav class="w-full text-primary">
<ol class="flex items-center breadcrumb-list">
<li class="breadcrumb-items">
<a href="javascript:void(0)"> Home </a>
</li>
<li class="px-2"><a iconly-Arrow-Right-2 class="text-[18px]"></a></li>
<li class="capitalize breadcrumb-items">Ui Kits</li>
<li class="px-2"><a iconly-Arrow-Right-2 class="text-[18px]"></a></li>
<li class="font-light capitalize breadcrumb-items active">Typography</li>
</ol>
</nav>
</div>
</div>
Simple Breadcrumbs
Breadcrumb with page name.
<div class="overflow-auto custom-scroll">
<div class="breadcrumb breadcrumb-style-3">
<nav class="!text-info">
<ol class="flex items-center breadcrumb-list">
<li class="breadcrumb-items">
<a href="javascript:void(0)"" class="!h-auto"><span class="text-base iconlyBulk-Home"></span></a> Home
</li>
<li class="px-2">span>/</span></li>
<li class="capitalize breadcrumb-items">Icons</li>
<li class="px-2">span>/</span>;</li>
<li class="font-light capitalize breadcrumb-items active">Feather</li>
</ol>
</nav>
</div>
</div>
Breadcrumb With Icon
Set the icons with breadcrumb.
<div class="overflow-auto custom-scroll">
<div class="breadcrumb breadcrumb-style-3">
<nav class="text-primary">
<ol class="flex items-center breadcrumb-list">
<li class="breadcrumb-items">
<a href="javascript:void(0)" class="!h-auto"><span class="text-base iconlyBulk-Home"></span></a> Home
</li>
<li class="px-2"><a iconly-Arrow-Right-2 class="text-[18px]"></a></li>
<li class="capitalize breadcrumb-items">Project</li>
<li class="px-2"><a iconly-Arrow-Right-2 class="text-[18px]"></a>;</li>
<li class="font-light capitalize breadcrumb-items active">Project List</li>
</ol>
</nav>
</div>
</div>
Active Page Style
You can set the active page style in breadcrumb.
<div class="overflow-auto custom-scroll">
<div class="breadcrumb breadcrumb-style-5">
<nav>
<ol class="flex items-center breadcrumb-list">
<li class="breadcrumb-items">
<a href="javascript:void(0)">Home</a>
</li>
<li class="px-2"><small></small></li>
<li class="capitalize breadcrumb-items">Form</li>
<li class="px-2"><small></small></li>
<li class="font-light capitalize breadcrumb-items active">Validation</li>
</ol>
</nav>
</div>
</div>
Breadcrumb With Icons
Add breadcrumb with icon and page name using breadcrumb-3 class.
<div class="overflow-auto custom-scroll">
<div class="breadcrumb breadcrumb-style-5">
<nav (class="!text-danger")>
<ol class="flex items-center breadcrumb-list">
<li class="breadcrumb-items">
<a href="javascript:void(0)"><span class="text-base iconlyBulk-Home"></span>Home</a>
</li>
<li class="px-2"><span>/</span></li>
<li class="capitalize breadcrumb-items"> +iconly('', 'Folder', 'text-[24px]', ['1','2'], 'path_formatter') Tables </li>
<li class="px-2"><span>/</span></li>
<li class="font-light capitalize breadcrumb-items active"> +iconly('', 'Folder', 'text-[24px]', ['1','2'], 'path_formatter') Simple </li>
</ol>
</nav>
</div>
</div>