Breadcrumbs

Breadcrumbs prints the trail to the current page in the label role: ancestors as underlined links, the current page last as plain text, 10 px play glyphs between them. Below the sm container width only the parent shows, as a back step. Crumbs print in the ink, never the secondary ink (D-N104).

Example#

Usage#

Use breadcrumbs on pages that sit deep in a hierarchy, such as a case study inside Work: the trail from the top section to here. Top-level pages need none.

• Items. Ancestors are links; the current page is last, as plain text with aria-current="page".
• Phones. Below the sm width only the parent shows, as a back step.

Anatomy#

Volume#

Reading layer: identical at every volume.

• Quiet

  Docs, forms, legal and long reads. Flat inks, no art in motion.

• Studio

  The site default. Art on its own plates, one display moment per view.

• Press

  Hero moments, covers and campaigns. Halftone fields and the second ink.

• Rave

  Launches, posters and the 404. Every ink, and the words still win.

Content#

• Use the pages' own titles, shortened only if they are long.
• Never put the site's name or "Home" first when the logo already links home.

Do and don't#

Accessibility#

• A nav named "Breadcrumb" around an ordered list; the current page carries aria-current="page" and is not a link.
• The separators are hidden from assistive tech and mirror under dir="rtl".
• Links are underlined, so they read as links without colour.

The colour pairs it prints, with their contrast on both papers:

Props#

Tokens#

Changelog#