Breadcrumb
The trail of parent pages shown in the top bar of 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, ...) | - |
Guidelines
Do
- Pass it through
PageNav'sbreadcrumbprop for a nested page (an application, an automation, a scan) - the last item renders as the current page, earlier items as links. - Pass
label: nullfor an item whose name is still loading (an async application/automation name) - it renders a skeleton in place of the text. - Add
labelClass: 'truncate max-w-xs'on an item whose label is a long, user-entered name that could overflow the top nav.
- Pass the full path even for a 5+ level page - items beyond the first, second-to-last, and last collapse into a single "..." crumb automatically.
Don't
- Don't render this standalone for a single static page title - inside
PageNav, a one-item breadcrumb is the title. - Don't pass an
icon/avataron an item - this design system's top nav breadcrumb doesn't use them; if a real need for one comes up, it's a new addition to this component, not a workaround on top of it.
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>