Breadcrumb

A breadcrumb answers a question a page cannot answer about itself: where am I, and what is above me. It states the hierarchy as an ordered trail, each step a destination, and the last step the page itself, which is why the current location is text rather than a link, because a link to where you already are leads nowhere.

The trail is data, so the page states its steps and the component supplies the structure: a named navigation landmark, an ordered list, and separators that a screen reader never has to listen to.

Usage

import { Breadcrumb } from "@asheeui/web";

<Breadcrumb
  items={[
    { label: "Invoices", href: "/invoices" },
    { label: "March 2026", href: "/invoices/2026-03" },
    { label: "INV-0042" },
  ]}
/>;

The current location

A step is label, href and its state. The last step is the current location unless another step marks itself with isCurrent, and the current location is presented as text with aria-current="page", not as a link, and not as a differently coloured link.

Stating isCurrent explicitly is what a trail generated from URL segments needs: every segment has a destination, including the page being shown, and the marker is how the page says which one it is. A step without an href is also presented as text, which suits a level in the hierarchy that has no page of its own.

Separators and scale

separator is the mark between two steps. It is decoration: the component hides it from assistive technology, so it is never read as content, and the default is a chevron drawn small beside the trail. size scales the text, the gap and that mark together, so a trail in a page header and one in a card do not drift apart.

color is the colour of the links in the trail. The current location stays in the foreground colour at a medium weight, so it reads as the end of the trail rather than as one more destination.

Props

size is registered by the component as md, so it resolves from the instance, then components.breadcrumb, then that value. color is deliberately not registered: it resolves from the application's defaultColor and then primary, which is what makes the trail's links the same accent as every other link on the page. label and separator are statements about one trail, not about the product's look, so they are instance props with their own defaults rather than configuration.

A trail is a web idiom: @asheeui/native does not ship a breadcrumb, and a platform screen shows a titled header with a back control instead, because that is how a hierarchy is left on a device. See React Native.

Accessibility

• The trail is a navigation landmark named by label ("Breadcrumb"), which is what distinguishes it from the bar's navigation and from any other navigation on the page.
• Its steps are an ordered list, so a reader is told the position and the length of the trail rather than only its contents.
• The current location is a <span aria-current="page">: it is announced as the current page and it is not a control, so it never appears as a link that goes nowhere.
• The separators are wrapped in aria-hidden, so a reader hears the labels of the trail and not a run of chevrons; separator can be replaced with any content and the treatment is the same.

Linked steps are drawn by the framework's link primitive, so a step that navigates inside the application keeps the page's own router element. link={{ component, props }} states it once for the whole trail, and a step's own component/componentProps win over it, the same two levels Navbar and Footer offer. See links and substitution.

Related