Source: https://monarchui.dev/components/breadcrumb/

Components · Navigation

# Breadcrumb

Location trail with the current page last and long trails collapsed into a menu.

@rookcom/monarch-react

Component

## Collapsed trail

## Usage examples

The example at the top of the page is the only one for this component.

## Purpose

Shows where the current page sits in a hierarchy and links back to each ancestor.

### Use when

- Pages are nested more than one level deep (workspace → project → task).

### Avoid when

- The hierarchy is flat: a back link is enough.
- Switching between sibling sections of one page: use Tabs.

## Design principles

- The last item is always the current page and is not a link.
- Long trails keep the first item and the last `maxVisible - 2` items; the middle collapses into a "…" menu.
- Routing stays in the app: pass the router’s link component as `linkAs`.

## API reference

```tsx
import { Breadcrumb } from '@rookcom/monarch-react';
```

| Export | Kind | Rendering | Root class |
| --- | --- | --- | --- |
| `Breadcrumb` | component | client | `.mn-breadcrumb` |

Breadcrumb is a function component; it does not forward a ref.

Generated from the TypeScript declarations of `packages/react/src/components/navigation/breadcrumb`.

## Properties

### `Breadcrumb`

Location trail. The last item is the current page (`aria-current="page"`).

| Prop | Type | Description |
| --- | --- | --- |
| `items` required | `BreadcrumbItem[]` |  |
| `className` | `string` |  |
| `label` | `string` | Accessible name of the nav. |
| `linkAs` | `ElementType<AnchorHTMLAttributes<HTMLAnchorElement>>` | Link component, e.g. Next.js `Link`. Defaults to `a`. |
| `maxVisible` | `number` | Show at most this many items; the middle ones collapse into a menu. Default 4. |

## Variants

Breadcrumb has no visual variants; the only layout option is `maxVisible`, documented under properties.

## States

| State | Exposed as | Behaviour |
| --- | --- | --- |
| Current page | `aria-current="page"` | The last item renders as plain text (`.mn-breadcrumb__current`). |
| Collapsed | – | When `items.length > maxVisible` (default 4), hidden levels move into a DropdownMenu behind a "…" trigger. |
| Item without href | – | A non-final item with no `href` renders as text, not a link. |

## Interaction behaviour

- Ancestor items are links rendered with `linkAs` (default `a`).
- The "…" trigger opens a menu whose items are the hidden levels, each rendered as a link.

## Keyboard support

| Keys | Action |
| --- | --- |
| Tab | Moves through the links and the "…" trigger. |
| Enter / Space / ArrowDown | Opens the collapsed-levels menu (DropdownMenu). |
| Escape | Closes the menu and returns focus to the trigger. |

## Accessibility

Role

navigation

Accessible name

label

prop, default "Breadcrumb".

- Items are an ordered list; the chevron separators are `aria-hidden` list items.
- The current page has `aria-current="page"`.
- The collapse trigger is named "Show N more levels".

## Responsive behaviour

This section is incomplete

The stylesheet has no width-specific rules; behaviour on narrow screens (wrapping of long labels) has not been specified or tested.

## Theme support

- Colours are Monarch semantic tokens only, so light, dark and more-contrast themes apply automatically.

## Do and don't

### Do

- Pass the router link component as `linkAs` so navigation stays client-side.

### Don't

- Do not give the last item an `href` expecting it to be a link; it is always the current page.
- Do not use a breadcrumb as the only way to navigate.

## Related components

- [BackLink](https://monarchui.dev/components/back-link/): Single step back in a shallow hierarchy.
- [PageHeader](https://monarchui.dev/components/page-header/): Takes a breadcrumb in its `eyebrow` slot.
- [DropdownMenu](https://monarchui.dev/components/dropdown-menu/): Used for the collapsed levels.

## Dependencies

| Kind | Depends on |
| --- | --- |
| npm packages | `react` |
| Monarch components | [DropdownMenu](https://monarchui.dev/components/dropdown-menu/) |

## Testing coverage

- Is a navigation named "Breadcrumb"; the last item has aria-current="page".
- Collapses the middle levels and opens them in a menu.
- No axe violations in jsdom.
- Renders on the server.

| Check | Covered |
| --- | --- |
| Axe in jsdom | Yes |
| Server rendering | Yes |
| Browser suites | None yet |

Tests: `packages/react/src/components/navigation/breadcrumb`

## All example code

### Collapsed trail

```tsx
import { Breadcrumb } from '@rookcom/monarch-react';

<Breadcrumb
  items={[
    { label: 'Workspace', href: '#/components/breadcrumb' },
    { label: 'Projects', href: '#/components/breadcrumb' },
    { label: 'Website', href: '#/components/breadcrumb' },
    { label: 'Sprint 4', href: '#/components/breadcrumb' },
    { label: 'Fix sign-in redirect' },
  ]}
/>
```