A navigation trail whose final item always renders as aria-current="page" text rather than a link. Separators are decorative icons. Links render with linkTag, so a router link component can replace the plain anchor; the item scoped slot allows full control of each entry.
Examples
Anchor links
The final entry is plain text; earlier ones link.
<UiBreadcrumb
:items="[
{ label: 'Home', href: '#' },
{ label: 'Products', href: '#' },
{ label: 'Notes' },
]"
/>Custom separator
Any MDI icon can separate the entries.
<UiBreadcrumb
separator-icon="mdi:slash-forward"
:items="[
{ label: 'Docs', href: '#' },
{ label: 'Components', href: '#' },
{ label: 'Breadcrumb' },
]"
/>Props
| Name | Type | Default | Description |
|---|---|---|---|
| itemsrequired | array | — | Entries `{ label, to?, href? }`, root first; the last renders as text. |
| ariaLabel | string | 'Breadcrumb' | Accessible name for the surrounding nav. |
| linkTag | string | 'a' | Element or component used for linked entries (e.g. NuxtLink). |
| separatorIcon | string | 'mdi:chevron-right' | MDI icon drawn between entries. |
Slots
| Slot | Description |
|---|---|
item | Override a single entry. Scope: `{ item, index, isLast }`. |