<!-- GENERATED by scripts/build-llms.mjs from llms/layout.md — do not edit this file. -->

# `lr-breadcrumb`

- **Import** `import '@aceshooting/lyra-ui/components/lr-breadcrumb.js';` (stable tag alias; registers the tag)
- **Class** `LyraBreadcrumb`, also available unregistered from `@aceshooting/lyra-ui/components/layout/breadcrumb/breadcrumb.class.js`
- **Family** `components/layout/` — see `llms/index.md` for its siblings
- **Status** `stable` since `4.0.0` — see the maturity and deprecation policy in `llms/shared.md`
- **Release history** [CHANGELOG.md](../../CHANGELOG.md); family-wide breaking-change summaries: [llms-full.txt](../../llms-full.txt)
- **Deprecations** none
- **Optional peers** none
- **Themeable via** 3 parts, 0 custom properties — see this component's own `@csspart`/`@cssprop` list below
- **Documented with** `lr-breadcrumb-item` (same section below)
- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`

---

## `lr-breadcrumb` and `lr-breadcrumb-item`

Responsive navigation trail primitives.

**`lr-breadcrumb` properties:** `label?: string` names the trail; omitting it reads back `undefined`
and falls back to the localized `"Breadcrumb"`, while an explicitly empty string stays empty.
`accessibleLabel?: string` (attribute **`aria-label`**) overrides both, with the same
omitted-versus-explicitly-empty distinction. The
shadow-root `<nav>` landmark never inherits a host attribute on its own, so the value is copied onto
it. **Fixed in 9.0.0:** the property used to be declared but never read — only the literal host
`aria-label` attribute reached the landmark, so `el.accessibleLabel = 'Docs trail'` type-checked and
did nothing. Both spellings now work, with an authored host attribute still winning (including an
explicitly empty `aria-label=""`, which stays empty rather than falling back).

**`lr-breadcrumb-item` properties:** `href: string = ''` (URL-sanitized; an unsafe scheme renders the
non-link form; assigning `undefined` clears it and reads back as the canonical `''`),
`target?: LyraBreadcrumbItemTarget`, and `current: boolean = false` (reflected — renders a
`<span aria-current="page">` instead of an `<a>`, even when `href` is set). A target derives
the mandatory `noopener noreferrer` floor. `rel: string = 'noreferrer noopener'` is independently
settable: author tokens are preserved, `opener` is stripped, and any target force-adds the floor. Each item
sets `role="listitem"` on itself. A non-current item without `href` renders a native button. A host
`aria-label` is forwarded to either non-current native owner by attribute presence, including an
explicitly empty value; when absent, the default slot supplies its name.

**`lr-breadcrumb-item` methods:** `click(): void` activates the internal native link or button. It
is a no-op for the current-page label.

Changing `href` or `current` while that native owner has focus transfers focus across the link,
button, and programmatically focusable current-page label. External focus is preserved.

**Slots:** breadcrumb's default slot takes `lr-breadcrumb-item` children and its `separator` slot is
copied to every item without an item-level override. Both breadcrumb and item `separator` slots are
decorative-only: their rendered content is inert and hidden from assistive technology, so it must not
provide interactive behavior, a focus target, or form state. Generated shared copies omit identifiers,
ID-reference relationships, form associations, and submission attributes. Source text, attributes,
and compatible subtrees update live; identity-compatible clone nodes are patched in place instead of
being disconnected and recreated. The first owned breadcrumb item is determined independently of
separator sources or other auxiliary siblings, so it never renders a leading separator. An item's default slot is
its label; `start`/`prefix` and `end`/`suffix` are the two upstream adornment vocabularies, and
`separator` overrides the `/` fallback.

**CSS parts:** breadcrumb `base` and `breadcrumb` are aliases on the same `<nav>`; `list` is the
`role="list"` flex row wrapping the slotted items; item `base` (the `<a>`, `<button>`, or current
`<span>`), `label`,
`separator`, and the alias pairs `start`/`prefix` and `end`/`suffix`.
Interactive link/button bases retain a 24px minimum target in both axes even with empty content;
the inert current-page label remains content-sized.

**Themeable custom properties:** `--lr-breadcrumb-current-color` (default
`var(--lr-color-text-quiet)`) — text color of the current-page item (`current`/`aria-current="page"`).
It is an inline `var()` fallback at the point of use rather than a `:host` declaration, so it can be
set on the item, on `<lr-breadcrumb>`, or on any ancestor above the trail:
`::part(base)[aria-current='page']` is invalid CSS (Shadow Parts forbids an attribute selector after
`::part()`), so tinting the current item previously meant overriding the library-wide
`--lr-color-text-quiet` token and repainting everything else that read it. Unset, it falls back to
that token.
`--lr-breadcrumb-item-active-bg` independently themes a non-current link/button's pressed fill;
unset, it retains the former transparent active mix.

**Additional API surface:**

- `part="separator"` — Decorative separator shown before non-first items.