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>Showcase
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.
Collapsible
A single disclosure that animates open and closed — built on Base UI's Collapsible primitive with four variants, five sizes, intent accents, and full RTL support.
Pagination
Navigate between pages of content. Five sizes, three active-page variants (default/primary/outline), five border-radius options (none/sm/md/lg/full), three nav styles (icon/label/none), smart ellipsis truncation, controlled/uncontrolled, and LTR/RTL support.