Vibedex.io
Back to gallery
breadcrumbsBeginner

Boxed Breadcrumbs

Breadcrumbs inside a rounded muted background bar.

Claude prompt

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

Build breadcrumbs that sit inside a soft gray rounded background bar with a home icon as the first crumb and slash separators between segments. Padded, single line, max-width container so it works inside dashboards.

Code

html
<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/breadcrumbs/3.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-app-breadcrumbs-bg
-->
<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"
            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
            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>
  </div>
</div>