Navigation

Breadcrumbs

A trail of linked ancestor pages ending in the current, non-interactive page, with optional per-crumb icons.

html

<UiBreadcrumbs :items="..." />

Items

required

items is the trail, from root to current page. The last crumb always renders as the current page: no link, no hover state, however you've configured the ones before it.

`icon` — per-crumb leading icon

Non-navigable crumb — omit `to`

`disabled`

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop

Type

Default

Description

itemsrequired

BreadcrumbItem[]

—

The trail of crumbs to display, from root to current page.

Types

interface BreadcrumbItem {
    /**
     * Text label for this crumb.
     */
    label: string;

    /**
     * The route or URL this crumb links to. Omit for a non-navigable segment, rendered as plain
     * text. Ignored on the last item, which always renders as the current, non-interactive page.
     */
    to?: string;

    /**
     * Name of the icon displayed before the label.
     */
    icon?: string;

    /**
     * Renders this crumb as plain, non-interactive text instead of a link.
     * @defaultValue false
     */
    disabled?: boolean;
}