Skip to content
Jewel

Breadcrumbs

Where this page sits in the site, from the top down. The last crumb is the page you’re on, so it isn’t a link.

CSS
css/components/breadcrumbs.css

01 — Examples

Default

On phones only the parent shows, as a “‹ Components” back link, so the trail never wraps. Narrow your window to see it.

Full trail

.breadcrumbs--full keeps every crumb on phones too; it wraps.

02 — Usage

Use it for

  • Sites more than two levels deep.
  • The top of the page, above the title.

Avoid

  • Flat sites with one level.
  • Showing the steps of a process. That’s a stepper.

03 — Accessibility

Notes

  • A nav labeled “Breadcrumb” around an ordered list.
  • The current page is a span with aria-current="page", not a link.