use UI

Pagination

Also called pager, page navigation, paging

Navigation that splits a list into numbered pages, showing one at a time and letting the user jump between them.

Example

The current page is marked with aria-current="page", not just a highlight — and in a real product it would live in the URL, which is what makes a result findable twice.

Result #9

Result #10

Result #11

Result #12

Showing 9–12 of 48

Page 3 of 12

When to use it

  • The user may need to come back to a specific result — search results, orders, invoices, tickets.
  • The list has a known size and knowing “12 of 340” is useful information rather than trivia.
  • There is something below the list that must stay reachable: a footer, related links, a summary.
  • The data is being worked through rather than browsed — a queue someone processes in order.

When not to

  • The content is an open-ended feed with no meaningful end. Page numbers on a timeline are meaningless.
  • The list is short enough to show at once. Two pages of four items each is worse than eight items.
  • The user is browsing casually and position does not matter — the click between pages is friction with no payoff.

Trade-offs

  • Every page has a URL, so results can be shared, bookmarked and reopened.
  • The back button behaves the way people expect.
  • Whatever sits below the list stays reachable, unlike with an endless feed.
  • Position is knowable, which makes progress through a long list visible.
  • Each page costs a click and a wait.
  • Breaks reading flow when the user genuinely just wants more of the same.
  • Small page-number targets are awkward on touch screens unless sized deliberately.

Accessibility

What this pattern needs in order to work for everyone.

Keyboard
  • Page links are links, not buttons — they navigate, so they should behave like navigation and support opening in a new tab.
  • Keep hit targets at least 44px on touch; a row of tiny numbers is hard to hit accurately.
  • Disabled Previous and Next should be `aria-disabled` rather than removed, so the control does not shift position between pages.
Roles and state
  • Wrap it in `<nav aria-label="Pagination">` — a page has several navigations and they need distinguishing.
  • Mark the current page with `aria-current="page"`, not just a visual highlight.
  • Give each link an accessible name that says more than the digit: “Page 3 of 12” rather than “3”.
Focus
After changing page, move focus to the top of the results and announce the change. Otherwise a screen reader user hears nothing and a keyboard user is left at the bottom of the previous page's content.

In the wild

  • Google Search — Still paginated after all these years, because people return to results and compare them.
  • GitHub Issues — Paginated so an issue list can be linked to at a specific page and filter.

Compared with

Side-by-side breakdowns of patterns that solve a similar problem.