Components / Breadcrumbs
Breadcrumbs
Navigation breadcrumb trail with custom separator, icon support, size variants, responsive CSS collapse on small screens, and JS-based maxVisible collapse with expandable ellipsis.
navigation v0.5.0
Playground
Examples
Basic
<cg-breadcrumbs></cg-breadcrumbs>Responsive collapse
<cg-breadcrumbs maxVisible="3"></cg-breadcrumbs>Sizes
<cg-stack gap="md"><cg-breadcrumbs size="sm"></cg-breadcrumbs><cg-breadcrumbs size="lg"></cg-breadcrumbs></cg-stack>Import
import { CgBreadcrumbs } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-breadcrumbs';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
items | BreadcrumbItem[] | — | Breadcrumb items — {label, href?, icon?} |
separator | string | "/" | Separator character between items |
size | "sm" | "md" | "lg" | "md" | Text and spacing size |
maxVisible | number | 0 | Max visible items (0 = show all). Shows first + last (maxVisible-1) items with ellipsis. |
Events
| Event | Detail | Description |
|---|---|---|
cg-breadcrumb-click | {label: string, href?: string, index: number} | When a breadcrumb link is clicked |