Breadcrumbs

Where this page sits in the hierarchy.

Overview

A page several levels deep that needs a way back up: org, project, build, snapshot.

Trail

Do
import { Breadcrumbs } from "@hackcove/ui";

<Breadcrumbs
  crumbs={[
    { label: "Projects", href: "#projects" },
    { label: "Launch film", href: "#launch-film" },
    "Shots",
  ]}
/>
A parent crumb is { label, href } and the last is plain text: the trail that leads back up, ending at the current page.
Don't
import { Breadcrumbs } from "@hackcove/ui";

<Breadcrumbs crumbs={["Projects", "Launch film", "Shots"]} />
Parents given as plain text look like the trail but lead nowhere, so a reader cannot go back up.

Hierarchy

Do
import { Breadcrumbs } from "@hackcove/ui";

<Breadcrumbs
  crumbs={[{ label: "Acme", href: "#acme" }, { label: "Quotes", href: "#quotes" }, "Quote 12"]}
/>
Breadcrumbs show where the page sits in a hierarchy.
Don't
import { Breadcrumbs } from "@hackcove/ui";

<Breadcrumbs
  crumbs={[
    { label: "Quotes", href: "#quotes" },
    { label: "Invoices", href: "#invoices" },
    "Receipts",
  ]}
/>
Siblings are not a hierarchy: switching between peer sections is NavTabs.

Usage

  • Give the trail in order, parents first. A parent that links is { label, href } (or { label, render } for the app's router link); the last crumb is the current page, plain text.
  • Breadcrumbs show a hierarchy. Peer sections are NavTabs.
  • Each crumb truncates, so a long name does not widen the row.
  • Put the trail in the breadcrumbs slot of a PageHeader.

Accessibility

  • <nav aria-label="Breadcrumb"> around an ordered list.
  • The last item has aria-current="page" and is never a link.
  • The / separators are aria-hidden.

API

Breadcrumbs

org / project / build / snapshot: each crumb truncates, and the last is the current page. A crumb is a node, or a Crumb object when it links.

crumbs required
Type
(ReactNode | Crumb)[]

Functions

  • crumbLinkClass The classes of a crumb that links, for a router link drawn outside render.