Breadcrumbs ​

A navigation aid that shows the user’s current location within a hierarchy and allows quick navigation to parent pages.

Example ​

Prefix slot ​

API Reference ​

Show types
typescript
import { RouterLinkProps } from 'vue-router'

export interface BreadcrumbItem {
  /** Text shown for the breadcrumb item */
  label: string

  /** Route location used when the item is a link */
  route?: RouterLinkProps['to']

  /** Click handler for non-router breadcrumb items */
  onClick?: () => void

  /** Allows passing additional custom fields */
  [key: string]: any
}

export interface BreadcrumbsProps {
  /** Ordered list of breadcrumb items */
  items: BreadcrumbItem[]
}
Prop Default Type
items*
—
BreadcrumbItem[]

Ordered list of breadcrumb items

Slot Payload
prefix
{ item: BreadcrumbItem; }

Content shown before each breadcrumb label

suffix
{ item: BreadcrumbItem; }

Content shown after each breadcrumb label

BadgeButton