Breadcrumb

A hierarchical path shown in the top nav title row for a nested page.

<template>
  <Breadcrumb :items="[{ label: 'Context', to: '/context' }, { label: 'payments-service' }]" />
</template>

Props

Name	Type	Default
items	{ label: string \| null, to?: string, labelClass?: string }[]	—
...props	UBreadcrumb props (as, labelKey, ...)	—

Usage

Examples

Collapsed

Beyond 3 items, everything except the first, second-to-last, and last collapses into one '...' crumb.

<template>
  <Breadcrumb
    :items="[
      { label: 'Context', to: '/context' },
      { label: 'payments-service', to: '/context/payments-service' },
      { label: 'src', to: '/context/payments-service/src' },
      { label: 'controllers', to: '/context/payments-service/src/controllers' },
      { label: 'payment.controller.ts' },
    ]"
  />
</template>

Loading

`label: null` on an item renders a skeleton in its place, for a name that loads asynchronously.

<template>
  <Breadcrumb
    :items="[
      { label: 'Automations', to: '/automations' },
      { label: null },
    ]"
  />
</template>