Skip to content
HyperUI

No results found.

Back to application components

Breadcrumbs

Responsive breadcrumb navigation components for tracking location within websites and applications. Perfect for ecommerce, dashboards, and multi-level navigation with customizable dividers and icons.

5/5 Dark Mode Updated: Jul 4, 2026

Base

markmead

<nav aria-label="Breadcrumb">
  <ol class="flex items-center gap-1 text-sm text-gray-700">
    <li>
      <a href="#" class="block transition-colors hover:text-gray-900"> Home </a>
    </li>

    <li class="rtl:rotate-180">
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        class="size-4"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd"
          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
          clip-rule="evenodd"
        />
      </svg>
    </li>

    <li>
      <a href="#" class="block transition-colors hover:text-gray-900"> Category </a>
    </li>

    <li class="rtl:rotate-180">
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        class="size-4"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd"
          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
          clip-rule="evenodd"
        />
      </svg>
    </li>

    <li>
      <a href="#" class="block transition-colors hover:text-gray-900"> Product </a>
    </li>
  </ol>
</nav>

Base (Dark)

markmead

<nav aria-label="Breadcrumb">
  <ol class="flex items-center gap-1 text-sm text-gray-700 dark:text-gray-200">
    <li>
      <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
        Home
      </a>
    </li>

    <li class="rtl:rotate-180">
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        class="size-4"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd"
          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
          clip-rule="evenodd"
        />
      </svg>
    </li>

    <li>
      <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
        Category
      </a>
    </li>

    <li class="rtl:rotate-180">
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        class="size-4"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd"
          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
          clip-rule="evenodd"
        />
      </svg>
    </li>

    <li>
      <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
        Product
      </a>
    </li>
  </ol>
</nav>

Base with home icon

markmead

<nav aria-label="Breadcrumb">
  <ol class="flex items-center gap-1 text-sm text-gray-700">
    <li>
      <a href="#" class="block transition-colors hover:text-gray-900" aria-label="Home">
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          class="size-4"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
          />
        </svg>
      </a>
    </li>

    <li class="rtl:rotate-180">
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        class="size-4"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd"
          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
          clip-rule="evenodd"
        />
      </svg>
    </li>

    <li>
      <a href="#" class="block transition-colors hover:text-gray-900"> Category </a>
    </li>

    <li class="rtl:rotate-180">
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        class="size-4"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd"
          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
          clip-rule="evenodd"
        />
      </svg>
    </li>

    <li>
      <a href="#" class="block transition-colors hover:text-gray-900"> Product </a>
    </li>
  </ol>
</nav>

Base with home icon (Dark)

markmead

<nav aria-label="Breadcrumb">
  <ol class="flex items-center gap-1 text-sm text-gray-700 dark:text-gray-200">
    <li>
      <a
        href="#"
        class="block transition-colors hover:text-gray-900 dark:hover:text-white"
        aria-label="Home"
      >
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          class="size-4"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
          />
        </svg>
      </a>
    </li>

    <li class="rtl:rotate-180">
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        class="size-4"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd"
          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
          clip-rule="evenodd"
        />
      </svg>
    </li>

    <li>
      <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
        Category
      </a>
    </li>

    <li class="rtl:rotate-180">
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        class="size-4"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd"
          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
          clip-rule="evenodd"
        />
      </svg>
    </li>

    <li>
      <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
        Product
      </a>
    </li>
  </ol>
</nav>

Slash divider

mohdahsanrazakhan

<nav aria-label="Breadcrumb">
  <ol class="flex items-center gap-1 text-sm text-gray-700">
    <li>
      <a href="#" class="block transition-colors hover:text-gray-900"> Home </a>
    </li>

    <li class="rtl:rotate-180">
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="size-4"
      >
        <path stroke-linecap="round" stroke-linejoin="round" d="m9 20.247 6-16.5" />
      </svg>
    </li>

    <li>
      <a href="#" class="block transition-colors hover:text-gray-900"> Category </a>
    </li>

    <li class="rtl:rotate-180">
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="size-4"
      >
        <path stroke-linecap="round" stroke-linejoin="round" d="m9 20.247 6-16.5" />
      </svg>
    </li>

    <li>
      <a href="#" class="block transition-colors hover:text-gray-900"> Product </a>
    </li>
  </ol>
</nav>

Slash divider (Dark)

mohdahsanrazakhan

<nav aria-label="Breadcrumb">
  <ol class="flex items-center gap-1 text-sm text-gray-700 dark:text-gray-200">
    <li>
      <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
        Home
      </a>
    </li>

    <li class="rtl:rotate-180">
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="size-4"
      >
        <path stroke-linecap="round" stroke-linejoin="round" d="m9 20.247 6-16.5" />
      </svg>
    </li>

    <li>
      <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
        Category
      </a>
    </li>

    <li class="rtl:rotate-180">
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="size-4"
      >
        <path stroke-linecap="round" stroke-linejoin="round" d="m9 20.247 6-16.5" />
      </svg>
    </li>

    <li>
      <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
        Product
      </a>
    </li>
  </ol>
</nav>

Slash divider with home icon

mohdahsanrazakhan

<nav aria-label="Breadcrumb">
  <ol class="flex items-center gap-1 text-sm text-gray-700">
    <li>
      <a href="#" class="block transition-colors hover:text-gray-900" aria-label="Home">
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          class="size-4"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
          />
        </svg>
      </a>
    </li>

    <li class="rtl:rotate-180">
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="size-4"
      >
        <path stroke-linecap="round" stroke-linejoin="round" d="m9 20.247 6-16.5" />
      </svg>
    </li>

    <li>
      <a href="#" class="block transition-colors hover:text-gray-900"> Category </a>
    </li>

    <li class="rtl:rotate-180">
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="size-4"
      >
        <path stroke-linecap="round" stroke-linejoin="round" d="m9 20.247 6-16.5" />
      </svg>
    </li>

    <li>
      <a href="#" class="block transition-colors hover:text-gray-900"> Product </a>
    </li>
  </ol>
</nav>

Slash divider with home icon (Dark)

mohdahsanrazakhan

<nav aria-label="Breadcrumb">
  <ol class="flex items-center gap-1 text-sm text-gray-700 dark:text-gray-200">
    <li>
      <a
        href="#"
        class="block transition-colors hover:text-gray-900 dark:hover:text-white"
        aria-label="Home"
      >
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          class="size-4"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
          />
        </svg>
      </a>
    </li>

    <li class="rtl:rotate-180">
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="size-4"
      >
        <path stroke-linecap="round" stroke-linejoin="round" d="m9 20.247 6-16.5" />
      </svg>
    </li>

    <li>
      <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
        Category
      </a>
    </li>

    <li class="rtl:rotate-180">
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="size-4"
      >
        <path stroke-linecap="round" stroke-linejoin="round" d="m9 20.247 6-16.5" />
      </svg>
    </li>

    <li>
      <a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
        Product
      </a>
    </li>
  </ol>
</nav>

Grouped with chevron divider

markmead

<nav aria-label="Breadcrumb">
  <ol
    class="flex overflow-hidden rounded border border-gray-300 bg-white text-sm text-gray-700"
  >
    <li>
      <a
        href="#"
        class="block h-10 bg-gray-100 px-4 leading-10 transition-colors hover:text-gray-900"
      >
        Home
      </a>
    </li>

    <li class="relative flex items-center">
      <span
        class="absolute inset-y-0 -start-px h-10 w-4 bg-gray-100 [clip-path:_polygon(0_0,_0%_100%,_100%_50%)] rtl:rotate-180"
      >
      </span>

      <a href="#" class="block h-10 pr-4 pl-6 leading-10 transition-colors hover:text-gray-900">
        Category
      </a>
    </li>
  </ol>
</nav>

Grouped with chevron divider (Dark)

markmead

<nav aria-label="Breadcrumb">
  <ol
    class="flex overflow-hidden rounded border border-gray-300 bg-white text-sm text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
  >
    <li>
      <a
        href="#"
        class="block h-10 bg-gray-100 px-4 leading-10 transition-colors hover:text-gray-900 dark:bg-gray-700 dark:hover:text-white"
      >
        Home
      </a>
    </li>

    <li class="relative flex items-center">
      <span
        class="absolute inset-y-0 -start-px h-10 w-4 bg-gray-100 [clip-path:_polygon(0_0,_0%_100%,_100%_50%)] rtl:rotate-180 dark:bg-gray-700"
      >
      </span>

      <a
        href="#"
        class="block h-10 pr-4 pl-6 leading-10 transition-colors hover:text-gray-900 dark:hover:text-white"
      >
        Category
      </a>
    </li>
  </ol>
</nav>

Related components

View all application components