Components

Breadcrumbs

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

Live Demo

Breadcrumb trail with chevron separators. The last item is highlighted as the current page.

Chevron separator

Slash separator

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 →