Breadcrumb · 0nlyType

Example

Rest

Pointed at

Stack, pointed at

Elided

Elide, opened

Install

Run it in a project that has the shadcn CLI set up. It brings the 0nlyType base along.

npmpnpmyarnbun

npx shadcn@latest add https://thedirectors.agency/ui/r/breadcrumb.json

Usage

breadcrumb-example.tsx

import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, type BreadcrumbProps } from "@/components/ui/breadcrumb"type Path = { steps: string[]; here: string; variant?: BreadcrumbProps["variant"]; force?: string; open?: boolean }/** A path: each step a link, a hairline between each pair, and where you are last. */function Path({ steps, here, variant, force, open }: Path) {return (<Breadcrumb variant={variant}><BreadcrumbList data-force={open ? "hover" : undefined}>{steps.map((step, i) => [<BreadcrumbItem key={step}><BreadcrumbLink href={`#${step.toLowerCase()}`} data-force={i === 0 ? force : undefined}>{step}</BreadcrumbLink></BreadcrumbItem>,<BreadcrumbSeparator key={`${step}-/`} />,])}<BreadcrumbItem><BreadcrumbPage>{here}</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>)}const long = ["Work", "Identity", "Nordic", "Halden"]export default function Example() {return (<div className="grid w-full justify-items-start gap-12"><div className="grid justify-items-start gap-3"><span className="ot-label">Slashes</span><Path steps={["Work", "Identity"]} here="Halden" /></div><div className="grid justify-items-start gap-3"><span className="ot-label">Stack</span><Path variant="stack" steps={["Work", "Identity"]} here="Halden" /></div><div className="grid justify-items-start gap-3"><span className="ot-label">Elide, a long path</span><Path variant="elide" steps={long} here="Wordmark" /></div></div>)}

Contract

Underneath: native list.
Anatomy: <nav class="ot-crumbs" aria-label="Breadcrumb"><ol>…</ol></nav>. The dividers are drawn hairlines, leaning 24° like slashes. Pointing at a step darkens the hairlines on either side and leans them in (14° and −14°), so they hold it like a pair of brackets. Each hairline runs the whole line, descender to cap, so it reads as drawn, not typed. The current item is yours: the italic, in ink, with aria-current="page".
variant on the nav (data-variant): slashes (the default), stack or elide.
stack: "It / has / to be / design." One step a line, each set 1.2em further in, the way here in a heavy narrow roman (700, width 75%) and where you are the large italic at the foot (f at the expression scale). No hairlines: the stair divides it. Pointing at a step, or focusing it, sets every step below it back in pencil: what you would leave.
elide: for a long path. The first step and the last two stay; each step between is elided to a full stop in pencil, so the ellipsis counts what it holds, and the hairlines between them close. For a still pointer (a 240ms wait) or at once for focus, each stop opens back into its word, in turn. Every step stays a link in the page, so a screen reader hears the whole path and Tab reaches each one; the stops are drawn (content: "." / "") and never read.
Keyboard: Tab through the links. Right to left, the leans mirror and a stack steps in from the right.

Props

Props of Breadcrumb
Prop	Type	Default	What it does
`Breadcrumb variant`	`"slashes" \| "stack" \| "elide"`	`"slashes"`	slashes: one line, and pointing at a step leans the hairlines either side in to hold it. stack: one step a line, each set further in, in a heavy narrow roman; where you are is the large italic at the foot, and pointing at a step sets every step below it back in pencil. elide: the first step and the last two stay; each step between is a full stop, and they open back into words for a still pointer or for focus.
`BreadcrumbLink asChild`	`boolean`	`false`	Render your own link (Next's Link, say) with the crumb's look.
`BreadcrumbPage`	`span`		Where you are: italic, ink, aria-current="page".
`BreadcrumbSeparator`	`li`		The leaning hairline. Place one between each pair of items; it is hidden from screen readers. A stack draws none; elide closes the ones between elided steps.
`elide: what is elided`	`note`		Every step stays a link in the page, so a screen reader hears the whole path and Tab reaches each one (focus opens the path). The full stops are drawn, not read.

Craft

Where its move comes from

Where its move comes from
Component	Reference	Move
Breadcrumbs	Swiss diagonals	Drawn, leaning hairlines
Stack breadcrumbs	"It has to be design."	The path as a stair, heavy narrow roman down to the large italic
Elided breadcrumbs	Elision in quotation (…)	A full stop for each step left out

How it moves

How it moves
Component	Articulation	What moves
Breadcrumbs	Lean	The hairlines either side hold the step you point at
Stack breadcrumbs	Recede	Pointing at a step sets every step below it back in pencil
Elided breadcrumbs	Arpeggio	For a still pointer or focus, each full stop opens back into its word, in turn