Pagination

Last updated:

Practical patterns for page navigation, stable URLs, and result sets users can orient within.

01 — Foundation

Pagination gives users landmarks

Page numbers, next/previous, and stable URLs help people orient and recover.

Pagination splits large result sets into manageable chunks. It supports comparison, bookmarking, sharing a specific page, and reaching footers. For many products it is the safer default than infinite scroll.

02 — When

When to paginate

Prefer pagination when position, comparison, or compliance matters.

  • search results, admin tables, catalogues, and document lists
  • when users need “page 3 of 12” mental models or export per page
  • when infinite scroll would hide footer content or break browser back behaviour

03 — Markup

Semantic navigation

Pagination is navigation — use links and clear current-page state.

  • wrap controls in nav with an accessible name — “Pagination”, “Search results pages”
  • use real links with href when pages are server-rendered or shareable
  • mark the current page — aria-current="page" on the active item
  • do not disable “Previous” without explanation on page 1 — hide or aria-disabled with care 
<nav aria-label="Search results pages">
    <ul>
        <li><a href="?page=1" aria-current="page">1</a></li>
        <li><a href="?page=2">2</a></li>
        <li><a href="?page=2" rel="next">Next</a></li>
    </ul>
</nav>

04 — UX

Sizing, mobile, and state

Show enough context without rendering fifty page buttons.

  • show total results or range — “Showing 21–40 of 312”
  • ellipsis for long ranges; keep touch targets large on mobile
  • preserve filters and sort in query strings when state must survive refresh
  • scroll to top of results on page change — or move focus to a sensible heading

05 — Compare

Pagination vs infinite scroll

Neither is universally correct — match the task.

Pagination suits orientation, sharing, and comparison. Infinite scroll suits casual forward browsing where losing exact position is acceptable. Many products combine both: paginated search with a “load more” on mobile only when tested with real users.

06 — Review

Before you approve

A short checklist for pagination in code review.

  • nav semantics, keyboard access, and current page announced correctly
  • URLs or state survive refresh where users expect shareable lists
  • page size and total counts are understandable on all breakpoints