docs · print medium: screen

registry:ui · NativeHTML

breadcrumb — the trail the platform already defines

nav[aria-label] wrapping an ol of ordinary links, composed part by part: the list carries the order, Link is a real href, Page marks aria-current=page, Separator is pure decoration — no roles to maintain. Long trails fold by WRAPPING the middle items in BreadcrumbCollapse; one node can open a menu of peer pages (BreadcrumbDropdown) — every destination a real anchor.

install — breadcrumb

$npx jixoai-ui add breadcrumb

https://ui.jixoai.com/r/breadcrumb.json

nav + ol + a aria-current=page opt-in fold real-anchor sibling jump

overview

Overview

The root owns nothing but the landmark; eight parts compose the trail, the fold, and the sibling jump.

Breadcrumb is composition-first: the root renders the nav landmark and nothing else — the old closed crumbs[] data prop died. You author an ordered list directly: a BreadcrumbList (the ol — its document order IS the hierarchy) of BreadcrumbItem steps, each holding a BreadcrumbLink, the BreadcrumbPage, or a BreadcrumbSeparator.

Two behaviors are opt-in parts, not props. BreadcrumbCollapse wraps the middle items of a long trail: they self-hide (the platform hidden attribute) and a single "…" link stands in, pointing at the first hidden page — never a dead ellipsis. BreadcrumbDropdown is one trail node that opens a menu of peer destinations; every entry is a real anchor, so middle-click, reload and crawlers stay honest.

The semantics are the platform's: nav[aria-label] + ol + a[aria-current="page"] — no microdata obligations, no roles to maintain. For the axis grammar, see the universal props concept page.

usage

Usage

Author the ordered list directly; the ol order is the hierarchy and the current page remains a real page part.

Breadcrumb usage

<script lang="ts">
  import {
    Breadcrumb,
    BreadcrumbList,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbPage,
    BreadcrumbSeparator,
    BreadcrumbCollapse,
    BreadcrumbDropdown,
  } from '@ui/breadcrumb/index';
</script>

<!-- the trail is authored, not passed as data; the ol's order IS the hierarchy -->
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="/">registry</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbItem><BreadcrumbSeparator /></BreadcrumbItem>
    <BreadcrumbItem>
      <BreadcrumbPage href="/docs/components/breadcrumb.html">breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

<!-- long trails: wrap the middle in BreadcrumbCollapse — the folded
     items self-hide and the ellipsis links to the first hidden page -->
<BreadcrumbCollapse>
  <BreadcrumbItem><BreadcrumbLink href="/2">page 2</BreadcrumbLink></BreadcrumbItem>
</BreadcrumbCollapse>

<!-- sibling jump: one node opens a menu of peer pages — REAL anchors,
     the current one marked, selection dismisses and navigates -->
<BreadcrumbItem>
  <BreadcrumbDropdown
    label="components"
    current="/docs/components/breadcrumb.html"
    items={[
      { label: 'tabs', href: '/docs/components/tabs.html' },
      { label: 'breadcrumb', href: '/docs/components/breadcrumb.html' },
    ]}
  />
</BreadcrumbItem>

breadcrumb

A three-crumb trail, and an eight-page trail with the middle wrapped in BreadcrumbCollapse — the folded items self-hide and the ellipsis links to the first hidden page (never a dead span).

breadcrumb-usage.svelte svelte

<script lang="ts">
import Breadcrumb from '@ui/breadcrumb/index';
import BreadcrumbList from '@ui/breadcrumb/index';
import BreadcrumbItem from '@ui/breadcrumb/index';
import BreadcrumbLink from '@ui/breadcrumb/index';
import BreadcrumbPage from '@ui/breadcrumb/index';
import BreadcrumbSeparator from '@ui/breadcrumb/index';
import BreadcrumbCollapse from '@ui/breadcrumb/index';
</script>

<div class={cx(rt.flex, rt.col, rt.itemsStart, rt.gap20)}>
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem><BreadcrumbLink href="/">registry</BreadcrumbLink></BreadcrumbItem>
      <BreadcrumbItem><BreadcrumbSeparator /></BreadcrumbItem>
      <BreadcrumbItem>
        <BreadcrumbLink href="/docs/components.html">components</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbItem><BreadcrumbSeparator /></BreadcrumbItem>
      <BreadcrumbItem>
        <BreadcrumbPage href="/docs/components/breadcrumb.html">breadcrumb</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="/docs/components/breadcrumb.html?trail=1">page 1</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbItem><BreadcrumbSeparator /></BreadcrumbItem>
      <BreadcrumbCollapse>
        <BreadcrumbItem><BreadcrumbLink href="/docs/components/breadcrumb.html?trail=2">page 2</BreadcrumbLink></BreadcrumbItem>
        <BreadcrumbItem><BreadcrumbLink href="/docs/components/breadcrumb.html?trail=3">page 3</BreadcrumbLink></BreadcrumbItem>
        <BreadcrumbItem><BreadcrumbLink href="/docs/components/breadcrumb.html?trail=4">page 4</BreadcrumbLink></BreadcrumbItem>
        <BreadcrumbItem><BreadcrumbLink href="/docs/components/breadcrumb.html?trail=5">page 5</BreadcrumbLink></BreadcrumbItem>
        <BreadcrumbItem><BreadcrumbLink href="/docs/components/breadcrumb.html?trail=6">page 6</BreadcrumbLink></BreadcrumbItem>
      </BreadcrumbCollapse>
      <BreadcrumbItem><BreadcrumbSeparator /></BreadcrumbItem>
      <BreadcrumbItem>
        <BreadcrumbLink href="/docs/components/breadcrumb.html?trail=7">page 7</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbItem><BreadcrumbSeparator /></BreadcrumbItem>
      <BreadcrumbItem>
        <BreadcrumbPage href="/docs/components/breadcrumb.html?trail=8">page 8</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
</div>

live example

Fold a long trail

Use a complete trail for short paths, wrap the middle items for an opt-in fold, or swap the separator glyph through its children snippet (aria-hidden stays by construction).

breadcrumb · fold and separator

breadcrumb-fold-demo.svelte svelte

<script lang="ts">
import Breadcrumb from '@ui/breadcrumb/index';
import BreadcrumbList from '@ui/breadcrumb/index';
import BreadcrumbItem from '@ui/breadcrumb/index';
import BreadcrumbLink from '@ui/breadcrumb/index';
import BreadcrumbPage from '@ui/breadcrumb/index';
import BreadcrumbSeparator from '@ui/breadcrumb/index';
import BreadcrumbCollapse from '@ui/breadcrumb/index';
</script>

<div class={cx(rt.bcGrid)}>
  <div class={cx(rt.panel)}>
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem><BreadcrumbLink href="/">home</BreadcrumbLink></BreadcrumbItem>
        <BreadcrumbItem><BreadcrumbSeparator /></BreadcrumbItem>
        <BreadcrumbItem><BreadcrumbPage>current</BreadcrumbPage></BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  </div>
  <div class={cx(rt.panel)}>
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem><BreadcrumbLink href="/">home</BreadcrumbLink></BreadcrumbItem>
        <BreadcrumbItem><BreadcrumbSeparator /></BreadcrumbItem>
        <BreadcrumbCollapse href="/docs">
          <BreadcrumbItem><BreadcrumbLink href="/docs">docs</BreadcrumbLink></BreadcrumbItem>
        </BreadcrumbCollapse>
        <BreadcrumbItem><BreadcrumbSeparator /></BreadcrumbItem>
        <BreadcrumbItem><BreadcrumbPage>current</BreadcrumbPage></BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  </div>
  <div class={cx(rt.panel)}>
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem><BreadcrumbLink href="/">home</BreadcrumbLink></BreadcrumbItem>
        <BreadcrumbItem>
          <BreadcrumbSeparator><span class={cx(rt.inkMuted)}>/</span></BreadcrumbSeparator>
        </BreadcrumbItem>
        <BreadcrumbItem><BreadcrumbPage>current</BreadcrumbPage></BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  </div>
</div>

live example

Jump between siblings

BreadcrumbDropdown is one trail node that opens a menu of peer destinations: click — or the dropdown-menu keyboard contract (arrows, typeahead, Home/End) — opens the popover; every entry is a REAL anchor; the current peer carries the you-are-here paint; selecting dismisses the menu and navigates.

breadcrumb-dropdown-demo.svelte svelte

<script lang="ts">
import Breadcrumb from '@ui/breadcrumb/index';
import BreadcrumbList from '@ui/breadcrumb/index';
import BreadcrumbItem from '@ui/breadcrumb/index';
import BreadcrumbLink from '@ui/breadcrumb/index';
import BreadcrumbPage from '@ui/breadcrumb/index';
import BreadcrumbSeparator from '@ui/breadcrumb/index';
import BreadcrumbDropdown from '@ui/breadcrumb/index';
</script>

  <div class={cx(rt.maxWXl, rt.panel)}>
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem><BreadcrumbLink href="/docs/components/overview.html">docs</BreadcrumbLink></BreadcrumbItem>
        <BreadcrumbItem><BreadcrumbSeparator /></BreadcrumbItem>
        <BreadcrumbItem>
          <BreadcrumbDropdown label="components" current="/docs/components/breadcrumb.html" items={[
  { label: 'tabs', href: '/docs/components/tabs.html' },
  { label: 'toast', href: '/docs/components/toast.html' },
  { label: 'breadcrumb', href: '/docs/components/breadcrumb.html' },
]} />
        </BreadcrumbItem>
        <BreadcrumbItem><BreadcrumbSeparator /></BreadcrumbItem>
        <BreadcrumbItem><BreadcrumbPage href="/docs/components/breadcrumb.html">breadcrumb</BreadcrumbPage></BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  </div>

api

Props

The root carries the landmark label and forwards the eight-axis surface (the shared Universal props section below); the parts keep the trail structure explicit. The composed dropdown-menu inside BreadcrumbDropdown is documented on its own page.

Breadcrumb

Property	Type	Default	Description
label	string	'Breadcrumb'	Accessible name of the navigation landmark.
children *	Snippet	—	The composed trail — a BreadcrumbList of Items.
...rest	HTMLAttributes	spread	Forwarded to the nav element.

Universal props

Property	Type	Default	Description
size	'small' \| 'medium' \| 'large' \| 'auto' \| number	'auto' · ambient scope	the base scale — root font-size; parts size in em
shape	'round' \| 'scoop' \| 'bevel' \| 'notch' \| 'square' \| 'squircle' \| 'auto'	'auto' · ambient scope	corner geometry (CSS corner-shape; §14 degrade table)
radius	'small' \| 'medium' \| 'large' \| 'auto' \| number	'auto' · ambient scope	corner size; auto = the concentric broadcast (§3)
density	'small' \| 'medium' \| 'large' \| 'auto' \| number	'auto' · ambient scope	spacing/leading scale over the kernel channels (§4)
color	'primary' \| 'secondary' \| 'error' \| 'warn' \| 'success' \| 'info' \| 'auto' \| number \| string	'auto' · ambient scope	the hue axis of the fixed oklch primary system (§5)
theme	'light' \| 'dark' \| 'system' \| 'auto'	'auto' · ambient scope	light/dark profile; system = the JS-mutable global (§6)
elevation	'level-1' \| 'level0' \| 'level1' \| 'level2' \| 'level3' \| 'level4' \| 'level5' \| 'auto' \| number	'auto' · ambient scope	official M3 levels over the surface ladder (§7)
motion	'reduced' \| 'subtle' \| 'normal' \| 'expressive' \| 'auto' \| number	'auto' · ambient scope	intensity across the motion kernels (§8)

BreadcrumbList / BreadcrumbItem

Property	Type	Default	Description
children *	Snippet	—	List: the Items, Separators and folds, in order (renders the ol, role="list"). Item: one step's content (renders the li); self-hides inside a BreadcrumbCollapse.
...rest	HTMLAttributes	spread	Forwarded to the ol / li element.

BreadcrumbLink / BreadcrumbPage

Property	Type	Default	Description
href	string	Link: required · Page: optional	Destination. Without one, Page renders the span form of the same semantics (aria-current stays).
child	Snippet	—	Link only — replacement-element escape; receives the merged anchor props ({ class, href, ...rest }); the consumer owns the element.
children *	Snippet	—	The visible label.
aria-current	"page"	Page only	BreadcrumbPage marks the current destination; not overridable.
...rest	HTMLAnchorAttributes	spread	Forwarded to the anchor element.

BreadcrumbSeparator / BreadcrumbEllipsis / BreadcrumbCollapse

Property	Type	Default	Description
children	Snippet	—	Separator only — REPLACES the chevron glyph (data-glyph="custom", aria-hidden stays). Ellipsis renders its own "…"; Collapse renders the fold's ellipsis link.
href	string	Collapse only, optional	Where the fold's ellipsis points. Without one it derives the first hidden page's href from its own DOM on hydrate.
...rest	HTMLAttributes	spread	Forwarded to the span / li element; all three are aria-hidden or wrap hidden content.

BreadcrumbDropdown

Property	Type	Default	Description
label *	string	—	The trail label on the trigger — the section this node stands for.
items *	{ label, href }[]	—	Peer destinations offered in the menu — every entry a REAL anchor.
current	string	—	href of the current page among the items: aria-current=page + the you-are-here paint.
density	Density	ambient scope	The part's own density opinion (the legacy local spelling), feeding the composed menu — explicit ?? inherited.

axes

The eight axes on breadcrumb

breadcrumb carries all eight lanes as a first-time no-own surface (migration census, W3 close D5): an explicit lane stamps its §10 carrier on the nav and supplies downward. The split on THIS family: density, shape and radius land in the composed menu (open the node), the theme island re-themes the menu wholesale while the trail's own text inks stay stylex-frozen, and size, color, elevation and motion stamp carriers nothing here consumes. The lane grammar (named · auto · number · query()) is the universal props page's.

Property	Type	Default	Description
density	data-density rung · --jx-density-coefficient	auto	The axis this family supplies, not paints. The root is a structural provider: an explicit rung stamps data-density on the nav (small · medium · large normalize onto the rungs sm · default · lg) and re-declares the channel set on it — a named rung also resets the coefficient to 1 (explicit rung = exact rung, never double-scaled); a number stamps --jx-density-coefficient and leaves the rung ambient (the declaring-element law: nothing here re-declares AT a coefficient stamp, so the number lane moves nothing on this composition). The trail's own atoms pin fixed tokens (gap --jx-space-6, label --jx-text-label-lg), so the trail itself is density-immobile — the supply is the point: all 8 parts re-stamp the ambient rung (densityRungOf), and the composed menu consumes the FIVE channels (--jx-hit / --jx-line / --jx-inset / --jx-text / --jx-gap in dropdown-menu.css). Open the sibling-jump node and the menu rides the rung.
size	--jx-size-effective → root font-size	auto	Stamps the carrier plus the font-size declaration on the nav, but the list pins its own label token (--jx-text-label-lg) and nothing on this composition sizes in em — the trail does not scale. Steps small · medium · large; a number is px.
shape	--jx-shape-effective · --jx-radius-factor-effective	auto	Carriers stamp on the nav, but the trail paints no corners — the separator chevron is a rotated border square, not a corner. The supply is real: the composed menu panel composes corner-shape: var(--jx-shape-effective, round). Steps round · scoop · bevel · notch · square · squircle; no number lane.
radius	--jx-radius-effective	auto	Same split: the cornerless trail consumes nothing, while the composed menu panel composes the §3 concentric calc (radius-effective − inset-effective) × the shape factor — open the node and the panel takes the radius. Steps small · medium · large; a number is px.
color	--jx-color-effective	auto	The carrier stamps, but the trail's ink reads the semantic tokens directly — --jx-muted-foreground for links (warming to --jx-primary on hover), --jx-foreground for the current page — so a hue lane retunes nothing here. Steps primary · secondary · error · warn · success · info; a number is hue degrees.
theme	the .dark class bridge — a split on this family, measured	auto	dark stamps the .dark class bridge on the nav, and WHICH voices follow splits by declaring layer (steady-state probe, both levels). The trail's own TEXT INKS stay frozen: link ink (--jx-muted-foreground, hover --jx-primary) and the current page's ink (--jx-foreground) ride the stylex layer — declared only on :root + the stylex theme classes, never plain .dark — so the trail text keeps the light values (the W-next semantic-ink gap). Everything RAW re-themes: the separator chevron (var(--muted-foreground) 0.32 → 0.85 lightness), the focus outline (--hairline / --ring), and the WHOLE composed menu — panel ground, border, item ink and the you-are-here paint (raw --foreground + the --muted mix) all flip, because the popover panel is a DOM descendant of the nav and inherits the island's tokens. Steps light · dark · system; auto inherits the tree.
elevation	--jx-elevation-effective	auto	The carrier stamps; the flat trail paints no shadow, and nothing on this family consumes it. Steps level-1 · level0 · level1 · level2 · level3 · level4 · level5; a number is exact dp.
motion	--jx-motion-effective	auto	The carrier stamps; the trail's only transition is the fixed 150ms color fade on the link ink (.jx-bc-link → --motion-150 / --motion-ease-out — motion literals, no kernel read). Steps reduced · subtle · normal · expressive; a number is a coefficient.

Deviations, cited: the eight-axis adoption itself is the census row — breadcrumb was one of the 13 sweep holes migrated in the W3 close (D5), the bridge keeping the legacy rung channel for the ~60 legacy consumers (openspec/changes/explicit-props/research/migration-census.md). The PROVIDER-SNAPSHOT kernel law rides this family: density does NOT ride the provideUniversalLanes literal — the reactive bridged provideDensity write carries the universal density supply, the literal carries the other seven, and all 8 parts stamp the ambient rung through the SAME densityRungOf contract. No §13 renames apply: label is a family prop, and BreadcrumbDropdown's density is the part's own opinion slot feeding the composed menu, not an axis rename.

Token	Default	Source
--jx-font-nav	var(--font-nav)	structural
--jx-text-label-lg	12px	structural
--jx-track-wide	0.08em	structural
--jx-space-6	unit × 1.5	structural
--jx-muted-foreground	theme · stylex-frozen	color
--muted-foreground (raw)	theme · raw layer	color
--jx-primary	theme	color
--jx-foreground	theme	color
--hairline + --ring	theme	color
--motion-150 + --motion-ease-out	150ms · ease-out	component

breadcrumb · the eight axes

auto — ambient scope, stamps nothing

density="small" — open the node: the menu rides the rung

density="large" — the same trail, the roomy rung

radius="large" — the trail is cornerless; the menu panel takes it

theme="dark" — a split, measured: the trail text keeps the light stylex inks; the chevron, focus ring and the composed menu re-theme

density={query<{ lg: DensityLane }, DensityLane>({ lg: 'large' }, 'small')}

SSR resolves the query's base (small) onto the root's rung stamp — inspect the markup: data-density="sm" on this nav, and the nav's scope block re-declares the five channels the composed menu reads. At the lg viewport rung (≥64rem) the engine re-resolves to large and the scope re-stamps; open the node on either side of 64rem and watch the menu rhythm step.

breadcrumb-axes.svelte svelte

<script lang="ts">
import Breadcrumb from '@ui/breadcrumb/index';
import BreadcrumbList from '@ui/breadcrumb/index';
import BreadcrumbItem from '@ui/breadcrumb/index';
import BreadcrumbLink from '@ui/breadcrumb/index';
import BreadcrumbPage from '@ui/breadcrumb/index';
import BreadcrumbSeparator from '@ui/breadcrumb/index';
import BreadcrumbCollapse from '@ui/breadcrumb/index';
import BreadcrumbDropdown from '@ui/breadcrumb/index';
import { query } from '@lib/universal-props-query.svelte';
import type { DensityLane } from '@lib/defaults.svelte';
</script>

      <div class={cx(rt.gridSm2, rt.wFull)}>
        <div class={cx(rt.panel)}>
          <span class={cx(rt.note11)}>auto — ambient scope, stamps nothing</span>
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem><BreadcrumbLink href="/">registry</BreadcrumbLink></BreadcrumbItem>
              <BreadcrumbItem><BreadcrumbSeparator /></BreadcrumbItem>
              <BreadcrumbItem><BreadcrumbPage>breadcrumb</BreadcrumbPage></BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </div>
        <div class={cx(rt.panel)}>
          <span class={cx(rt.note11)}>density="small" — open the node: the menu rides the rung</span>
          <Breadcrumb density="small">
            <BreadcrumbList>
              <BreadcrumbItem><BreadcrumbLink href="/docs/components/overview.html">docs</BreadcrumbLink></BreadcrumbItem>
              <BreadcrumbItem><BreadcrumbSeparator /></BreadcrumbItem>
              <BreadcrumbItem>
                <BreadcrumbDropdown label="components" current="/docs/components/breadcrumb.html" items={[
  { label: 'tabs', href: '/docs/components/tabs.html' },
  { label: 'toast', href: '/docs/components/toast.html' },
  { label: 'breadcrumb', href: '/docs/components/breadcrumb.html' },
]} />
              </BreadcrumbItem>
              <BreadcrumbItem><BreadcrumbSeparator /></BreadcrumbItem>
              <BreadcrumbItem><BreadcrumbPage>breadcrumb</BreadcrumbPage></BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </div>
        <div class={cx(rt.panel)}>
          <span class={cx(rt.note11)}>density="large" — the same trail, the roomy rung</span>
          <Breadcrumb density="large">
            <BreadcrumbList>
              <BreadcrumbItem><BreadcrumbLink href="/docs/components/overview.html">docs</BreadcrumbLink></BreadcrumbItem>
              <BreadcrumbItem><BreadcrumbSeparator /></BreadcrumbItem>
              <BreadcrumbItem>
                <BreadcrumbDropdown label="components" current="/docs/components/breadcrumb.html" items={[
  { label: 'tabs', href: '/docs/components/tabs.html' },
  { label: 'toast', href: '/docs/components/toast.html' },
  { label: 'breadcrumb', href: '/docs/components/breadcrumb.html' },
]} />
              </BreadcrumbItem>
              <BreadcrumbItem><BreadcrumbSeparator /></BreadcrumbItem>
              <BreadcrumbItem><BreadcrumbPage>breadcrumb</BreadcrumbPage></BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </div>
        <div class={cx(rt.panel)}>
          <span class={cx(rt.note11)}>radius="large" — the trail is cornerless; the menu panel takes it</span>
          <Breadcrumb radius="large">
            <BreadcrumbList>
              <BreadcrumbItem><BreadcrumbLink href="/docs/components/overview.html">docs</BreadcrumbLink></BreadcrumbItem>
              <BreadcrumbItem><BreadcrumbSeparator /></BreadcrumbItem>
              <BreadcrumbItem>
                <BreadcrumbDropdown label="components" current="/docs/components/breadcrumb.html" items={[
  { label: 'tabs', href: '/docs/components/tabs.html' },
  { label: 'toast', href: '/docs/components/toast.html' },
  { label: 'breadcrumb', href: '/docs/components/breadcrumb.html' },
]} />
              </BreadcrumbItem>
              <BreadcrumbItem><BreadcrumbSeparator /></BreadcrumbItem>
              <BreadcrumbItem><BreadcrumbPage>breadcrumb</BreadcrumbPage></BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </div>
        <div class={cx(rt.panel)}>
          <span class={cx(rt.note11)}>theme="dark" — a split, measured: the trail text keeps the light stylex inks; the chevron, focus ring and the composed menu re-theme</span>
          <Breadcrumb theme="dark">
            <BreadcrumbList>
              <BreadcrumbItem><BreadcrumbLink href="/">registry</BreadcrumbLink></BreadcrumbItem>
              <BreadcrumbItem><BreadcrumbSeparator /></BreadcrumbItem>
              <BreadcrumbItem><BreadcrumbPage>breadcrumb</BreadcrumbPage></BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </div>
      </div>
      <div class={cx(rt.col20, rt.wFull, rt.anMt32)}>
        <span class={cx(rt.note11)}>density={"{query<{ lg: DensityLane }, DensityLane>({ lg: 'large' }, 'small')}"}</span>
        <Breadcrumb density={query<{ lg: DensityLane }, DensityLane>({ lg: 'large' }, 'small')}>
          <BreadcrumbList>
            <BreadcrumbItem><BreadcrumbLink href="/docs/components/overview.html">docs</BreadcrumbLink></BreadcrumbItem>
            <BreadcrumbItem><BreadcrumbSeparator /></BreadcrumbItem>
            <BreadcrumbItem>
              <BreadcrumbDropdown label="components" current="/docs/components/breadcrumb.html" items={[
  { label: 'tabs', href: '/docs/components/tabs.html' },
  { label: 'toast', href: '/docs/components/toast.html' },
  { label: 'breadcrumb', href: '/docs/components/breadcrumb.html' },
]} />
            </BreadcrumbItem>
            <BreadcrumbItem><BreadcrumbSeparator /></BreadcrumbItem>
            <BreadcrumbItem><BreadcrumbPage>breadcrumb</BreadcrumbPage></BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
        <p class={cx(rt.mt4, rt.note12, rt.inkMuted70)}>
          SSR resolves the query's base (small) onto the root's rung stamp — inspect the
          markup: data-density="sm" on this nav, and the nav's scope block re-declares the
          five channels the composed menu reads. At the lg viewport rung (≥64rem) the engine
          re-resolves to large and the scope re-stamps; open the node on either side of 64rem
          and watch the menu rhythm step.
        </p>
      </div>

a11y

Accessibility

Native navigation landmark, ordered list, links, and aria-current carry the full semantics. In the dropdown menu, the keyboard walk's highlight is a paint-only data attribute — aria-current on the current entry is never rewritten by the walk, so the you-are-here marker survives navigation with its semantics intact.

Key	Action
`Tab`	Moves through the trail links and the sibling-jump trigger in list order; the trail never steals focus
`Enter / Space`	Opens the sibling-jump menu from the trigger; Enter on a menu entry dismisses the panel, returns focus to the trail node, and navigates
`Arrow keys`	Inside the open menu: arrows move, typeahead jumps, Home/End bound the walk (the dropdown-menu contract)

Attribute	Value	Description
aria-label	'Breadcrumb'	Names the navigation landmark — announced before the trail.
aria-current	'page'	Marks the current trail destination — and the current entry inside the dropdown menu (never touched by the menu walk’s highlight).
aria-hidden	'true'	Hides decorative separators and manual ellipses — screen readers hear the label and the links, not the gaps.