UI pagination

Overview

UI pagination lets people navigate a long collection or content split across several documents in manageable groups. Page numbers, previous and next links, and an indication of the current page are common elements. Someone opening page two of search results needs to know which range is visible and how to return or continue.

Dividing a list gives the reader a range to inspect before moving on. The number of items is only part of the design: retaining search filters, returning to a location with the Back button, and making navigation understandable to keyboard and assistive-technology users also matter.

Numbered controls do not determine the server's retrieval strategy. The same interface can use OFFSET, keyset queries, or an array already loaded in the browser. The UI manages movement and awareness of location; retrieval determines which items are returned.

This article covers navigation and accessibility. For OFFSET, keysets, cursors, and consistency as data changes, see Data pagination.

From page arrangement to navigation

Pagination predates computing as a publishing term. Merriam-Webster records page sequence numbers and page arrangement among its meanings, and dates its first known English usage to 1794. That is a record of the word's use; the first implementation of web-list navigation is a separate historical question.¹

Screen pagination uses familiar page and sequence cues to show location and destinations. A printed page number identifies a place in a fixed document; a search-result page identifies a range in a collection determined by filters and ordering.

Previous and next document relations (1999)

HTML 4.01, published on December 24, 1999, defines Next and Prev as link relations within ordered document sequences. It documents how markup can express those relations and provides context for rel="next" and rel="prev" today.²

List navigation as an interaction pattern

Martijn van Welie's pattern library describes Paging as a solution for browsing many items to find one of interest. Its solution combines fixed-size groups with movement between them, making interaction pattern an appropriate description in this context.³

Grouping database retrieval under the same pattern obscures the responsibilities involved. Opening page three and finding the next twenty rows are connected operations, but their reasons for change and review criteria differ.

Communicating the current location (2017)

The WAI-ARIA 1.1 Recommendation of 2017 defines aria-current for the current item in a set; the page value identifies the current page. Supplying that meaning alongside visual highlighting lets users identify their location without relying on color or a border.⁴

Numbered pages, load more, and infinite scrolling

Numbered pages help people revisit a range or share its address. Load more lets the user choose when to append items; infinite scrolling appends them in response to scrolling. Each design needs an account of current location, preserved filters, and focus when the collection changes.

The current GOV.UK guidance provides pagination for search results and content spread across pages. It omits the control when only one page exists and advises against infinite scrolling because of keyboard-access problems. These are that design system's usage recommendations.⁵

A three-page example

Assume fifteen search results, five per page. Page two displays items six through ten; Previous opens page one and Next opens page three. This small example makes the current location and each destination visible without implementing a retrieval algorithm.

<nav aria-label="Search result pages">
  <a href="/search?q=typescript&amp;page=1" rel="prev">Previous</a>
  <a href="/search?q=typescript&amp;page=1" aria-label="Page 1">1</a>
  <a href="/search?q=typescript&amp;page=2" aria-label="Page 2" aria-current="page">2</a>
  <a href="/search?q=typescript&amp;page=3" aria-label="Page 3">3</a>
  <a href="/search?q=typescript&amp;page=3" rel="next">Next</a>
</nav>

The URLs are illustrative search routes. Every link retains q and changes page; aria-current="page" identifies page two. The code uses the same English labels in both language editions. A Korean interface should also localize its accessible names and visible labels.

The markup supplies navigation links. A working service must apply the URL's filters and page to its results, handle invalid or removed pages, and define how browser Back navigation restores state.