Ask Claude CodeAsk Codex

Breadcrumb

A navigation trail ending at the current page. For a single link back, use a Link with a ChevronToArrow.

Installation

bun add @harmo-ui/css @harmo-ui/react

Usage

import { Breadcrumb, Link } from "@harmo-ui/react";

<Breadcrumb aria-label="Breadcrumb">
  <Link href="/settings">Settings</Link>
  <Link href="/settings/users">Users</Link>
  Jane Smith
</Breadcrumb>

Examples

This site is using your theme

Trail

A <nav> named "Breadcrumb" around an ordered list, so screen readers announce the trail and its length. Every item after the first starts with a separator, hidden from screen readers, and the last is marked aria-current="page".

<Breadcrumb aria-label="Breadcrumb">
  <Link href="/settings">Settings</Link>
  <Link href="/settings/users">Users</Link>
  Jane Smith
</Breadcrumb>

Right to left

The same trail in Arabic: the separators point left, in the reading direction.

<Breadcrumb aria-label="Breadcrumb">
  <Link href="/settings">الإعدادات</Link>
  <Link href="/settings/users">المستخدمون</Link>
  جين سميث
</Breadcrumb>

Long trail

In a narrow container, drawn dashed here, the trail wraps onto more lines, and a long item wraps within itself.

<Breadcrumb aria-label="Breadcrumb">
  <Link href="/settings">Settings</Link>
  <Link href="/settings/channels">Channels</Link>
  <Link href="/settings/channels/whatsapp">WhatsApp</Link>
  Order shipped notification template
</Breadcrumb>

API reference

React

<Breadcrumb> renders the trail from its children, one item each, in order: it adds the separators and marks the last item as the current page. Name it with aria-label, which is required, such as "Breadcrumb". Other props are the <nav>'s attributes. To hide an item, leave it out: hidden on a child would leave its separator behind.

HTML

A <nav class="hbreadcrumb"> around an <ol>, with an aria-label in the page's language. Every item after the first starts with a .hbreadcrumb-separator (with .hchevron), which has aria-hidden="true" and focusable="false", and the last item has aria-current="page". Load breadcrumb.css, link.css, and chevron.css. It needs no script.

See Breadcrumb's full contract.

Accessibility

  • A <nav> with aria-label="Breadcrumb" holding an ordered list, so screen readers announce the trail and its length.
  • The last item is marked aria-current="page".
  • Separators are aria-hidden, so they aren't read between items.