Components
Breadcrumbs
Navigation breadcrumb trail showing page hierarchy, composed of breadcrumb items with chevron separators.
Installation
npx asteria-ui add breadcrumbsUsage
import { BreadcrumbItem, Breadcrumbs } from "@/components/ui/breadcrumbs";
<Breadcrumbs>
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
<BreadcrumbItem current>Installation</BreadcrumbItem>
</Breadcrumbs>Breadcrumbs auto-inserts a chevron separator between children — you never
place separators manually.
API reference
Breadcrumbs just forwards its native nav props — separators are inserted automatically between children, so there's nothing to configure there.
BreadcrumbItem
| Prop | Type | Default | Description |
|---|---|---|---|
| current | boolean | false | Marks this as the current page — renders as non-interactive text with aria-current="page" instead of a link. |
| href | string | — | Link target (native anchor prop). Ignored when current is set. |
Accessibility
Accessibility
Landmark.
<nav aria-label="Breadcrumb">.Structure.
ol/li— every direct child of the list, including each separator, is anli.Current page.
aria-current="page", rendered as non-interactive text rather than a link.Separators. Each is its own
<li role="presentation" aria-hidden="true">— satisfies both the list structure and the hidden-from-AT requirement at once.