# Breadcrumb block — recipe

**Locked 2026-08-04 as part of a452 Phase 5.**
**Tier:** 3 (generic MIT)

## A. Product Description

Navigation breadcrumb showing current page path. Users can click steps to navigate up the hierarchy (e.g., Home > Blog > Article). Plain English.

### UI structure
A horizontal list of items separated by visual delimiters (arrows or slashes). The final item is plain text (not a link) to indicate the current page location.

### Layout
Inline-block layout. Items flow left-to-right and wrap to the next line only if the screen width is very small (mobile), but remain horizontal on standard desktop viewports.

### Geometry
Default font size is 14px (0.875rem). Default line height is 1.5. Default horizontal padding between items is 0.5rem (8px).

### States
1.  **Default:** Standard text color (neutral gray).
2.  **Hover:** Text color darkens or a subtle underline appears for clickable items.
3.  **Active:** The last item is styled distinctly (e.g., bold or no link) and has no separator after it.

## B. Structural Contract

### Inputs (props)

*   `props.items` — Array of objects, default `[]`, description: The path segments. Each object contains `label` (string), `href` (string, optional), and `active` (boolean).
*   `props.separator` — String, default `'/'`, description: The character or icon rendered between steps.
*   `props.className` — String, default `''`, description: Optional CSS class to append to the root element.

### Outputs (events)

*   `onNavigate` — Fires when a clickable breadcrumb item is clicked.

### Module boundaries
This block does NOT depend on other blocks. It can be embedded in any region.

### Swap-test
To swap this block for a custom one: replace `modules/breadcrumb.js` with a file that exports the same `render(props, slots)` function.

## C. Reconstruction Notes

### Evidence
The block's source is at `modules/breadcrumb.js`. Trace lines to behavior regarding array mapping and DOM node creation.

### Visual anchors
CSS class: `.fvcms-breadcrumb` (the block's root element).

### Behavioural anchors
The block exports: `render(props, slots)` returning a DOM element.

## D. Source-line citations

The original implementation is at `modules/breadcrumb.js`. See the shadow at `app-pact/shadow/v0.8.0-pre-fwv-v8-alignment/modules/breadcrumb.js` for the pre-alignment snapshot.

Total: ~60-80 lines. Plain words, no jargon walls. Operator-readable.