navigation / stable

Breadcrumbs

Hierarchy trail with links or in-place parent actions; the middle of long trails collapses into a … menu.

LIVE PREVIEW

Loading preview…

When to use

The 44px page top bar of nested pages (client → project → task).
Parent navigation within a record drawer using onAction.

Consider an alternative

Steps of a flow — use a stepper.
Sibling views — use Tabs.

Import

import { Breadcrumbs } from '@revido-llc/kit';

Keyboard interaction

Tab — move between crumbs
Enter — follow or act in place
Enter on … — open hidden crumbs

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


items (required)	BreadcrumbItem[]	—
aria-label	string	—	Accessible name of the navigation landmark. Default "Breadcrumbs".
className	string	—
endsAtCurrent	boolean	true	The last item is the current page (default). Pass false when the trail holds only ancestors and the page renders its own title (PageBar): every item stays a link and a chevron follows the last one.
maxItems	number	4	Most items shown before the middle collapses into a "…" menu. Default 4: with more, it shows the first item, "…", and the last two.

Examples

Short trail

<Breadcrumbs
  items={[
    { label: "Website redesign", href: "/projects/42" },
    { label: "Tasks", href: "/projects/42/tasks" },
    { label: "REV-128" },
  ]}
/>

Collapsed

More than 4 items: first, …, and the last two.

<Breadcrumbs items={trail} maxItems={4} />

In-place parent record

Open a parent in the current drawer through onAction, without changing the route.

<Breadcrumbs items={[
  { label: "Acme", href: "/projects/acme" },
  { label: "Messaging", onAction: () => openFeature(featureId) },
  { label: "ACME-8" },
]} />