Skip to content
Try free

Breadcrumb

Shows where the page sits in the site: a nav of links ending in the current page.

  • Free core, MIT
  • Version 2.0.0-rc.1
  • APG pattern: Breadcrumb

Examples

These are the real React components. Use them with a mouse, touch or keyboard, and switch the theme and density for every example at once.

Default

Show the code

Default, code

<Breadcrumb>
  <BreadcrumbItem href="#home">Home</BreadcrumbItem>
  <BreadcrumbItem href="#settings">Settings</BreadcrumbItem>
  <BreadcrumbItem>Team members</BreadcrumbItem>
</Breadcrumb>

Long

Show the code

Long, code

<Breadcrumb>
  <BreadcrumbItem href="#home">Home</BreadcrumbItem>
  <BreadcrumbItem href="#projects">Projects</BreadcrumbItem>
  <BreadcrumbItem href="#northwind">Northwind redesign</BreadcrumbItem>
  <BreadcrumbItem href="#research">Research</BreadcrumbItem>
  <BreadcrumbItem>Interview notes, round two</BreadcrumbItem>
</Breadcrumb>

Tokens

The 7 design tokens Breadcrumb reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.

Show all 7 tokens
Tokens Breadcrumb reads
TokenValue nowCSS variable
color.icon.default…--sd-color-icon-default
color.text.default…--sd-color-text-default
color.text.link…--sd-color-text-link
color.text.link-pressed…--sd-color-text-link-pressed
radius.xs…--sd-radius-xs
spacing.gap.xs…--sd-spacing-gap-xs
target.min…--sd-target-min

Install

The npm package isn’t published yet. When it is, this is the install line; until then, this page runs the same build of the package (from commit fa3abf8).

Install

npm i @superduperui/react @superduperui/tokens

Import

import { Breadcrumb, BreadcrumbItem } from "@superduperui/react"

Props

Breadcrumb also takes the props of the React Aria component it’s built on.

Breadcrumb props
PropTypeWhat it does
childrenrequiredReactNodeBreadcrumbItem elements, from the top level down to the current page (last).
aria-labelstringDefault 'Breadcrumb'Names the navigation landmark. Default "Breadcrumb".
classNamestring

When to use it

Use it for

  • Pages three or more levels deep
  • Settings and admin areas with nested sections

Use something else for

  • Steps in a task: use Steps
  • Top-level sites with one level: leave it out

Accessibility

Screen readers announce "Breadcrumb, navigation" then "Settings, link" and "Team members, current page".

WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6.

Compact density meets AA (2.5.8, 24px targets), not AAA.

What your product still has to do

  • Match the crumbs to the page titles

Shared patterns it ships with: 2.4.8 (aria-current="page" says where you are).

This release’s test results

Test results for Breadcrumb in this release
axe-core (WCAG A, AA, AAA and best practice)60 runs across every story, theme, density and width: 0 violations
Rendered text contrast80 text runs: 0 below 7:1, lowest 8.42:1
Target size22 targets: 0 under 44px in Comfortable
Focus appearance (2.4.13)36 focus stops in 3 browser engines: all pass
Keyboard scriptChromium 2 of 2, Firefox 2 of 2, WebKit 2 of 2

Manual passes with VoiceOver and NVDA haven’t been done yet.

Keyboard

Each step is scripted and run in Chromium, Firefox and WebKit.

Breadcrumb keyboard steps
KeyWhat happens
TabTab reaches the first crumb
TabTab reaches the next crumb

In Figma

The Figma component is Breadcrumb. The Figma library isn’t published yet.

Figma to code: Items → children.