Breadcrumb

Where you are, and the way back — collapsing the middle when the trail gets long.

<Breadcrumbitems={[  { label: "Projects", href: "/projects", icon: IconCube },  { label: "acme", href: "/projects/acme" },  { label: "acme-api" },]}/>

Breadcrumb renders a trail of links with the last entry as the current page — not a link, and carrying aria-current="page".

Usage

tsx

import { Breadcrumb } from "@heyo-sh/heyo-ui";<Breadcrumb  items={[{ label: "Workers", href: "/workers" }, { label: "acme-api" }]}/>;

Collapsing a long trail

maxItems keeps the first and last entries and folds everything between them into an ellipsis. A breadcrumb that wraps onto a second line has stopped being a breadcrumb.

<BreadcrumbmaxItems={3}items={[  { label: "Organisation", href: "/" },  { label: "Projects", href: "/projects" },  { label: "acme", href: "/projects/acme" },  { label: "Workers", href: "/projects/acme/workers" },  { label: "acme-api" },]}/>

Router links

render swaps the <a> for whatever your router uses, per crumb.

tsx

<Breadcrumb  items={[    { label: "Workers", render: <Link to="/workers" /> },    { label: "acme-api" },  ]}/>

A different separator

<Breadcrumbseparator="/"items={[{ label: "heyo-sh", href: "/" }, { label: "heyo-ui" }]}/>

Properties

itemsCrumb[]required

The trail. The last entry is rendered as the current page.

maxItemsnumberoptional

Collapses the middle into an ellipsis past this many entries.

separatorReactNodeoptional

What sits between crumbs. It defaults to a chevron.

classNamestringoptional

Merged into the <nav>.

Crumb

labelReactNoderequired

The crumb's text.

hrefstringoptional

Makes the crumb a link. Omit it for the current page.

iconIconLikeoptional

A leading glyph — usually only on the first crumb.

renderRenderPropoptional

Swaps the <a> for a router link: render={<Link to="/x" />}.

Loading documentation…