Breadcrumb

Description

.bp-breadcrumb is an ordered list inside a <nav aria-label="Breadcrumb"> element. Separators are rendered via CSS ::after pseudo-elements — no extra markup needed. The current page is marked with aria-current="page". No JavaScript required.

Usage

Default

1. Home
2. Components
3. Breadcrumb

<nav aria-label="Breadcrumb">
<ol class="bp-breadcrumb">
  <li class="bp-breadcrumb__item">
    <a href="/" class="bp-breadcrumb__link">Home</a>
  </li>
  <li class="bp-breadcrumb__item">
    <a href="/components/" class="bp-breadcrumb__link">Components</a>
  </li>
  <li class="bp-breadcrumb__item" aria-current="page">
    <a href="/components/breadcrumb/" class="bp-breadcrumb__link">Breadcrumb</a>
  </li>
</ol>
</nav>

Custom separator

1. Home
2. Tokens
3. Typography

<nav aria-label="Breadcrumb">
<ol class="bp-breadcrumb demo-breadcrumb--chevron">
  <li class="bp-breadcrumb__item">
    <a href="/" class="bp-breadcrumb__link">Home</a>
  </li>
  <li class="bp-breadcrumb__item">
    <a href="/tokens/" class="bp-breadcrumb__link">Tokens</a>
  </li>
  <li class="bp-breadcrumb__item" aria-current="page">
    <a href="/tokens/typography/" class="bp-breadcrumb__link">Typography</a>
  </li>
</ol>
</nav>

Public API

Variable	Default	Description
--breadcrumb-separator	"/"	Separator character between items
--breadcrumb-color	--bp-color-text-muted	Link color
--breadcrumb-color-active	--bp-color-text	Current page color
--breadcrumb-gap	--bp-space-2	Space between items and separator
--breadcrumb-size	--bp-text-sm	Font size

Customization

Custom separator and colors

1. Home
2. Guides
3. Agentic

<nav aria-label="Breadcrumb">
<ol class="bp-breadcrumb demo-breadcrumb--custom">
  <li class="bp-breadcrumb__item">
    <a href="/" class="bp-breadcrumb__link">Home</a>
  </li>
  <li class="bp-breadcrumb__item">
    <a href="/guides/" class="bp-breadcrumb__link">Guides</a>
  </li>
  <li class="bp-breadcrumb__item" aria-current="page">
    <a href="/guides/agentic/" class="bp-breadcrumb__link">Agentic</a>
  </li>
</ol>
</nav>

✓ No axe violations tested 2026-05-11

WCAG criteria covered:

• 1.3.1 Info & Relationships
• 1.4.3 Contrast (Min)
• 2.1.1 Keyboard
• 4.1.2 Name Role Value

Accessibility

• Wrap in <nav aria-label="Breadcrumb"> to announce it as a navigation landmark.
• Mark the current page with aria-current="page" on the <li> — the component styles it as non-interactive automatically.
• The separator uses content: var(--_separator) / "" — the / "" alt text hides it from the accessibility tree without extra markup.
• Use <ol> (ordered list) — the sequence is meaningful.

Browser APIs

API	Availability	Used for	Without it
CSS content on ::after	✓ Widely available Baseline 2015	Separator rendering	Separators missing
aria-current	✓ Widely available Baseline 2017	Current page state	Use a class instead

Internals

The separator is a CSS ::after pseudo-element on every item except the last (li:not(:last-child)::after). This means it works with any number of items and never requires updating markup when the separator changes — only the --breadcrumb-separator token.

Current page detection uses [aria-current="page"] on the <li>, which disables pointer events and applies the active color without a style class.