Breadcrumb Fold

Navigation 14

About

A breadcrumb trail that compresses ancestor segments into narrow pleated slivers so an unbounded number of levels fits a fixed width, with hover or focus expanding any segment back to its full label while neighbors redistribute space.

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

Code

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

Usage.tsx

import { BellowsCrumb } from "@/components/ui/breadcrumb-fold";

export default function BreadcrumbFoldDemo() {
  return (
    <div className="flex w-full max-w-xl items-center justify-center p-10">
      <BellowsCrumb
        items={[
          { id: "home", label: "Home", href: "#" },
          { id: "projects", label: "Projects", href: "#" },
          { id: "design-system", label: "Design System", href: "#" },
          { id: "components", label: "Components", href: "#" },
          { id: "breadcrumb-fold", label: "Breadcrumb Fold" },
        ]}
      />
    </div>
  );
}