Breadcrumb

Shows the path to the current page within the workspace hierarchy. Deliberately quiet: a breadcrumb is a line of prose you read far more often than you click, so the whole family is colour-only on hover, with no fills, no movement inside the text line, and every separator kept silent to screen readers. Size and separator glyph are trail-wide decisions set once on the root and read by every part — a trail with a chevron at one joint and a slash at the next is a bug, not a feature.

tsx

1import {
2  Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage,
3  BreadcrumbSeparator, BreadcrumbEllipsis,
4} from "@pestoui/core"

Default

Separators

Set the glyph once on the root and every separator in the trail picks it up — no per-joint children, no chance of two joints drifting apart on size, colour or aria. Chevron is the default. Slash and arrow are glyphs; dot and line are drawn, so their rows get a flex context to centre them against the text. Chevron and arrow flip in RTL; a slash, a dot and a hairline are direction-agnostic and deliberately do not.

Per-joint override

A separator can override the trail default with variant, and explicit children beat both. This is for a structural break — a hairline marking where the workspace root stops and the path begins — not for decoration. Mixing glyphs joint to joint for its own sake reads as an accident.

Small

One notch down in type and gap, for dense chrome — a sticky topbar sitting beside small controls. Not for page headers, where the trail is the only orientation on screen. Like the separator, size travels by context, so the list, the links, the page, the separators and the ellipsis all move together.

Icon in a crumb

Drop an icon straight into a link or the current page. A crumb only becomes a flex line when it actually holds an svg — a plain text crumb stays inline, which is what lets it wrap mid-trail the way prose does — and the icon takes its size from the trail, so it can never disagree with the text beside it.

Collapsed middle

When the trail is longer than the space it has, keep the root and the last two crumbs and fold the middle into an ellipsis. On its own the ellipsis is decorative and silent to screen readers — collapsed crumbs that cannot be reached are not worth announcing, and the reachable ones are still read out either side of it.

Pass asChild and the same ellipsis becomes a real control: it drops the aria-hidden, renders through a slot so a menu trigger's props and ref land on a focusable element, and grows the one resting box in the family — a square target where a full round cannot collapse the shape. It is the only part of a breadcrumb that gets a hover fill. The accessible name comes from label as visually hidden text rather than aria-label, so it stays translatable and survives extraction.

Props

Prop	Type	Default	Description
size	"default" \| "sm"	"default"	Trail-wide type scale, passed down by context. sm is for dense chrome — a sticky topbar beside small controls — not for page headers. Also emitted as data-size on the nav for descendants and consumers.
separator	"chevron" \| "slash" \| "arrow" \| "dot" \| "line"	"chevron"	Glyph every separator in this trail renders unless it overrides locally or is given explicit children. Set once so a trail can never disagree with itself.
BreadcrumbSeparator variant	"chevron" \| "slash" \| "arrow" \| "dot" \| "line"	—	Per-joint override. The root's separator supplies the default, and explicit children still beat both. Every kind stays inside a presentational, aria-hidden row, so the trail reads as "Workspace, Agents, Overview" rather than "Workspace, greater-than, Agents".
BreadcrumbLink asChild	boolean	false	Render the child element instead of an <a> — a router Link, typically.
BreadcrumbEllipsis asChild	boolean	false	Turn the ellipsis into a real control so it can be a menu trigger. Supply a single element child to slot into, or omit children and a <button> is used. Without it the ellipsis stays a silent decorative glyph.
BreadcrumbEllipsis label	string	"More pages"	Accessible name for the trigger form, rendered as visually hidden text rather than aria-label so it is translatable and survives extraction. Ignored by the decorative form, which is aria-hidden.

PreviousBrand Icons Next Button

Pesto UI · 117 documented components