Breadcrumb

Default Breadcrumb

Adding breadcrumb using .breadcrumb class.

<div class="overflow-auto custom-scroll">
   <div class="breadcrumb">
    <nav>
     <ol class="flex items-center breadcrumb-list">
       <li class="breadcrumb-items">
         <a href="javascript:void(0)"> +SVG_ICON("Home","stroke-primary") </a>
       </li>
       <li class="px-2"><span>/</span></li>
       <li class="capitalize breadcrumb-items">Bonus Ui</li>
       <li class="px-2"><span>/</span></li>
       <li class="font-light capitalize breadcrumb-items active">Breadcrumb</li>
     </ol>
    </nav> 
   </div>
</div>

Breadcrumb

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"> +SVG_ICON("Arrow-Right-2","w-4 h-4 stroke-primary") </li>
       <li class="capitalize breadcrumb-items">Ui Kits</li>
       <li class="px-2"> +SVG_ICON("Arrow-Right-2","w-4 h-4 stroke-primary") ;</li>
       <li class="font-light capitalize breadcrumb-items active">Typography</li>
     </ol>
    </nav> 
   </div>
</div>

Breadcrumb with Icon

Set the icons with breadcrumb using .breadcrumb & .breadcrumb-3, .breadcrumb-style-6 class.

<div class="overflow-auto custom-scroll">
   <div class="breadcrumb">
    <nav>
     <ol class="flex items-center breadcrumb-list">
       <li class="breadcrumb-items">
         <a href="javascript:void(0)"> +SVG_ICON("Home","stroke-primary") </a>
       </li>
       <li class="px-2"> +SVG_ICON("Arrow-Right-2","w-4 h-4 stroke-primary") </li>
       <li class="capitalize breadcrumb-items">Project</li>
       <li class="px-2"> +SVG_ICON("Arrow-Right-2","w-4 h-4 stroke-primary") </li>
       <li class="font-light capitalize breadcrumb-items active">Project List</li>
     </ol>
    </nav> 
   </div>
   <div class="breadcrumb breadcrumb-style-6">
    <nav>
     <ol class="flex items-center breadcrumb-list">
       <li class="breadcrumb-items">
         <a href="javascript:void(0)"> +SVG_ICON("Home","w-4 h-7 stroke-primary") </a> Home
       </li>
       <li class="px-2">span>/</span></li>
       <li class="capitalize breadcrumb-items">
         <a href="javascript:void(0)"> +SVG_ICON("Ticket-Star","w-4 h-7 stroke-primary") </a> Tables
       </li>
       <li class="px-2">span>/</span>;</li>
       <li class="font-light capitalize breadcrumb-items active">Simple</li>
     </ol>
    </nav>
   </div>
</div>

Breadcrumb Style

Set the icons with different style using .breadcrumb, .breadcrumb-style-4 & .breadcrumb-style-5.

<div class="overflow-auto custom-scroll">
   <div class="breadcrumb breadcrumb-style-4">
    <nav>
     <ol class="flex items-center breadcrumb-list">
       <li class="breadcrumb-items">
         <a href="javascript:void(0)"> +SVG_ICON("Home","stroke-title") </a>
       </li>
       <li class="px-2"><span>/</span></li>
       <li class="capitalize breadcrumb-items">Ecommerce</li>
       <li class="px-2"><span>/</span></li>
       <li class="font-light capitalize breadcrumb-items active">Shop</li>
     </ol>
    </nav> 
   </div>
   <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>

Simple Breadcrumb

Breadcrumb with page name. 

<div class="overflow-auto custom-scroll">
   <div class="breadcrumb breadcrumb-style-3">
    <nav class="text-success ">
     <ol class="flex items-center breadcrumb-list">
       <li class="breadcrumb-items">
         <a href="javascript:void(0)"> +SVG_ICON("Home","stroke-title") </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>

Colored Breadcrumb

Set Colored breadcrumb with the help of .bg-* class. 

<div class="overflow-auto custom-scroll">
   <div class="breadcrumb breadcrumb-style-3">
    <nav class="px-2 py-0 text-white bg-info">
     <ol class="flex items-center breadcrumb-list">
       <li class="breadcrumb-items">
         <a href="javascript:void(0)"> +SVG_ICON("Home","stroke-white") </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>

Copyright 2023 © Govo theme by pixelstrap

Hand crafted & made with

Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Monochrome Mode