CnBreadcrumbs

Declarative breadcrumb trail. Feed it the whole path as one crumbs array — first entry is the root (typically a Home crumb), last entry is the current location. Every crumb but the last navigates via its to (router target) or href (plain URL); the last crumb renders unlinked with aria-current="page", per the WAI-ARIA breadcrumb pattern.

Wraps: NcBreadcrumbs, NcBreadcrumb, CnIcon

Try it

Loading CnBreadcrumbs playground…

Usage

<template>
	<CnBreadcrumbs :crumbs="crumbs" />
</template>

<script>
import { CnBreadcrumbs } from '@conduction/nextcloud-vue'

export default {
	components: { CnBreadcrumbs },
	computed: {
		crumbs() {
			return [
				{ icon: 'Home', to: { name: 'SecretList' } },
				{ label: 'Team vault', to: { name: 'SecretListFolder', params: { folderId: '7' } } },
				{ label: 'Production' }, // current folder — unlinked, aria-current="page"
			]
		},
	},
}
</script>

A typical mount point is a page component's below-header area, e.g. CnIndexPage:

<CnIndexPage ...>
	<template #below-header>
		<CnBreadcrumbs :crumbs="crumbs" />
	</template>
</CnIndexPage>

Props

Prop	Type	Default	Required	Description
crumbs	Array	[]	No	The trail, root first, current location last. Each crumb: { label, to?, href?, icon? }. label is the visible (pre-translated) text; to a vue-router target; href a plain URL (to/href are ignored on the last crumb); icon a PascalCase MDI name resolved through the CnIcon registry (register it with registerIcons() at boot). A crumb may be icon-only (e.g. the Home root).
ariaLabel	String	t('Breadcrumbs')	No	Accessible name of the breadcrumb nav landmark. Override per surface when a page carries more than one trail.

Behavior

• Last crumb = current location. It never navigates, even when the caller supplies to/href, and carries aria-current="page" so assistive tech announces the position.
• Empty trail renders nothing — no empty nav landmark is left behind.
• Responsive collapse (middle crumbs folding into an overflow menu on narrow widths) and the chevron separators come from the underlying NcBreadcrumbs.

Reference (auto-generated)

The tables below are generated from the SFC source via vue-docgen-cli. They reflect what's actually in CnBreadcrumbs.vue and update automatically whenever the component changes.

OpenRegister reliance

none: this component does not touch OpenRegister, directly or through anything it imports. 0 direct references, 0 files reached through imports.

See the reliance overview for the filterable list.

Props

Name	Type	Required	Default	Description
crumbs	union		[]	The trail, root first, current location LAST. Each crumb: { label, to?, href?, icon? } — label is the visible (already translated) text, to a vue-router target, href a plain URL (use one or the other; both are ignored on the last crumb), and icon a PascalCase MDI name resolved via the CnIcon registry (register it with registerIcons() at boot).
ariaLabel	string		() => t('nextcloud-vue', 'Breadcrumbs')	Accessible name of the breadcrumb nav landmark. Defaults to the lib's translation of "Breadcrumbs"; override per surface when a page carries more than one trail.
rootText	boolean		false	Draw the FIRST crumb's label as text. NcBreadcrumbs gives the root crumb a home icon and prints its label only as the accessible name, so "All cases" read as a house. Off by default, which keeps the home icon. A first crumb with its own icon keeps that icon.
separator	string		''	Draw this text between the crumbs (for example /) instead of NcBreadcrumbs' chevron. Empty (the default) keeps the chevron. The separator is decoration: it is not read out.

The root crumb as text (rootText)

NcBreadcrumbs draws the root crumb as a home icon and uses its label only as the accessible name. rootText (default false) prints the label instead, for a trail whose first crumb is a named list ("All cases") rather than home. A first crumb with its own icon keeps that icon. CnDetailPage sets it for config.breadcrumb.

<CnBreadcrumbs root-text :crumbs="[{ label: 'All cases', to: { name: 'Cases' } }, { label: '2026-0082' }]" />

A text separator (separator)

separator (default empty) draws that text between the crumbs, for example /, instead of the chevron. It is decoration and is not read out. CnDetailPage passes config.breadcrumb.separator. The gap around it follows --cn-breadcrumbs-separator-gap (0 by default).