<div class="custom-scroll overflow-auto">
   <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="breadcrumb-items capitalize">Bonus Ui</li>
       <li class="px-2"><span>/</span></li>
       <li class="breadcrumb-items capitalize font-light active">Breadcrumb</li>
     </ol>
    </nav> 
   </div>
</div>

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

  <div class="custom-scroll overflow-auto">
   <div class="breadcrumb breadcrumb-style-3">
    <nav>
     <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="breadcrumb-items capitalize">Icons</li>
       <li class="px-2">span>/</span>;</li>
       <li class="breadcrumb-items capitalize font-light active">Feather</li>
     </ol>
    </nav> 
   </div>
</div>

 <div class="custom-scroll overflow-auto">
   <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="breadcrumb-items capitalize">Project</li>
       <li class="px-2"> +SVG_ICON("Arrow-Right-2","w-4 h-4 stroke-primary") </li>
       <li class="breadcrumb-items capitalize font-light active">Project List</li>
     </ol>
    </nav> 
   </div>
</div>

 <div class="custom-scroll overflow-auto">
   <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="breadcrumb-items capitalize">Ecommerce</li>
       <li class="px-2"><span>/</span></li>
       <li class="breadcrumb-items capitalize font-light active">Shop</li>
     </ol>
    </nav> 
   </div>
</div>

  <div class="custom-scroll overflow-auto">
   <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="breadcrumb-items capitalize">Form</li>
       <li class="px-2"><small></small></li>
       <li class="breadcrumb-items capitalize font-light active">Validation</li>
     </ol>
    </nav> 
   </div>
</div>

  <div class="custom-scroll overflow-auto">
   <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 fill-primary") </a> Home
       </li>
       <li class="px-2">span>/</span></li>
       <li class="breadcrumb-items capitalize">
         <a href="javascript:void(0)"> +SVG_ICON("Ticket-Star","w-4 h-7 stroke-primary fill-primary") </a> Tables
       </li>
       <li class="px-2">span>/</span>;</li>
       <li class="breadcrumb-items capitalize font-light active">Simple</li>
     </ol>
    </nav>
   </div>
</div>