<ol class="flex items-center whitespace-nowrap" aria-label="Breadcrumb">
   <li class="inline-flex items-center">
      <a class="flex items-center text-sm text-gray-500 hover:text-primary focus:outline-none focus:text-primary dark:focus:text-primary leading-tight" href="#">
      Home
      </a>
      <i class="ti ti-chevron-right text-sm leading-tight font-medium mx-2"></i>
   </li>
   <li class="inline-flex items-center">
      <a class="flex items-center text-sm text-gray-500 hover:text-primary focus:outline-none focus:text-primary dark:focus:text-primary leading-tight" href="#">
      App Center
      <i class="ti ti-chevron-right text-sm leading-tight font-medium mx-2"></i>
      </a>
   </li>
   <li class="inline-flex items-center text-sm font-semibold text-gray-800 truncate dark:text-gray-200 leading-tight" aria-current="page">
      Application
   </li>
</ol>
            
                                                    

   
<ol class="flex items-center whitespace-nowrap" aria-label="Breadcrumb">
   <li class="inline-flex items-center">
      <a class="flex items-center text-sm text-gray-500 hover:text-primary focus:outline-none focus:text-primary dark:focus:text-primary leading-tight" href="#">
      Home
      </a>
      <i class="ti ti-slash text-sm leading-tight font-medium mx-2"></i>
   </li>
   <li class="inline-flex items-center">
      <a class="flex items-center text-sm text-gray-500 hover:text-primary focus:outline-none focus:text-primary dark:focus:text-primary leading-tight" href="#">
      App Center
      <i class="ti ti-slash text-sm leading-tight font-medium mx-2"></i>
      </a>
   </li>
   <li class="inline-flex items-center text-sm font-semibold text-gray-800 truncate dark:text-gray-200 leading-tight" aria-current="page">
      Application
   </li>
</ol>
            
                                                    

   
<ol class="flex items-center whitespace-nowrap" aria-label="Breadcrumb">
   <li class="inline-flex items-center">
      <a class="flex items-center text-sm text-gray-500 hover:text-primary focus:outline-none focus:text-primary dark:focus:text-primary leading-tight" href="#">
      <i class="ti ti-home text-lg leading-tight font-medium  me-3"></i>
      Home
      </a>
      <i class="ti ti-chevron-right text-sm leading-tight mx-2 font-medium"></i>
   </li>
   <li class="inline-flex items-center">
      <a class="flex items-center text-sm text-gray-500 hover:text-primary focus:outline-none focus:text-primary dark:focus:text-primary leading-tight" href="#">
      <i class="ti ti-apps text-lg leading-tight font-medium me-3"></i>
      App Center
      <i class="ti ti-chevron-right text-sm leading-tight mx-2 font-medium"></i>
      </a>
   </li>
   <li class="inline-flex items-center text-sm font-semibold text-gray-800 truncate dark:text-gray-200" aria-current="page">
      Application
   </li>
</ol>
            
                                                    

   
<ol class="flex items-center whitespace-nowrap p-2 border-y border-gray-200 dark:border-gray-700" aria-label="Breadcrumb">
   <li class="inline-flex items-center">
      <a class="flex items-center text-sm text-gray-500 hover:text-primary focus:outline-none focus:text-primary dark:focus:text-primary leading-tight" href="#">
      <i class="ti ti-home text-lg leading-tight font-medium  me-3"></i>
      Home
      </a>
      <i class="ti ti-chevron-right text-sm leading-tight mx-2 font-medium"></i>
   </li>
   <li class="inline-flex items-center">
      <a class="flex items-center text-sm text-gray-500 hover:text-primary focus:outline-none focus:text-primary dark:focus:text-primary leading-tight" href="#">
      <i class="ti ti-apps text-lg leading-tight font-medium me-3"></i>
      App Center
      <i class="ti ti-chevron-right text-sm leading-tight mx-2 font-medium"></i>
      </a>
   </li>
   <li class="inline-flex items-center text-sm font-semibold text-gray-800 truncate dark:text-gray-200" aria-current="page">
      Application
   </li>
</ol>
            
                                                    

   
<ol class="flex items-center whitespace-nowrap" aria-label="Breadcrumb">
   <li class="inline-flex items-center">
      <a class="flex items-center text-sm text-gray-500 hover:text-primary focus:outline-none focus:text-primary dark:focus:text-primary leading-tight" href="#">
      Home
      </a>
      <i class="ti ti-chevron-right text-sm leading-tight mx-2 font-medium"></i>
   </li>
   <li class="inline-flex items-center">
      <i class="ti ti-dots text-lg leading-tight font-medium"></i>
      <i class="ti ti-chevron-right text-sm leading-tight font-medium mx-2"></i>
   </li>
   <li class="inline-flex items-center text-sm font-semibold text-gray-800 truncate dark:text-gray-200" aria-current="page">
      Application
   </li>
</ol>
            
                                                    

   
<ol class="flex items-center whitespace-nowrap" aria-label="Breadcrumb">
   <li class="inline-flex items-center py-1.5 px-2">
      <a class="flex items-center text-sm text-gray-500 hover:text-primary focus:outline-none focus:text-primary dark:focus:text-primary" href="#">
      Home
      </a>
      <i class="ti ti-chevron-left text-sm leading-tight font-medium ms-2"></i>
   </li>
   <li class="inline-flex items-center text-sm">
      <div class="hs-dropdown relative inline-flex [--placement:top-left]">
         <button id="hs-breadcrumb-dropdown" type="button" class="hs-dropdown-toggle py-1.5 px-2 inline-flex items-center gap-x-2 text-sm font-medium rounded-md border border-gray-200 text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:text-primary disabled:opacity-50 disabled:pointer-events-none dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:text-primary">
         <i class="ti ti-dots-vertical text-lg leading-tight font-medium"></i>
         App Center
         </button>
         <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-48 hidden z-10 transition-[margin,opacity] opacity-0 duration-300 mb-2 bg-white shadow-md rounded-md p-2 dark:bg-gray-800 dark:border dark:border-gray-700 dark:divide-gray-700" aria-labelledby="hs-breadcrumb-dropdown">
            <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:text-primary dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:text-primary" href="#">
            Projects
            </a>
            <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:text-primary dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:focus:text-primary" href="#">
            Preline
            </a>
         </div>
      </div>
      <i class="ti ti-chevron-left text-sm ms-2 leading-tight font-medium"></i>
   </li>
   <li class="inline-flex items-center py-1.5 px-2 text-sm font-semibold text-gray-800 truncate dark:text-gray-200" aria-current="page">
      Application
   </li>
</ol>
            
                                                    

   
<div class="flex flex-col gap-4">
   <ol class="flex items-center whitespace-nowrap py-2 px-4 rounded-md bg-lightprimary dark:bg-darkprimary" aria-label="Breadcrumb">
      <li class="inline-flex items-center">
         <a class="flex items-center text-sm text-primary hover:text-primary focus:outline-none focus:text-primary dark:focus:text-primary leading-tight" href="#">
         Home
         </a>
         <i class="ti ti-chevron-right text-gray-500 text-sm leading-tight font-medium mx-2"></i>
      </li>
      <li class="inline-flex items-center">
         <a class="flex items-center text-sm text-primary hover:text-primary focus:outline-none focus:text-primary dark:focus:text-primary leading-tight" href="#">
         App Center
         <i class="ti ti-chevron-right text-sm text-gray-500 leading-tight font-medium mx-2"></i>
         </a>
      </li>
      <li class="inline-flex items-center text-sm font-semibold text-primary truncate dark:text-primary leading-tight" aria-current="page">
         Application
      </li>
   </ol>
   <ol class="flex items-center whitespace-nowrap py-2 px-4 rounded-md bg-lightsecondary dark:bg-darksecondary" aria-label="Breadcrumb">
      <li class="inline-flex items-center">
         <a class="flex items-center text-sm text-secondary hover:text-secondary focus:outline-none focus:text-secondary dark:focus:text-secondary leading-tight" href="#">
         Home
         </a>
         <i class="ti ti-chevron-right text-gray-500 text-sm leading-tight font-medium mx-2"></i>
      </li>
      <li class="inline-flex items-center">
         <a class="flex items-center text-sm text-secondary hover:text-secondary focus:outline-none focus:text-secondary dark:focus:text-secondary leading-tight" href="#">
         App Center
         <i class="ti ti-chevron-right text-sm text-gray-500 leading-tight font-medium mx-2"></i>
         </a>
      </li>
      <li class="inline-flex items-center text-sm font-semibold text-secondary truncate dark:text-secondary leading-tight" aria-current="page">
         Application
      </li>
   </ol>
   <ol class="flex items-center whitespace-nowrap py-2 px-4 rounded-md bg-lightsuccess dark:bg-darksuccess" aria-label="Breadcrumb">
      <li class="inline-flex items-center">
         <a class="flex items-center text-sm text-success hover:text-success focus:outline-none focus:text-success dark:focus:text-success leading-tight" href="#">
         Home
         </a>
         <i class="ti ti-chevron-right text-gray-500 text-sm leading-tight font-medium mx-2"></i>
      </li>
      <li class="inline-flex items-center">
         <a class="flex items-center text-sm text-success hover:text-success focus:outline-none focus:text-success dark:focus:text-success leading-tight" href="#">
         App Center
         <i class="ti ti-chevron-right text-sm text-gray-500 leading-tight font-medium mx-2"></i>
         </a>
      </li>
      <li class="inline-flex items-center text-sm font-semibold text-success truncate dark:text-success leading-tight" aria-current="page">
         Application
      </li>
   </ol>
   <ol class="flex items-center whitespace-nowrap py-2 px-4 rounded-md bg-lightwarning dark:bg-darkwarning" aria-label="Breadcrumb">
      <li class="inline-flex items-center">
         <a class="flex items-center text-sm text-warning hover:text-warning focus:outline-none focus:text-warning dark:focus:text-warning leading-tight" href="#">
         Home
         </a>
         <i class="ti ti-chevron-right text-gray-500 text-sm leading-tight font-medium mx-2"></i>
      </li>
      <li class="inline-flex items-center">
         <a class="flex items-center text-sm text-warning hover:text-warning focus:outline-none focus:text-warning dark:focus:text-warning leading-tight" href="#">
         App Center
         <i class="ti ti-chevron-right text-sm text-gray-500 leading-tight font-medium mx-2"></i>
         </a>
      </li>
      <li class="inline-flex items-center text-sm font-semibold text-warning truncate dark:text-warning leading-tight" aria-current="page">
         Application
      </li>
   </ol>
   <ol class="flex items-center whitespace-nowrap py-2 px-4 rounded-md bg-lighterror dark:bg-darkerror" aria-label="Breadcrumb">
      <li class="inline-flex items-center">
         <a class="flex items-center text-sm text-error hover:text-error focus:outline-none focus:text-error dark:focus:text-error leading-tight" href="#">
         Home
         </a>
         <i class="ti ti-chevron-right text-gray-500 text-sm leading-tight font-medium mx-2"></i>
      </li>
      <li class="inline-flex items-center">
         <a class="flex items-center text-sm text-error hover:text-error focus:outline-none focus:text-error dark:focus:text-error leading-tight" href="#">
         App Center
         <i class="ti ti-chevron-right text-sm text-gray-500 leading-tight font-medium mx-2"></i>
         </a>
      </li>
      <li class="inline-flex items-center text-sm font-semibold text-error truncate dark:text-error leading-tight" aria-current="page">
         Application
      </li>
   </ol>
</div>