Components
Breadcrumb
Show an SEO-friendly breadcrumb trail with JSON-LD structured data.
UiBreadcrumb renders an ordered trail from root to current page. The last item (or any item with current: true) renders as plain text with aria-current="page". By default it emits a schema.org BreadcrumbList as inline JSON-LD.
Add a breadcrumb
<script setup lang="ts">
import type { IBreadcrumbItem } from '@colorffy/ui'
import { NuxtLink } from '#components'
const items: IBreadcrumbItem[] = [
{ label: 'Home', to: '/', icon: '' },
{ label: 'Projects', to: '/projects' },
{ label: 'Atlas' }, // no `to` → current page
]
</script>
<template>
<UiBreadcrumb
:as="NuxtLink"
:items="items"
base-url="https://example.com"
separator-icon=""
/>
</template>
Collapse a long trail
maxItems collapses the middle visually; the JSON-LD keeps every item:
<template>
<UiBreadcrumb :items="items" :max-items="3" />
</template>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | IBreadcrumbItem[] | — | Ordered trail (required). |
as | string | object | 'a' | Link component ('a', 'router-link', NuxtLink). |
separator | string | '/' | Text separator. |
separatorIcon | string | null | — | Material icon separator (overrides separator). |
baseUrl | string | — | Absolute origin for JSON-LD URLs. |
structuredData | boolean | true | Emit schema.org JSON-LD. |
maxItems | number | 0 | Collapse long trails (0 = off; visual only). |
ariaLabel | string | 'Breadcrumb' | <nav> landmark name. |
customClass | string | string[] | Record<string, boolean> | null | — | Extra classes for the <nav>. |
Item (IBreadcrumbItem): label, to?, href?, icon?, current?.
Emits: itemClick(item, index).
Slots: #item="{ item, index, isCurrent }", #separator.
CSS variables
Set these on :root, or on any wrapper to restyle only the breadcrumbs inside it.
:root {
--cffy-breadcrumb-color: var(--cffy-primary-a10);
--cffy-breadcrumb-separator-color: var(--cffy-primary-a30);
}
| Variable | Default | Controls |
|---|---|---|
--cffy-breadcrumb-gap | --cffy-space-8 | Space between items and separators |
--cffy-breadcrumb-color / --cffy-breadcrumb-hover-color | --cffy-muted-a10 / --cffy-on-background | Links, and hovered or focused links |
--cffy-breadcrumb-current-color / --cffy-breadcrumb-current-font-weight | --cffy-on-background / --cffy-fw-600 | Current page |
--cffy-breadcrumb-current-max-width | 32rem | Width before the current label is truncated |
--cffy-breadcrumb-separator-color | --cffy-muted-a10 | Separators and the collapsed … |
--cffy-breadcrumb-font-size | --cffy-fs-xs | Item text |
--cffy-breadcrumb-icon-size / --cffy-breadcrumb-icon-color | --cffy-fs-base / --cffy-muted-a10 | Item icons (the size also applies to icon separators) |
--cffy-breadcrumb-easing / --cffy-breadcrumb-duration | ease / --cffy-duration-150 | Link color transition |