BbBreadcrumbs

Disables the component

On the component it freezes every crumb and the overflow button; per item it drops that crumb's href for aria-disabled. Use it for a level the reader can no longer open: a dead link is worse.

Width of the divider in pixels.

Estimation only: it does not resize anything. The default moved from 5 in v2 to 16, which matters only if you had tuned the old number.

Explicit width used by the estimator for the ellipsis activator.

The width reserved for the overflow trigger. Set it whenever the ellipsis slot renders something wider than the default ….

Multiplier applied to each estimated item width. A higher value will result in more over-estimation.

A multiplier on every estimated item width. Raise it when crumbs clip before folding (a wider custom font is the usual cause), and lower it when the trail folds too eagerly.

Horizontal gap between breadcrumb elements in pixels.

Drives the rendered gap and the estimate at once, so changing it here is the supported way to retune the spacing.

Array of items that describe how the breadcrumbs should behave. Compatible with navigating through a or router-link.

Each item is { label } plus a target from the BbBaseButton navigation surface (minus block, tag and type), or an onClick when the hierarchy lives in client state. A last item without a target is the current page: it renders as text with aria-current="page", out of the tab order. With an href it is an ordinary link. value (v2 key) is optional and needed only for a crumb with its own slot; it is a string, so a numeric v2 key fails type checking, and code reading item.value must allow undefined.

Extra one-off width in pixels added to the total estimate (e.g. prepend/append/item slot content).

The knob you actually reach for. Slot and icon content is invisible to the estimator, so declare its total here rather than shrinking the trail with CSS.

Passthrough, object form: the same keys as the pt:* attributes without the prefix. See the pt:<part> row.

Passthrough, attribute form: one attribute per part, pt:<part>, and per part and state, pt:<part>:<state>. Parts: icon, item, root, text. States: active, disabled.

One crumb's label, by its value through slotKey; falls back to item.label. A crumb folded into the overflow menu follows BbDropdown's slot rules instead (the same #<value> names).

Named by the crumb's value in kebab-case: Order History and orderHistory are both #order-history. A crumb without a value has no slot of its own, and a value spelled like a reserved slot (prepend, append, divider, ellipsis, item) is an error.

The glyph after one crumb's label; beats item:append, which beats its append:icon.

The glyph before one crumb's label; beats item:prepend, which beats its prepend:icon.

Content inside the link, so keep it non-interactive and mark a decorative mark aria-hidden. Invisible to the width estimator: declare it with offset-width.

Content rendered after the breadcrumb list, in a dedicated append region.

The natural home for compact page actions on a detail header. Keep them size="xs" and declare their width with offset-width.

Replaces the default separator rendered between breadcrumb items.

The only way to change the separator: the v2 divider prop no longer exists, and passing it leaks a stray attribute. Dividers stay aria-hidden, so never put meaning in one.

Replaces the default … overflow button shown when items overflow.

Repaints the overflow trigger, which stays a real button with a localized, count-aware label and a keyboard-complete menu. The scope carries overflowCount, so the trigger can say how much is folded.

Content rendered after every breadcrumb item's link/button. Generic fallback below a per-item <value>:append slot and above the item's append:icon.

Same precedence as item:prepend: a per-crumb slot beats it, and the item's append:icon is the fallback below it.

Content rendered before every breadcrumb item's link/button, in the leading edge region. Generic fallback: a per-item <value>:prepend slot takes precedence, and the item's prepend:icon is used when neither slot is present.

The generic fallback for every crumb. A per-crumb <value>:prepend slot wins over it, and the item's own prepend:icon is used when neither slot is present. Prefer that field for a static glyph.

Content rendered before the breadcrumb list, in a dedicated prepend region.

A fixed region before the whole trail, not before each crumb: a hint, a workspace mark. Account for its width with offset-width.