Breadcrumb
Navigation trail showing the user's location in a hierarchy, with support for collapsed items, custom separators, and RTL.
Playground
Installation
pnpm add @tessinaui/uiUsage
import {
Breadcrumb,
BreadcrumbList,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbPage,
BreadcrumbSeparator,
BreadcrumbEllipsis,
} from "@tessinaui/ui";<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="/components">Components</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>Examples
Default
A basic breadcrumb trail with links and a current page.
Sizes
Five scales from xs to xl adjust text and separator size.
Separators
Choose the auto-rendered separator with separator="chevron" or separator="slash".
Collapsed
Use BreadcrumbEllipsis to condense a long trail into a "more pages" marker.
Background
Set background to wrap the trail in a bg-secondary pill.
Loading
BreadcrumbSkeleton renders placeholder crumbs while data loads.
API Reference
Breadcrumb props
Renders a <nav aria-label="Breadcrumb"> element.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Scales text and separator icon size |
separator | "chevron" | "slash" | "chevron" | Auto-rendered separator type when BreadcrumbSeparator has no children |
dir | "ltr" | "rtl" | "ltr" | Text direction — in RTL the chevron separator rotates 180° |
background | boolean | false | Wraps the breadcrumb in a bg-secondary rounded-full pill with size-appropriate padding |
BreadcrumbList props
Renders an <ol> element. Accepts all standard list HTML attributes.
BreadcrumbItem props
Renders a <li> element. Accepts all standard list item HTML attributes.
BreadcrumbLink props
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | — | Link destination |
disabled | boolean | false | Mutes the link and removes pointer events |
Accepts all standard anchor HTML attributes.
BreadcrumbPage props
Renders the current page as a <span> with aria-current="page" and aria-disabled="true". Accepts all standard span HTML attributes.
BreadcrumbSeparator props
Renders a <li role="presentation" aria-hidden="true">. When empty, auto-renders the separator type configured on Breadcrumb. Pass children to render a custom separator:
<BreadcrumbSeparator>
<span aria-hidden="true">·</span>
</BreadcrumbSeparator>BreadcrumbEllipsis props
Renders a <span> with a MoreHorizontal icon, sized to match the current size. Accepts all standard span HTML attributes.