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. |
Item (IBreadcrumbItem): label, to?, href?, icon?, current?.
Emits: itemClick(item, index).
Slots: #item="{ item, index, isCurrent }", #separator.