Breadcrumbs

Four crumbs from an array of { label, href? }, a home glyph on the root, and the current page as text carrying aria-current="page" — a real <nav aria-label="Breadcrumb"> over an <ol>. Tab through it: every ancestor is a link, the last one never is.

Seven levels in four slots: root, menu, parent, current. Open the ellipsis — the hidden levels are real links in an overlay, so the trail's width never changes. An inline expander would put back exactly the width the collapse just saved, which on a narrow screen is the failure it exists to prevent. The ellipsis is the button itself, so there is no control nested inside another.

Held at 20rem. Labels truncate and the chevron never lands on a line of its own — each separator lives inside its own crumb's <li> and the list does not wrap. The root keeps its glyph and drops its label to sr-only, which buys the width back without losing the accessible name.

Workspaces has no href here: it is a segment in the URL, not a page. It renders as plain text rather than a link that would 404, and inside the overflow menu it stays listed but inert, so the depth of the trail is still readable.

A skeleton at the real row height, aria-hidden so nothing reads three grey bars aloud. The trail lands without moving the heading underneath it.