ComponentCraft conventionFoundational
Pagination
Splitting results into pages, which preserves position and keeps the footer reachable.
Definition
Pagination divides a result set into discrete pages with explicit navigation. It gives users a sense of the total, a stable position to return to, and a reachable end of page.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this page
Requirements
- Show the current page, the total where you can compute it, and direct access to first and last.
- Make targets large enough to hit comfortably, particularly on touch.
- Put the page in the URL so results are shareable and survive back navigation.
- Use nav with an accessible name, aria-current page on the active item, and descriptive link text rather than bare numbers for screen readers.
- Offer a page size control for data-heavy tables.
- Preserve filters and sort across page changes.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Often used with
These usually appear in the same screen or the same decision.
- Data TableComponent
- FilteringPattern
- SearchPattern
- SortingPattern
Alternative approach
A different answer to the same problem, with a different cost.
- Infinite Scroll and PaginationPattern
Same problem, opposite trade-off: flow versus position and findability.