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

export default function BreadcrumbsDemo() {
  return (
    <div className="space-y-4 p-6">
      <Breadcrumbs
        items={[
          { href: "/customers", label: "Customers" },
          { href: "/customers/42", label: "Jana Nováková" },
          { label: "Order 1042" },
        ]}
      />
      {/* A label that is still loading shows "…" */}
      <Breadcrumbs
        items={[{ href: "/projects", label: "Projects" }, { label: null }]}
      />
      <Breadcrumbs
        home={{ href: "/dashboard", label: "Dashboard" }}
        items={[{ label: "Reports" }]}
      />
      <Breadcrumbs
        home={false}
        items={[{ href: "/settings", label: "Settings" }, { label: "Users" }]}
      />
    </div>
  );
}