Breadcrumb

Hierarchical location with reasonable truncation and accessible names.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add breadcrumb

What add breadcrumb installs alongside the component. The CLI skips any you already have in a compatible version.

3 examples · 1 component

Links for the ancestors and aria-current on the current page.

Middle levels behind an ellipsis menu; a long label truncates with its full text in title.

Pass a glyph as children; it stays decorative.

Forwards props and ref to the container element; it only adds composition utilities.

Prop	Type	Default
`Breadcrumb` Navigation landmark; aria-label defaults to "Breadcrumb".	`nav`	`"Breadcrumb"`
`BreadcrumbList / BreadcrumbItem` Ordered list that wraps on narrow screens.	`ol / li`	—
`BreadcrumbLink` A level you can go back to; labels truncate at 20ch (add title for the full text).	`a`	—
`breadcrumbLinkClass` Link styles for router links (NextLink, react-router…).	`string`	—
`BreadcrumbPage` The current page, with aria-current="page".	`span`	—
`BreadcrumbSeparator` Decorative and aria-hidden; pass children for a custom glyph. Flips in RTL.	`li`	`chevron`
`BreadcrumbEllipsis` Stands for collapsed levels; wrap it in a DropdownMenuTrigger.	`span`	`"More pages"`

The nav is a named landmark and the ol exposes the number of levels; separators are hidden so they are not read between items.

The current page is a span with aria-current="page", not a link to itself.

Truncated labels keep their full text in title; collapsed levels stay reachable through the ellipsis menu, whose button has an accessible name.

Server-safe: no client JavaScript unless you add the dropdown.