Data Display·Available inReact Vue Angular·View as Markdown

Preview

example.tsxtsx

Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.

Installation

Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.

$ pnpm add @sisyphos-ui/react

Then import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";

Usage

Idiomatic usage in each supported framework

example.tsx

import { Breadcrumb } from "@sisyphos-ui/react";

export const Crumbs = () => (
  <Breadcrumb
    items={[
      { label: "Home", href: "/" },
      { label: "Projects", href: "/projects" },
      { label: "Sisyphos UI" },
    ]}
  />
);

Collapsed middle

Set `maxItems` with `itemsBeforeCollapse` + `itemsAfterCollapse` to keep the trail compact on deep hierarchies.

example.tsxtsx

With icons

Each item accepts an `icon` ReactNode.

example.tsxtsx

Custom separator

Pass any ReactNode via `separator`.

example.tsxtsx

API

Prop	Type	Default	Description
items*	BreadcrumbItem[]	—	Ordered entries (`label`, optional `href`, `onClick`, `icon`, `key`). The last item is treated as the current page.
separator	ReactNode	"/"	Custom separator rendered between items.
maxItems	number	—	Collapses middle items into an ellipsis when the total exceeds this count.
itemsBeforeCollapse	number	1	Items kept before the ellipsis when collapsing.
itemsAfterCollapse	number	1	Items kept after the ellipsis when collapsing.

The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.

Accessibility

Adheres to the Breadcrumb WAI-ARIA design pattern.

Rendered inside a <nav aria-label="breadcrumb"> landmark wrapping an ordered list.
The last item is the current page — rendered as plain text with aria-current="page", never as a link.
Separators and the collapse ellipsis are aria-hidden="true", so screen readers announce only the trail items.
Middle items collapse behind maxItems without losing the first / last entries (itemsBeforeCollapse / itemsAfterCollapse).

Keyboard interactions

Key	Action
`Tab`	Moves focus through the breadcrumb links in trail order.
`Enter`	Activates the focused link (or button, for `onClick`-only items).

Need more?View on npm →