Breadcrumbs

1"use client";
2 
3import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
4import * as React from "react";
5 
6export type BreadcrumbItem = {
7  label: React.ReactNode;
8  href?: string;
9  icon?: React.ReactNode;
10};
11 
12export type BreadcrumbsProps = Omit<
13  React.HTMLAttributes<HTMLElement>,
14  "onChange"
15> & {
16  items: BreadcrumbItem[];
17  /** Collapse the middle when there are more than this many items (0 = never). */
18  maxItems?: number;
19  /** Separator node between crumbs. */
20  separator?: React.ReactNode;
21  /** Allow the collapsed middle to expand into a popover. */
22  collapsible?: boolean;
23  /** Called when a crumb is clicked, with its href. */
24  onNavigate?: (href: string) => void;
25};
26 
27const DefaultSeparator = (
28  <svg
29    aria-hidden="true"
30    viewBox="0 0 24 24"
31    className="h-3.5 w-3.5 text-muted-foreground/50"
32    fill="none"
33    stroke="currentColor"
34    strokeWidth="2"
35    strokeLinecap="round"
36    strokeLinejoin="round"
37  >
38    <path d="m9 18 6-6-6-6" />
39  </svg>
40);
41 
42type Entry =
43  | { kind: "crumb"; item: BreadcrumbItem; index: number; isLast: boolean }
44  | { kind: "ellipsis"; hidden: BreadcrumbItem[] };
45 
46let crumbSeed = 0;
47 
48const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(
49  (
50    {
51      items,
52      maxItems = 0,
53      separator = DefaultSeparator,
54      collapsible = true,
55      onNavigate,
56      className,
57      ...props
58    },
59    ref,
60  ) => {
61    const reduceMotion = useReducedMotion();
62    const hoverId = React.useMemo(() => `crumb-hover-${crumbSeed++}`, []);
63    const [expanded, setExpanded] = React.useState(false);
64    const [hovered, setHovered] = React.useState<string | null>(null);
65    const popRef = React.useRef<HTMLLIElement>(null);
66 
67    React.useEffect(() => {
68      if (!expanded) return;
69      const onDown = (e: MouseEvent) => {
70        if (popRef.current && !popRef.current.contains(e.target as Node)) {
71          setExpanded(false);
72        }
73      };
74      document.addEventListener("mousedown", onDown);
75      return () => document.removeEventListener("mousedown", onDown);
76    }, [expanded]);
77 
78    const spring = reduceMotion
79      ? { duration: 0 }
80      : ({ type: "spring", stiffness: 520, damping: 32 } as const);
81 
82    // Collapse is structural — independent of whether the ellipsis popover is
83    // open. Gating on `expanded` used to expand the whole trail inline when the
84    // dots were clicked, which made the ellipsis vanish instead of opening the
85// … truncated