Breadcrumb

Collapsed trail

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' },
  ]}
/>

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

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

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

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.

BackLink: Single step back in a shallow hierarchy.
PageHeader: Takes a breadcrumb in its eyebrow slot.
DropdownMenu: Used for the collapsed levels.

Dependencies

Kind	Depends on
npm packages	`react`
Monarch components	DropdownMenu

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