A breadcrumb trail looks like the simplest nav in the system: links and a separator. The work is at the edges: what happens when the pointer moves along the row, and what happens when the trail is longer than the screen. Breadcrumbs handles both without adding an extra DOM node per crumb.

Every crumb but the last is an <a> tinted text-muted-foreground; the last is a plain <span> filled bg-muted and marked aria-current="page". An aria-hidden chevron sits between each pair. The whole row is a motion.ol so AnimatePresence can cross-fade crumbs in and out when the items array changes:

Every link shares a single motion.span bound by one layoutId; hovering a crumb does not toggle a background of its own. It only renders under whichever crumb is currently hovered, so moving the pointer along the trail springs that one element from box to box:

stiffness: 520, damping: 32 is the same snap used across GodUI's small UI springs. It is fast enough to keep up with a quick mouse sweep and damped enough that it doesn't wobble on arrival. onMouseEnter sets hovered to the crumb's key; leaving the <nav> entirely clears it in one onMouseLeave at the root instead of per-crumb listeners.

Pass maxItems, and once items.length exceeds it the middle crumbs fold into a single ellipsis button: head crumb, …, then the last maxItems − 1 crumbs. Clicking the ellipsis doesn't navigate; it opens a popover listing the crumbs it hides:

The popover springs in on scale: 0.92 → 1, y: -4 → 0, the same overlay entrance used by every other panel in the system, and a mousedown listener outside popRef closes it. Below maxItems, a second, CSS-only collapse kicks in on narrow viewports: crumbs past the first hide under max-sm:hidden and a static … takes their place. This collapse uses CSS instead of a useEffect viewport check because in the docs preview the component runs inside a portaled iframe but in the parent's JS realm, so only a media query sees the iframe's width.

One items array, one shared hover pill, and a collapse that steps down from maxItems to a CSS ellipsis on narrow screens. The trail needs no markup beyond the pieces above.