Vibedex.io
Back to gallery
breadcrumbsBeginner

Breadcrumb Trail

A horizontal breadcrumb with chevron separators and a current-page indicator.

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a breadcrumb trail with Tailwind: an ordered list of links separated by chevron icons. The last item is the current page (no link, slightly bolder). Truncate with ellipsis if a label is too long. Use small text and muted colors with a hover state on the links.

Code

html
<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/breadcrumbs/1.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-app-breadcrumbs
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="flex justify-center p-6 w-full">
<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
            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
            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>
  </div>
</div>