Pagination
Page-by-page navigation.
Usage
Give Root the count of items and perPage; it works out the pages. page is bindable.
Why you render the pages
Root does not emit buttons — it hands you a pages array through a snippet
and you render them. That indirection looks like extra work and buys something real: Bits owns the
page range, the ellipsis logic and the keyboard navigation, while the markup stays entirely yours.
Each entry is either type: 'page' — pass it to Pagination.Page — or type: 'ellipsis', which
you render however you like. Use p.key as the each key.
Accessibility
Wrap the whole thing in <nav aria-label="Pagination">. Bits
gives the buttons their roles and marks the active page with data-selected and aria-label, so the current
page is announced rather than only coloured differently.
Prev and Next are disabled at the ends automatically. If you render them as arrows with no
text, give each an aria-label — an unlabelled arrow button is announced
as nothing at all.
Props
Pagination.Root
| Prop | Type | Default |
|---|---|---|
page Current page number. Bindable. | number | 1 |
class Extra classes merged onto the root. | string | — |
count required Total number of items to paginate. | number | — |
perPage Items per page. count / perPage gives the page count. | number | 1 |
siblingCount Visible page buttons either side of the current page. | number | 1 |
onPageChange Called when the page changes. | (page: number) => void | — |
loop Keyboard navigation wraps at either end. | boolean | false |
orientation Axis the arrow keys navigate along. | 'horizontal' | 'vertical' | 'horizontal' |
Page takes the page object from the snippet. PrevButton and NextButton take class plus the native button attributes.
| Prop | Type | Default |
|---|---|---|
class Extra classes merged onto the page button. | string | — |