Headless / Navigation

Breadcrumb

Breadcrumb shows the trail from the site root to the current page. It wraps your links in a nav landmark, lays them out as an ordered list, and marks the last as the current page.

Loading playground…

What it is

A single component. Pass the trail as children — one link per level — and Breadcrumb wraps them in a <nav> and an <ol>, dropping a separator between each. The last child is given aria-current="page"; it is the page the user is on, so it is usually rendered as plain text rather than a link.

Install

example.tsx

yarn add @usemotif/headless

example.tsx

import { Breadcrumb } from '@usemotif/headless';

API

Breadcrumb

stable

function Breadcrumb(props: BreadcrumbProps): JSX.Element

childrenReactNode

One node per trail level, root first. The last is marked as the current page.

separatorReactNode= "/"

The visual divider between items. Rendered `aria-hidden`.

aria-labelstring= "Breadcrumb"

Label for the `nav` landmark.

styleCSSProperties

Inline style for the `nav` element.

Accessibility

Breadcrumb renders a nav landmark, so a screen-reader user can jump straight to it, and the aria-label names it. The trail is an <ol> — an ordered list, because the order is the hierarchy. The last item carries aria-current="page", telling assistive technology this is the current location. The separator is aria-hidden; it is decoration, and a screen reader should not read "Home slash Docs slash".

Examples

A page trail:

example.tsx

<Breadcrumb aria-label="Breadcrumb">
<Link href="/">Home</Link>
<Link href="/docs">Docs</Link>
<Link href="/docs/headless">Headless</Link>
<Text>Breadcrumb</Text>
</Breadcrumb>

A custom separator:

example.tsx

<Breadcrumb separator={<Icon size="xs"><path d="M9 6l6 6-6 6" /></Icon>}>
<Link href="/">Home</Link>
<Link href="/settings">Settings</Link>
<Text>Profile</Text>
</Breadcrumb>