Breadcrumb

Where the page is, from its section down, and a way back up.

Try it

The first is as drawn, in the product’s top bar: the section as a capsule with its icon, a slash, the page in Semibold. A third level is not drawn. Decided on 2026-09-21: the section is a capsule at rest, every link is a capsule under the pointer, and only the first has an icon — it is the section’s, the one lit in the navigation.

A long path, a long name

With maxItems the middle is folded into a button that unfolds it in place, and the focus goes to the first link it revealed. It is not a menu: a menu’s rows are buttons, and a crumb has to stay a link that can be opened in a new tab. A long name is cut with an ellipsis; the words are whole for a screen reader.

Back, in the page

The same drawing has a second piece, in the page over the client’s name: a pill with a return arrow and the level above. It is not part of this component, because it is one the system has — an outline Button at sm with an icon and an href. On a phone, where a bar has no room for a path, it is the whole of it.

With a router

Anatomy

The capsule’s fill is interactive/neutral and not the drawn surface/base: the same primitive in light, and in dark a fill and not a hole. Under the pointer the wash lies over it; on the other links the wash alone is the capsule. There is no underline — the capsule is the hover’s mark, and these are navigation and not links in a sentence.

Accessibility

A nav named “Breadcrumb” holding an ordered list, so the number of levels and the order are said. The page is the last item, with aria-current="page", and is never a link: a link to where you are is a link that does nothing. The slashes and the icon are hidden. Give a second breadcrumb on one page its own aria-label.

Using it

import { Breadcrumb } from 'alpenglow';
import NextLink from 'next/link';

<Breadcrumb
  icon={<UserMultiple size={16} />}
  renderLink={(props) => <NextLink {...props} />}
  items={[
    { label: 'Clients', href: '/clients' },
    { label: client.name, href: `/clients/${client.id}` },
    { label: 'Appointments' }, // the page: the last is never a link
  ]}
/>