Preview Updated 2026-05-10

Breadcrumb

Location-trail navigation; the last item is the current page (not clickable) and the separator is customizable.

Basic usage

Each items entry is { label, href? }. The last entry is rendered as the current page (not clickable) regardless of whether href is provided.

const items = [
{ label: 'Home', href: '/' },
{ label: 'Components', href: '/components/' },
{ label: 'Breadcrumb' },
];

<CfBreadcrumb :items="items" />

const items = [
{ label: 'Home', href: '/' },
{ label: 'Components', href: '/components/' },
{ label: 'Breadcrumb' },
];

<CfBreadcrumb items={items} />

Custom separator

separator defaults to /; common alternatives are › / · / →. Any character works.

<CfBreadcrumb :items="items" separator="/" />
<CfBreadcrumb :items="items" separator="›" />
<CfBreadcrumb :items="items" separator="·" />
<CfBreadcrumb :items="items" separator="→" />

<CfBreadcrumb items={items} separator="/" />
<CfBreadcrumb items={items} separator="›" />
<CfBreadcrumb items={items} separator="·" />
<CfBreadcrumb items={items} separator="→" />

Long trails

For deeper hierarchies the leading items become clickable links and the last is the current location.

const items = [
{ label: 'Home', href: '/' },
{ label: 'Organizations', href: '/orgs/' },
{ label: 'Some team', href: '/orgs/team-x/' },
{ label: 'Projects', href: '/orgs/team-x/projects/' },
{ label: 'Deep folder' },
];

<CfBreadcrumb :items="items" separator="›" />

<CfBreadcrumb items={items} separator="›" />

API

Prop	Type	Default	Description
`items`	`Array<{ label: string; href?: string }>`	`[]`	Trail items; the last entry is the current page
`separator`	`string`	`'/'`	Separator; common values include `›` `·` or any custom character