Breadcrumb

Breadcrumb is the path to the current page. Every ancestor is a Link. The current place closes the path as a Heading, never a link. An optional chevron before the path links back on its own. The parent owns the labels and the hrefs. It has no "use client" directive, so it renders on the server.

The API below is settled. The look lives in the recipe file and is still in its design pass.

import Breadcrumb from "@haloid/azucar/ui/breadcrumb";

Path

items is ordered from the root to the parent of the current place and can be any length, including empty. current is where the user is. It renders as a level 2 heading with aria-current="page", so the page needs no other title. A slash separates each step from the next.

<Breadcrumb
items={[
  { label: "Section A", href: "/components/breadcrumb" },
  { label: "Page B", href: "/components/breadcrumb" },
]}
current="Detail C"
/>

Icon

An item can carry an icon left of its label. The icon is decorative and hidden from assistive technology; the label still says what the step is. A chevron on the first item reads as "back".

<Breadcrumb
items={[
  { label: "Section A", href: "/components/breadcrumb", icon: <SFChevronLeft size={12} /> },
  { label: "Page B", href: "/components/breadcrumb" },
]}
current="Detail C"
/>

Back

back adds a chevron-left link before the path. It has its own href, so it does not have to match the previous step.

<Breadcrumb
back={{ href: "/components/breadcrumb" }}
items={[{ label: "Section A", href: "/components/breadcrumb" }]}
current="Detail C"
/>

API

interface BreadcrumbItem {
  label: React.ReactNode;
  href: string;
  icon?: React.ReactNode; // decorative, left of the label
}

interface BreadcrumbBack {
  href: string;
  label?: string; // accessible name of the chevron, default "Back"
}

interface Props {
  items: BreadcrumbItem[]; // root to parent, any length
  current: React.ReactNode; // heading, never a link
  back?: BreadcrumbBack;
  className?: string;
}

Not supported: a custom separator, truncation of long paths, a linked current place, a heading level other than 2. The slash is fixed; its look comes from the recipe.

Use in north

The customer page under Circuit Monitoring renders the path from the list to the customer. North passes the list as the one ancestor, with a chevron-left icon, and the customer name as current. The component owns the markup.