Breadcrumb Trail

Build a breadcrumb trail that grows and collapses. Structure: a nav with an aria-label, containing an ordered list of crumbs separated by slashes. The rule most implementations break: THE LAST CRUMB IS NOT A LINK. It is where you already are. Render it as a span with aria-current="page". Making it clickable teaches people the trail lies, because the first time they press it nothing happens. Every ancestor crumb truncates the trail to that level in one click. That is the entire job of a breadcrumb, and a trail you cannot climb is just a label. Motion: a layout animation on each item (framer-motion layout, or a View Transition) on a spring at stiffness 480, damping 38, with new crumbs entering from x -6. Entering from the side the path grows from makes the arrival match the direction of travel, and the layout animation stops the row snapping as it reflows. Mark the separators aria-hidden. A screen reader should hear a list of places, not a string of punctuation. Under prefers-reduced-motion, let crumbs appear and disappear in place with no slide. The trail still reads correctly at every depth. Colors as tokens: muted ink for the ancestor links, primary ink for the current page, hairline for the separators. Use neutral placeholder path names. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.