ComponentsBreadcrumb
Hello Yumma UI! 🎉

Breadcrumb

Shows the navigation path from the homepage to the current page location.

Chevrons

<nav class="d-f ai-c b-1 bc-silver-4 p-3 rad-0 fs-sm tc-silver-10">
  <a href="#" class="h:tc-black td-none">Dashboard</a>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    class="w-3 h-3 mx-2"
    viewBox="0 0 256 256"
  >
    <rect width="256" height="256" fill="none" />
    <polyline
      points="96 48 176 128 96 208"
      fill="none"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="16"
    />
  </svg>
  <a href="#" class="h:tc-black td-none">Profile</a>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    class="w-3 h-3 mx-2"
    viewBox="0 0 256 256"
  >
    <rect width="256" height="256" fill="none" />
    <polyline
      points="96 48 176 128 96 208"
      fill="none"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="16"
    />
  </svg>
  <span class="tc-black fw-600">Security</span>
</nav>

Collapsed

<nav class="d-f ai-c b-1 bc-silver-4 p-3 rad-0 fs-sm tc-silver-10">
  <a href="#" class="h:tc-black td-none">Dashboard</a>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    class="w-3 h-3 mx-2"
    viewBox="0 0 256 256"
  >
    <rect width="256" height="256" fill="none" />
    <polyline
      points="96 48 176 128 96 208"
      fill="none"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="16"
    />
  </svg>
  <span class="d-f ai-c jc-c">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="w-3 h-3"
      viewBox="0 0 256 256"
      fill="currentColor"
    >
      <rect width="256" height="256" fill="none" />
      <circle cx="128" cy="128" r="12" />
      <circle cx="196" cy="128" r="12" />
      <circle cx="60" cy="128" r="12" />
    </svg>
  </span>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    class="w-3 h-3 mx-2"
    viewBox="0 0 256 256"
  >
    <rect width="256" height="256" fill="none" />
    <polyline
      points="96 48 176 128 96 208"
      fill="none"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="16"
    />
  </svg>
  <span class="tc-black fw-600">Security</span>
</nav>