Installation
CLI
Install the component using the StarUI CLI:
Examples
Custom Separators
Override the default chevron by passing any child to BreadcrumbSeparator — icons, text characters, or styled spans
With Icons
Pair icons with text in BreadcrumbLink and BreadcrumbPage for a file-browser style path
From Data
Build breadcrumbs from a list of (label, href) tuples — create a fresh BreadcrumbSeparator per iteration
Responsive
Collapse middle segments into BreadcrumbEllipsis on mobile using Tailwind responsive utilities
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
href |
str |
'#' |
Link destination for BreadcrumbLink. Renders as an <a> element |
cls |
str |
'' |
Additional CSS classes — accepted by all sub-components |
| Component | Description |
|---|---|
Breadcrumb |
Root <nav aria-label='breadcrumb'> container |
BreadcrumbList |
Ordered list (<ol>) wrapper. Provides flex layout with gap and text-sm styling |
BreadcrumbItem |
List item (<li>) for a single breadcrumb segment |
BreadcrumbLink |
Anchor (<a>) with hover color transition. Props: href (str, default '#') |
BreadcrumbPage |
Current page indicator (<span aria-current='page'>). Non-interactive, styled in foreground color |
BreadcrumbSeparator |
Visual separator (<li role='presentation' aria-hidden='true'>). Defaults to a chevron-right icon — pass any child to override |
BreadcrumbEllipsis |
Collapsed-items indicator with a horizontal dots icon and sr-only 'More' text for screen readers |