Breadcrumbs

Show where the page sits in the hierarchy and link back up.

CSS only components/breadcrumbs.css

Trail

<nav class="dsgn-breadcrumbs" aria-label="Breadcrumb example"><ol><li><a href="#breadcrumbs">Invoices</a></li><li><a href="#breadcrumbs">2026</a></li><li><a aria-current="page">2026-114</a></li></ol></nav>

Usage

body-s, text-muted links that underline on hover (a navigation block, so colour plus position is enough; links inside running text use .dsgn-link). The current page is base/text and not a link target. Separators are chevron_right glyphs drawn by CSS, so screen readers read a clean list. Long trails wrap.

Details

Classes: .dsgn-breadcrumbs
Tokens used: --dsgn-focus --dsgn-focus-offset --dsgn-focus-width --dsgn-font-icon --dsgn-font-sans --dsgn-font-size-body-s --dsgn-font-weight-medium --dsgn-icon-grade --dsgn-line-height-body-s --dsgn-radius-s --dsgn-space-4 --dsgn-text --dsgn-text-muted
In Figma: Breadcrumbs
Import alone: dsgn.systems/components/breadcrumbs.css