Breadcrumb

Where you are, as the path that got you here — Home › Optimisations › Postback control.

Beta · Navigation and overlay · packages/css/src/components/breadcrumb.css · React on Base UI: @pepperui/breadcrumb

.pui-breadcrumb · __list __item __separator · the current page aria-current="page".

Breadcrumb — every size and every stateOpen in the workshop

Sizes across, states down.

What it is for

• Three exposed Breadcrumb items — the last one Type current; Has item 3 drops to two (the last shown is then a link: set it current on the instance)
• Separators are chevron-right 16 in text/subtle; gap space/8
• Lives at the left of Topbar; alone at the top of a page without a top bar

Use when a page is two or more levels deep and the person may want to go back a level.

Do not use when one level (nothing); the levels are tabs of one page (Tabs); more than four levels (collapse the middle — an ellipsis item is the registry’s job).

Relates to Breadcrumb item, Topbar, Sidebar, Tabs.

Anti-patterns the current page as a link · slashes as separators · a breadcrumb that repeats the sidebar’s active item alone.

Keywords: breadcrumb, path, trail, where am I, navigation

Figma — page Breadcrumb: Breadcrumb (1 variants) · Breadcrumb item (4 variants)

shadcn: breadcrumb

The markup — copy this

The class, the parts, and nothing that is not in the package. The same block opens breadcrumb.css.

<nav class="pui-breadcrumb" aria-label="Breadcrumb"><ol class="pui-breadcrumb__list">
  <li><a class="pui-breadcrumb__item" href="/">Home</a></li>
  <li><span class="pui-icon pui-breadcrumb__separator">…chevron-right…</span></li>
  <li><span class="pui-breadcrumb__item" aria-current="page">Postback control</span></li></ol></nav>

Accessibility — measured, not assumed

Every number here is measured on the rendered component: contrast (npm run contrast:render), the focus ring (npm run focus) and the keyboard (npm run keyboard). The floors are principle 12’s.

Contrast

ink on ground	reads	floor	the matrix calls it
#544d4d on #ffffff	8.24	4.5	text.muted on surface.page (promised)	ok
#0b0202 on #ffffff	20.51	4.5	text.default on surface.page (promised)	ok

2 distinct pair(s) rendered, 0 that axe calls a violation.

The focus ring

primitive	on	the indicator	over	the change
Breadcrumb item	surface/page	shadow #6a66e4 2 px	#ffffff	4.53	ok
Breadcrumb item	surface/card	shadow #6a66e4 2 px	#f2f2f7	4.06	ok
Breadcrumb item	surface/sunken	shadow #6a66e4 2 px	#f2f2f2	4.05	ok

2 of 2 focus stop(s) in this block meet WCAG 2.4.13 on screen — the same crop screenshotted focused and unfocused, and the difference measured.

Keyboard

Nothing in this component claims an ARIA role with a keyboard contract; its controls are ordinary ones and the browser already gives them their keys.

Tab order across the whole library is document order over 344 stops, and Shift+Tab is its exact reverse — no keyboard trap anywhere (WCAG 2.1.2).