Props
| Name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | undefined | false | Disables the component On the component it freezes every crumb and the overflow button; per item it drops that crumb's |
dividerWidth | number | undefined | 16 | Width of the divider in pixels. Estimation only — it does not resize anything. The default moved from |
ellipsisWidth | number | undefined | - | Explicit width used by the estimator for the ellipsis activator. The width reserved for the overflow trigger. Set it whenever the |
estimationBias | number | undefined | 1.12 | 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. See example |
gapWidth | number | undefined | 4 | 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. See example |
itemsrequired | BbBreadcrumbsItem[] | - | Array of items that describe how the breadcrumbs should behave.
Compatible with navigating through Each item is |
offsetWidth | number | undefined | 0 | 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. See example |
pt | PtMap<BbBreadcrumbsPtPart, BbBreadcrumbsPtState> | undefined | - | Passthrough, object form: the same keys as the |
pt:icon | PtValue | undefined | - | |
pt:icon:active | PtValue | undefined | - | |
pt:icon:disabled | PtValue | undefined | - | |
pt:item | PtValue | undefined | - | |
pt:item:active | PtValue | undefined | - | |
pt:item:disabled | PtValue | undefined | - | |
pt:root | PtValue | undefined | - | |
pt:root:active | PtValue | undefined | - | |
pt:root:disabled | PtValue | undefined | - | |
pt:text | PtValue | undefined | - | |
pt:text:active | PtValue | undefined | - | |
pt:text:disabled | PtValue | undefined | - |
Slots
The listed properties are the ones exposed to the slot scope.
| Name | Type | Description |
|---|---|---|
<key> | BbBreadcrumbsItemSlotProps | One crumb's label, by its |
<key>:append | BbBreadcrumbsItemSlotProps | The glyph after one crumb's label; beats |
<key>:prepend | BbBreadcrumbsItemSlotProps | The glyph before one crumb's label; beats Content inside the link, so keep it non-interactive and mark a decorative mark |
append | BbBreadcrumbsEdgeSlotProps | Content rendered after the breadcrumb list, in a dedicated append region. The natural home for compact page actions on a detail header. Keep them |
divider | Record<string, never> | Replaces the default separator rendered between breadcrumb items. The only way to change the separator: the v2 |
ellipsis | BbBreadcrumbsEllipsisSlotProps | Replaces the default Repaints the overflow trigger, which stays a real button with a localized, count-aware label and a keyboard-complete menu. The scope carries |
item:append | BbBreadcrumbsItemSlotProps | Content rendered after **every** breadcrumb item's link/button. Generic
fallback below a per-item Same precedence as |
item:prepend | BbBreadcrumbsItemSlotProps | Content rendered before **every** breadcrumb item's link/button, in the
leading edge region. Generic fallback: a per-item The generic fallback for every crumb. A per-key |
prepend | BbBreadcrumbsEdgeSlotProps | 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 |