Breadcrumb

Where the current page sits in the site's hierarchy.

When to use

Use when: Pages sit in a hierarchy more than two levels deep and people move up it.
Avoid when: The site is flat, or the trail would only repeat the page title.

Installation

bunx shelf add breadcrumb

The source lands in src/components/ui/breadcrumb.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Breadcrumb from "@/components/ui/breadcrumb";

<Breadcrumb.Root>
  <Breadcrumb.List>
    <Breadcrumb.Item><Breadcrumb.Link href="/">Home</Breadcrumb.Link></Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item><Breadcrumb.Page>Invoices</Breadcrumb.Page></Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb.Root>

Built on

Packages: @stylexjs/stylex
Shelf items: foundations, Icons, utils
Figma: In progress. See Designers and Figma.