Components

Breadcrumbs

A navigational aid that shows the user their current location within a page hierarchy. Supports custom separators and multiple sizes.

Installation

npm install @trinkui/react

Import

import { Breadcrumbs } from "@trinkui/react";

Usage

Pass an array of breadcrumb items. The last item is treated as the current page.

<Breadcrumbs
  items={[
    { label: "Home", href: "/" },
    { label: "Components", href: "/components" },
    { label: "Breadcrumbs" },
  ]}
/>

Custom Separator

Use the separator prop to change the divider between items.

{/* Default separator: "/" */}
<Breadcrumbs items={items} />

{/* Arrow separator */}
<Breadcrumbs separator=">" items={items} />

{/* Dot separator */}
<Breadcrumbs separator="·" items={items} />

{/* Custom React element */}
<Breadcrumbs separator={<ChevronRightIcon />} items={items} />

Sizes

Available in three sizes: sm, md, and lg.

<Breadcrumbs size="sm" items={items} />
<Breadcrumbs size="md" items={items} />
<Breadcrumbs size="lg" items={items} />

Props

Prop	Type	Default	Description
items	BreadcrumbItem[]	-	Array of breadcrumb items with label and optional href
separator	ReactNode	"/"	Separator element or string between breadcrumb items
size	"sm" \| "md" \| "lg"	"md"	Size of the breadcrumb text and spacing

Accessibility

Wrapped in a <nav> element with aria-label="Breadcrumb" for landmark navigation.
The current page (last item) has aria-current="page" to indicate it is the active page.
Separator characters are hidden from screen readers using aria-hidden="true".
Uses an ordered list (<ol>) to convey the hierarchical sequence to assistive technologies.

← Badge Button →