Components
Breadcrumb
Header crumbs: 28px ghost links, a 50 % “/” separator, the current page in primary ink (optionally a rename button), a back link and a loading placeholder. Crumbs truncate before the page title.
Header crumbs
Crumb = ghost sm Button (28px, radius 7, padding 10, 14px w400, primary ink). The list is 14/20 secondary; separators are aria-hidden.
light
dark
Truncation
When space runs out the crumb shrinks first (flex-shrink 4, min 40px) and shows its full name in a tooltip; the current page keeps priority.
Variants
Editable page (rename button, 14/20 w500, radius 6), back link (ArrowLeft 16 + parent, starts 10px before the content edge) and the loading placeholder.