# Breadcrumb

## Overview

_[Design to fill]_

- **When to use**: _[Design to fill]_
- **When not to use**: _[Design to fill]_

## Anatomy

_[Design to fill]_

## Variants

_[Design to fill]_

## Props / API

### `Breadcrumb`

| Prop       | Type              | Default | Description                                            |
| ---------- | ----------------- | ------- | ------------------------------------------------------ |
| `children` | `React.ReactNode` | -       | The `Breadcrumb.Item` elements that make up the trail. |

Extends `React.ComponentPropsWithoutRef<'nav'>`. Standard `<nav>` attributes are forwarded via `...rest`.

### `Breadcrumb.Item`

| Prop        | Type              | Default | Description                                                                                         |
| ----------- | ----------------- | ------- | --------------------------------------------------------------------------------------------------- |
| `children`  | `React.ReactNode` | -       | The item label.                                                                                     |
| `href`      | `string`          | -       | Destination for the link item. Required when not `isCurrent`; not allowed when `isCurrent` is true. |
| `isCurrent` | `boolean`         | `false` | Marks the current page. Renders a `<span aria-current="page">` instead of a link.                   |

Link items extend `React.AnchorHTMLAttributes<HTMLAnchorElement>`. The current item extends `React.HTMLAttributes<HTMLSpanElement>`.

## States

- Default
- Hover
- Focus-visible

## Code examples

```tsx
import { Breadcrumb } from "@mylighthouse/prism-react";

export default function BreadcrumbExample(): React.JSX.Element {
  return (
    <Breadcrumb>
      <Breadcrumb.Item href="#">Page title</Breadcrumb.Item>
      <Breadcrumb.Item href="#">Page title</Breadcrumb.Item>
      <Breadcrumb.Item isCurrent>Current page</Breadcrumb.Item>
    </Breadcrumb>
  );
}
```

## A11y intent

_[Design to fill]_

- The trail is wrapped in a `<nav aria-label="Breadcrumb">` landmark so assistive technology exposes it as a distinct navigation region.
- Items are rendered as an ordered list (`<ol>`/`<li>`), conveying the hierarchical sequence of pages.
- The current page uses `aria-current="page"` on a non-link `<span>`, so it is announced as the current location and is not presented as a navigable link.
- Link items render real `<a>` elements, keeping keyboard operation and focus correct for free.

## Cross-references

_[Design to fill]_