Breadcrumb

<nav class="flex flex-col">
  <ul class="flex items-center text-p2 gap-8px">
    <!-- route -->
    <li class="flex items-center gap-8px text-black-600 whitespace-nowrap">
      <a href="#"
        class="no-underline text-black-600 hover:text-foreground dark:text-black-100">
        Description
      </a>
    </li>
    <li class="flex items-center gap-8px text-black-600 whitespace-nowrap">
      <svg
        width="20"
        height="20"
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <g>
          <path d="M7.5 15L12.5 10L7.5 5"
            stroke="#989AA3"
            stroke-linecap="round"
            stroke-linejoin="round"/>
        </g>
      </svg>
      <a href="#"
        class="no-underline text-black-600 hover:text-foreground dark:text-black-100">
        Description
      </a>
    </li>
    <li class="flex items-center gap-8px text-black-600 whitespace-nowrap">
      <svg
        width="20"
        height="20"
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <g>
          <path d="M7.5 15L12.5 10L7.5 5"
            stroke="#989AA3"
            stroke-linecap="round"
            stroke-linejoin="round"/>
        </g>
      </svg>
      <a href="#"
        class="no-underline text-black-600 hover:text-foreground dark:text-black-100">
        Description
      </a>
    </li>

    <!-- current-page -->
    <li class="flex items-center gap-8px text-foreground font-bold whitespace-nowrap">
      <svg
        width="20"
        height="20"
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <g>
          <path d="M7.5 15L12.5 10L7.5 5"
            stroke="#989AA3"
            stroke-linecap="round"
            stroke-linejoin="round"/>
        </g>
      </svg>
      Description
    </li>
  </ul>
</nav>