Breadcrumbs
Breadcrumbs show where the user is in a hierarchy. They collapse when there are too many items: more than 3 on desktop/tablet and more than 2 on viewports below md (~768px). In the collapsed state, the first and last items stay visible and middle segments move into an overflow menu.
Loading Code Block...Build items as an array of objects. Put icon values in JSX (e.g. <UserIcon size={16} />). Navigation uses each item’s href inside the component.
Define items in <script setup> (or composables). Use h(Icon, { size }) or a component reference on icon in data, or skip icon on the item and use #icon-{index} slots in the template.
Long trail with icons
Section titled “Long trail with icons”Use @hubtel/react-icons (React) or @hubtel/vue-icons with h() (Vue) for icon. Give each item a stable id where possible, and set href when the segment is a link (external URLs open in a new tab).
Loading Code Block...Short trail
Section titled “Short trail”With only a few segments (for example three), the trail usually stays fully expanded on desktop widths.
Loading Code Block...Loading Code Block...Separator (chevron | slash)
Section titled “Separator (chevron | slash)”chevron (default) uses a chevron between items; slash uses /.
Loading Code Block...Item tooltips
Section titled “Item tooltips”Set tooltipHeader (and optionally tooltipSubtext, tooltipPosition, tooltipAlignment) on a BreadcrumbItem to surface a tooltip on hover. Both frameworks support these fields.
In React the tooltip wraps the entire row, so hovering anywhere on the icon or text triggers it.
In Vue the tooltip currently wraps the icon only — hover the icon (or the #icon-{index} slot content) to trigger it. Hovering the text label does not trigger the tooltip.
Loading Code Block...Per-index icon slots
Section titled “Per-index icon slots”Vue exposes named slots #icon-0, #icon-1, …, #icon-{lastIndex} for fully custom icon markup. When a slot is provided for an index, it takes precedence over item.icon.
Breadcrumbs
Section titled “Breadcrumbs”| Props | Default | Type | Description |
|---|---|---|---|
| items* | [] | BreadcrumbItem[] | Segments to render, in order. Each item should include display text; add `href` / `icon` / tooltip metadata as needed. |
| separator | 'chevron' | 'chevron' | 'slash' | Style of delimiter between segments. |
BreadcrumbItem
Section titled “BreadcrumbItem”| Props | Default | Type | Description |
|---|---|---|---|
| text* | - | string | Visible label for the segment. |
| href | - | string | Navigation target. External URLs open in a new tab via `window.open`; internal paths use `window.location.href`. |
| icon | - | ReactNode | Optional leading icon. Pass a JSX element (e.g. `<UserIcon size={16} />` from `@hubtel/react-icons`). The icon span sits to the left of the label with a 4 px right margin. |
| tooltipHeader | - | string | Tooltip title shown on hover. React wraps the entire row; Vue wraps the icon only. |
| tooltipSubtext | - | string | Tooltip supporting line. |
| tooltipPosition | 'bottom' | 'top' | 'right' | 'bottom' | 'left' | Tooltip placement relative to its trigger. |
| tooltipAlignment | 'start' | 'start' | 'center' | 'end' | Tooltip alignment along the trigger axis. |