Navigation
The wayfinding behaviours. Each one answers a "where am I" or "how do I move" question — a trail, a page count, a progress sequence, a cluster of controls.
The pieces
| Component | Answers |
|---|---|
| Breadcrumb | Where am I in the hierarchy? |
| Pagination | Which page of many am I on? |
| Stepper | How far through this sequence am I? |
| Toolbar | A cluster of related controls, one tab stop. |
Render-prop, not compound
Most of the headless package uses the compound Root / part pattern. This family mostly does not.
Pagination and Stepper take a renderItem / renderStep function — they compute the structure
(which pages to show, which step is active) and hand each piece back for you to render. Breadcrumb
takes its trail as children. Toolbar wraps existing controls.
The reason is that these components are about structure, not state. There is little open/closed behaviour to manage; the work is the page-window maths, the trail markup, the roving focus. A render prop fits that better than a set of parts.
Each one is a landmark or a widget
Breadcrumb and Pagination render nav landmarks — assistive technology lists them among the
page's regions. Toolbar is a role="toolbar" widget with roving arrow-key focus, so a cluster of
buttons is one tab stop, not ten. Stepper marks the active step with aria-current. The wayfinding
is in the ARIA, not only the visuals.