Skip to content

BbBreadcrumbs

Renders hierarchical navigation paths.

import { BbBreadcrumbs } from 'bitboss-ui';

On this page

Props

NameTypeDefaultDescription
disabledboolean | undefinedfalse

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.

See example
dividerWidthnumber | undefined16

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.

See example
ellipsisWidthnumber | undefined-

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 .

See example
estimationBiasnumber | undefined1.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
gapWidthnumber | undefined4

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
itemsrequiredBbBreadcrumbsItem[]-

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

Each item is { key, text } plus a target from the BbBaseButton navigation surface (minus block, tag and type), or an onClick when the hierarchy lives in client state. Leave the last item without a target: that is what makes it the current page. Keys are strings in v3 — a numeric key now fails type checking.

See example
offsetWidthnumber | undefined0

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
ptPtMap<BbBreadcrumbsPtPart, BbBreadcrumbsPtState> | undefined-

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

pt:iconPtValue | undefined-
pt:icon:activePtValue | undefined-
pt:icon:disabledPtValue | undefined-
pt:itemPtValue | undefined-
pt:item:activePtValue | undefined-
pt:item:disabledPtValue | undefined-
pt:rootPtValue | undefined-
pt:root:activePtValue | undefined-
pt:root:disabledPtValue | undefined-
pt:textPtValue | undefined-
pt:text:activePtValue | undefined-
pt:text:disabledPtValue | undefined-

Slots

The listed properties are the ones exposed to the slot scope.

NameTypeDescription
<key>BbBreadcrumbsItemSlotProps

One crumb's label, by its key through slotKey; falls back to item.text. A crumb folded into the overflow menu follows BbDropdown's slot rules instead.

See example
<key>:appendBbBreadcrumbsItemSlotProps

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

See example
<key>:prependBbBreadcrumbsItemSlotProps

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.

See example
appendBbBreadcrumbsEdgeSlotProps

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.

See example
dividerRecord<string, never>

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.

See example
ellipsisBbBreadcrumbsEllipsisSlotProps

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.

See example
item:appendBbBreadcrumbsItemSlotProps

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

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

See example
item:prependBbBreadcrumbsItemSlotProps

Content rendered before **every** breadcrumb item's link/button, in the leading edge region. Generic fallback: a per-item <key>: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-key <key>: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.

See example
prependBbBreadcrumbsEdgeSlotProps

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.

See example