Application Breadcrumbs Grouped with chevron divider

Live Preview
<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>

Related components

More items from the merged UI library.

View all