# Breadcrumbs

> A trail of links marking the page's position within a hierarchy of parent sections, composing a `<nav>` root, an `<ol>` list, and `<li>` items around Breadcrumbs.Link, a restyled Link.

```ts
import { Breadcrumbs } from "@sdxc/ui";
```

Renders the trail's `<nav>` root, laying Breadcrumbs.List as a row.
A root missing `aria-label` or `aria-labelledby` logs a dev-mode
`console.warn`, since assistive technology needs one to identify this landmark.

## Examples

```tsx
<Breadcrumbs aria-label={t("breadcrumbs.label")}>
	<Breadcrumbs.List>
		<Breadcrumbs.Item>
			<Breadcrumbs.Link href="/">{t("nav.home")}</Breadcrumbs.Link>
		</Breadcrumbs.Item>
		<Breadcrumbs.Item>
			<Breadcrumbs.Link href="/projects" aria-current="page">
				{t("nav.projects")}
			</Breadcrumbs.Link>
		</Breadcrumbs.Item>
	</Breadcrumbs.List>
</Breadcrumbs>
```

## Props

Also accepts everything in `TagProps<"nav">`.


### Breadcrumbs.List

Renders the trail's `<ol>` list, resetting native list markers and spacing and laying Breadcrumbs.Item children out in a row whose spacing comes from each Breadcrumbs.Link's padding, so the gaps stay clickable.

Also accepts everything in `TagProps<"ol">`.


### Breadcrumbs.Item

Renders a single `<li>` wrapping one Breadcrumbs.Link.

Also accepts everything in `TagProps<"li">`.


### Breadcrumbs.Link

Renders one trail segment as a restyled Link: sized to `0.875rem` with its underline dropped, defaulting to a quiet neutral color role that brightens on hover and bolds when `aria-current="page"` is set.

Takes no props of its own.