Breadcrumbs

Shows a page's place in a hierarchy. Ancestors are links; the current page is full ink.

Preview

In action

Trail

Studio / Vlak / Issue 03 — ancestors stay ink. The page is full ink.

A line of type that connects

When to use

Use it for

Showing where a page sits in a hierarchy three or more levels deep.
The last item is the current page and carries no href.

Not for

Flat sites with one level.
As the primary navigation; pair it with a nav.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Breadcrumbs } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/breadcrumbs.

2. Vendor the source

npx @noorddev/vlak-cli add breadcrumbs

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/breadcrumbs.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Breadcrumbs } from "@noorddev/vlak-react";

<Breadcrumbs items={[{ label: "Studio", href: "/studio" }, { label: "Vlak", href: "/studio/vlak" }, { label: "Components" }]} />

Props

Breadcrumbs

A trail: ordered list in a nav, the current page marked.

Prop	Type	Default	Description
`items`required	`Crumb[]`

Also accepts HTMLAttributes<HTMLElement>.

Keyboard

Keys	Does
`Tab`	Moves between the ancestor links
`Enter`	Follows the link

Accessibility

Renders <nav aria-label="Breadcrumb"> with an ordered list.
The last item is marked aria-current="page"; separators are aria-hidden.

Markup

<p class="rs-crumbs"><a class="rs-crumbs-link" href="/">Studio</a><span class="rs-crumbs-sep">/</span><span class="rs-crumbs-here">Vlak</span></p>

Classes

.rs-crumbs.rs-crumbs-list.rs-crumbs-item.rs-crumbs-link.rs-crumbs-sep.rs-crumbs-here