Navigation
Pagination
Previous and next arrows with numbered pages, the current page in violet. Long ranges collapse to first, last and the pages around the current one.
- Source
- src/components/ui/breadcrumb.tsx
- Figma
- Pagination.
Usage
Included in the GliaKit boilerplate. Import it where you need it:
tsx
import { Pagination } from "@/components/ui/breadcrumb";When to use
- Under tables and lists that are split into fixed-size pages.
- When people need to jump to a specific page or know how far through the results they are.
- For feeds people scroll through once, where a Load more button or infinite scroll fits better.
- When everything fits on one page; hide it instead of showing a single page.
Examples
Many pages
Long ranges collapse to the first page, the last page and one page either side of the current one, with an ellipsis for each gap. Click around to see the window move.
Paginated list
Slice your data by page and show the visible range next to the controls.
API reference
Pagination
Fully controlled: it keeps no state, so hold the page in your component and update it in onPageChange. Exported from the breadcrumb file. Does not spread other HTML attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| page | number | - | The current page, starting at 1. Required. |
| pageCount | number | - | Total number of pages. Required. |
| onPageChange | (page: number) => void | - | Called with the new page when an arrow or page number is clicked. |
| className | string | - | Extra classes for the nav element. |
Accessibility
- Wrapped in a nav landmark with aria-label="Pagination".
- The current page button has aria-current="page".
- Previous and next are labeled "Previous page" and "Next page", and are disabled on the first and last page.
- Every control is a native button, so it is keyboard reachable and activates with Enter or Space. The ellipsis is plain text, not a control.