Breadcrumb Overflow Menu

1"use client";
2 
3import {
4  useCallback,
5  useEffect,
6  useId,
7  useMemo,
8  useRef,
9  useState,
10  type KeyboardEvent as ReactKeyboardEvent,
11  type ReactNode,
12} from "react";
13import { createPortal } from "react-dom";
14 
15// A breadcrumb that gives way from the middle. When the trail can't fit, the
16// root and the last two levels survive and everything between them folds into
17// one "…" button that opens a menu of the hidden levels — so nothing is lost
18// to keyboard or assistive tech, it just moves.
19//
20// Every width used by the fit calculation is read from a second, hidden copy
21// of the FULL uncollapsed trail (absolute, visibility:hidden, nowrap) that sits
22// outside flow and never changes size. Measuring the visible list instead is
23// the classic way to break this: collapsing shrinks the measured content, which
24// says "it fits", which expands, which overflows — permanent jitter at any
25// width near the threshold. The "…" chip's own width is in the ghost layer and
26// in the budget, and everything is remeasured once on document.fonts.ready
27// because a webfont swap moves every number.
28//
29// The current level carries a 2px accent underline that sweeps 0 → text width
30// whenever the last crumb's id changes (the span is keyed on it, so arriving
31// somewhere new re-runs the sweep). Reduced motion renders it at full width
32// with no transition and mounts the menu with no fade.
33 
34export type Crumb = {
35  id: string;
36  label: string;
37  /** Renders an <a>. Omit and the crumb renders a <button>. */
38  href?: string;
39};
40 
41export interface WornPathProps {
42  /** Ordered root → current. The last item is the current page. */
43  items: Crumb[];
44  /** Rendered between crumbs. Default "/". */
45  separator?: ReactNode;
46  /** Crumbs at the head that can never collapse. Default 1. */
47  minVisibleHead?: number;
48  /** Crumbs at the tail that can never collapse, current included. Default 2. */
49  minVisibleTail?: number;
50  onNavigate?: (item: Crumb, index: number) => void;
51  ariaLabel?: string;
52  className?: string;
53}
54 
55// re-expanding costs 24px more room than staying collapsed, so a container
56// resting exactly on the threshold settles instead of oscillating
57const HYSTERESIS = 24;
58 
59const crumbClass = (current: boolean) =>
60  current
61    ? "whitespace-nowrap px-1 py-0.5 text-sm font-medium text-foreground"
62    : [
63        "whitespace-nowrap rounded-sm px-1 py-0.5 text-sm text-muted",
64        "transition-colors duration-150 ease-out",
65// … truncated