Breadcrumbs

Navigation

About

A breadcrumb trail showing the path from the home page to the current page, with a home icon, truncation of long labels, and automatic collapsing with an expandable "…" when there are too many crumbs to fit.

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";
import { ChevronRight } from "lucide-react";

const path = [
  { href: "/projects", label: "Projects" },
  { href: "/projects/website-redesign", label: "Website redesign" },
  { href: "/projects/website-redesign/pages", label: "Pages" },
  { href: "/projects/website-redesign/pages/about", label: "About us" },
  { label: "Edit" },
];

export default function CollapsedBreadcrumbsDemo() {
  return (
    <div className="space-y-4 p-6">
      {/* Home, "…" and the last two - the "…" shows the whole path */}
      <Breadcrumbs itemsAfterCollapse={2} items={path} maxItems={4} />
      <Breadcrumbs
        home={false}
        items={path}
        separator={<ChevronRight size={14} />}
      />
      <Breadcrumbs home={false} items={path} separator="/" />
    </div>
  );
}