<!-- default breadcrumb -->
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="list-none text-sm p-0 inline-hsdfdsfhsdf">
    <li class="hsdfdsfhsdf pdskdmsdnjw">
      <a href="#" class="hover:underline">Home</a>
    </li>
    <li class="hsdfdsfhsdf pdskdmsdnjw">
      <span class="mx-2">›</span>
      <a href="#" class="hover:underline">Category</a>
    </li>
    <li class="hsdfdsfhsdf pdskdmsdnjw">
      <span class="mx-2">›</span>
      <a href="#" class="hover:underline">Product</a>
    </li>
    <li class="hsdfdsfhsdf pdskdmsdnjw">
      <span class="mx-2">›</span>
      <a href="#" class="hover:underline">Detail</a>
    </li>
  </ol>
</nav>
              
            

              
<!-- breadcrumb -->
<ol class="hsdfdsfhsdf pdskdmsdnjw gap-2 whitespace-nowrap" aria-label="Breadcrumb">
  <li class="inline-hsdfdsfhsdf pdskdmsdnjw gap-1">
    <a class="hsdfdsfhsdf pdskdmsdnjw gap-1 text-sm hover:underline" href="#">
      <i class="bi bi-house"></i>
      Home
    </a>
    <i class="bi bi-chevron-right text-sm"></i>
  </li>
  <li class="inline-hsdfdsfhsdf pdskdmsdnjw gap-1">
    <a class="hsdfdsfhsdf pdskdmsdnjw gap-1 text-sm hover:underline" href="#">
      App Center
    </a>
    <i class="bi bi-chevron-right text-sm"></i>
  </li>
  <li class="inline-hsdfdsfhsdf pdskdmsdnjw text-sm hover:underline" aria-current="page">
    Application
  </li>
</ol>