Breadcrumb Dropdown

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6/* ═══════════════════════════════════════════════════════════
7   Breadcrumb Dropdown — Inline-expanding collapsible path.
8 
9   Kills the floating dropdown entirely. Instead of hovering
10   a trigger to summon a disembodied menu, click the ··· and
11   the hidden path segments unfold INLINE — items stagger in
12   from the left, each 50ms apart, expanding the breadcrumb
13   to reveal the full path. Click again to snap it closed.
14 
15   Three distinct paradigms across the breadcrumb family:
16     • separator: hover affects OTHER items      (cascade)
17     • icon:      a HIGHLIGHT slides to target   (pill)
18     • dropdown:  HIDDEN CONTENT unfolds in place (expand)
19 
20   The trigger icon morphs between three dots (collapsed)
21   and a dash (expanded) with a scale + rotate crossfade.
22 
23   Curve: cubic-bezier(0.0, 0.0, 0.2, 1) — Material
24   standard deceleration. No spring overshoot — the stagger
25   choreography is the motion interest, not the curve.
26   ═══════════════════════════════════════════════════════════ */
27 
28interface BreadcrumbDropdownItem {
29  label: string;
30  href?: string;
31}
32 
33interface BreadcrumbDropdownProps {
34  items: BreadcrumbDropdownItem[];
35  maxVisible?: number;
36  className?: string;
37}
38 
39export function BreadcrumbDropdown({
40  items,
41  maxVisible = 3,
42  className,
43}: BreadcrumbDropdownProps) {
44  const [expanded, setExpanded] = React.useState(false);
45  const [itemVisible, setItemVisible] = React.useState<boolean[]>([]);
46  const staggerTimers = React.useRef<ReturnType<typeof setTimeout>[]>([]);
47 
48  const shouldCollapse = items.length > maxVisible;
49  const hiddenItems = shouldCollapse
50    ? items.slice(1, items.length - (maxVisible - 2))
51    : [];
52  const visibleEnd = shouldCollapse
53    ? items.slice(items.length - (maxVisible - 2))
54    : items.slice(1);
55  const hiddenCount = hiddenItems.length;
56 
57  const toggle = React.useCallback(() => {
58    staggerTimers.current.forEach(clearTimeout);
59    staggerTimers.current = [];
60 
61    if (!expanded) {
62      setExpanded(true);
63      setItemVisible(new Array(hiddenCount).fill(false));
64      for (let i = 0; i < hiddenCount; i++) {
65        const timer = setTimeout(() => {
66// … truncated