Breadcrumbs

Navigation

About

A navigation component that shows the current page's location as a trail of links separated by a customizable separator, with slot-level styling for the list, items and separator.

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/breadcrumbs";

export default function BreadcrumbsCustomSeparatorDemo() {
  return (
    <Breadcrumbs aria-label="Breadcrumb" seperator="›">
      <a className="text-inherit hover:underline" href="/">
        Home
      </a>
      <a className="text-inherit hover:underline" href="/products">
        Products
      </a>
      <span className="text-neutral-900 dark:text-neutral-50">Details</span>
    </Breadcrumbs>
  );
}