Breadcrumbs

Navigation

About

Display the current page location within a navigational hierarchy.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Breadcrumbs to your project and fits it to your theme.

Code

How Breadcrumbs is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Breadcrumbs } from "@/components/ui/heroui-breadcrumbs";

function CustomSeparator() {
  return (
    <svg
      className="h-3.5 w-3.5 text-zinc-400 dark:text-zinc-500"
      viewBox="0 0 256 512"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M249.3 235.8c10.2 12.6 9.5 31.1-2.2 42.8l-128 128c-9.2 9.2-22.9 11.9-34.9 6.9S64.5 396.9 64.5 384l0-256c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l128 128 2.2 2.4z"
        fill="currentColor"
      />
    </svg>
  );
}

export default function BreadcrumbsCustomSeparatorDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
      <Breadcrumbs separator={<CustomSeparator />}>
        <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
        <Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>
        <Breadcrumbs.Item href="#">Electronics</Breadcrumbs.Item>
        <Breadcrumbs.Item href="#">Laptop</Breadcrumbs.Item>
      </Breadcrumbs>
    </div>
  );
}

export { BreadcrumbsCustomSeparatorDemo };