Breadcrumbs
A navigation trail showing the current page's position in the hierarchy.
Contract
Items are data. The last item never receives an href and renders as plain, non-interactive text marked aria-current="page". renderLink injects a router element without coupling the component to routing state.
| Axis | Contract |
|---|---|
| current page | the last item renders as text, not a link, and carries aria-current="page" |
| separators | rendered between every item except after the last, and hidden from assistive tech |
| routing | renderLink(item, index) composes a router link without nested anchors |
| empty state | an empty items array renders nothing |
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/breadcrumbs.css';Scroll inside the code area to read long lines.
Imports
import { TRBreadcrumbs } from '@tinyrack/ui/components/breadcrumbs';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Pass a custom separator to match the surrounding design, such as a chevron instead of the default slash.
API
items accepts { label, href? }[]. Omit href (always true for the final item) to render plain text instead of a link. separator accepts any ReactNode and defaults to /. The landmark's accessible name is set with label, defaulting to Breadcrumb. renderLink receives the item and its index; use it to compose React Router or another client router without nesting anchors.
The root preserves native nav attributes, className, style, events, and React 19 ref. Styles use Tinyrack semantic color, spacing, and typography tokens.