Navigation
Pagination
Numbered pages, with the middle elided.
Examples
default
Notes
Numbered pagination.
A <nav> wrapping a list, and the current page is a <button aria-current> rather than a styled <span> — a reader jumping by landmark needs to find the control, and a reader on the current page needs to be told they are already there.
Renders nothing at one page or fewer. A pager for a single page is furniture.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| onPageChangerequired | (page: number) => void | — | |
| pagerequired | number | 1-based. | |
| pageCountrequired | number | Total pages. A value of 1 or less renders nothing. | |
| label | string | 'Pagination' | — |
| siblings | number | 1 | How many numbered pages sit either side of the current one. |
Also accepts everything in Omit<HTMLAttributes<HTMLElement>, 'onChange'>. Those are forwarded to the underlying element and are not listed row by row.
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
paginationRange
Builds the visible page list: always the first and last page, a window around the current one, and an ellipsis wherever the sequence skips.
Returned as numbers and a literal ellipsis rather than as pre-rendered nodes, so the shape is testable without a DOM — the off-by-one at the window edges is the whole difficulty of this component.
Takes no props of its own.
Accessibility
- The current page is a button with aria-current, not a styled span — a reader jumping by control needs to find it.
- Renders nothing at one page. A pager for a single page is furniture.