Skip to main content

Breadcrumbs

Breadcrumbs help users understand their current location within the hierarchy of a website or application. They provide context and allow for easy navigation to higher levels.

When to Use Breadcrumbs​

  • When users need to navigate deep into a system or app.
  • To show the user where they are and how they got there.
  • In systems with structured data and multiple levels (e.g., Media Metadata or File Repositories).

Accessibility Considerations​

  • Use <nav aria-label="Breadcrumb"> to help screen readers identify the element.
  • The current page should be visually and semantically distinct using aria-current="page".
  • Breadcrumbs should not rely solely on color to indicate status.

Token Reference​

The following design tokens are used for neutral breadcrumbs, ensuring consistent interaction states.

PreviewStateDesign Token NameColor Value

Example HTML​

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li aria-current="page">Current Page</li>
  </ol>
</nav>

Design Tokens in CSS​

:root {
  --interactive-primary-neutral-enabled: #1e2028;
  --interactive-primary-neutral-hovered: #282a36;
  --interactive-primary-neutral-focused: #1e2028;
  --interactive-primary-neutral-pressed: #323442;
  --interactive-primary-neutral-ring: #00000026;
  --interactive-primary-neutral-label: #f7f7f7;
  --interactive-primary-neutral-accent: #f7f7f7;
}

Breadcrumbs should feel lightweight, non-intrusive, and easy to scan. Limit the amount of levels shown by default and truncate earlier levels if needed.