Skip to main content
Design system

Beta This is a new service. Your feedback will help us improve it.

Pagination

Updated in October 2026

Use pagination to help users navigate forwards and backwards through a series of pages.

Open this example in a new tab

When to use pagination

Use pagination at the bottom of the page to help users navigate forwards and backwards through a series of related pages. For example, pages of search results or information about a health condition that's divided into multiple web pages.

Consider using pagination when:

  • displaying all content on 1 page would make it harder for users to scan or find what they need
  • most users are likely to find what they need within the first few pages

Use pagination rather than the "infinite scroll" technique which automatically loads content when the user approaches the bottom of the page. This causes problems for keyboard users.

When not to use pagination

Only break up content onto separate pages if it improves the performance or usability of your service.

Do not use pagination on pages which are not grouped together or "related" as this is likely to confuse users.

Do not use pagination to navigate through a multi-page form. We use other components instead, including:

  • buttons (usually a "Continue" button) to move forward
  • back link to navigate back

How to use pagination

You should:

  • place the pagination component after the content on each paginated page
  • not show pagination if there's only 1 page of content
  • redirect users to the first page if a requested page is unavailable or no longer exists

Accessibility

The pagination component is wrapped in a <nav> element to show that they are navigation links. It has an <aria-label> attribute with the value Pagination. Screen readers that support this attribute will read this.

A visually hidden heading, Pagination, is also included so screen reader users can identify the purpose of the navigation when navigating by headings.

The link for the current page uses aria-current="page" to indicate the user's current location within the pagination.

This supports WCAG 2.2 Success Criterion 1.3.1 Info and Relationships, level A by ensuring that relationships, structure and state are available to assistive technologies.

Source

Learn more about Pagination in the GOV.UK Design System.

Back to top

Pagination variants

For navigating between content pages

Open this example in a new tab

Use pagination at the bottom of pages of content to allow users to navigate around a topic that's divided into multiple pages (up to 8 pages).

For navigating between pages of items

Open this example in a new tab

Use numbered pagination if users need to navigate through pages of similar items. For example, a list of search results or a list of cases in a case working system.

Decide the maximum number of items to show on each page based on the context of your service and the amount of content for each item.

Show the page number in the page <title> so that screen reader users know they've navigated to a different page. For example, "Search results (page 1 of 4)".

The pagination should always show the page numbers for:

  • the current page
  • the page before the current page
  • the page after the current page
  • 1st and last pages

For larger screens, you can show the page numbers for 2 or more pages before and after the current page.

Use ellipses (…) to show gaps in the page numbering. For example:

  • [1] 2 … 100
  • 1 [2] 3 … 100
  • 1 2 [3] 4 … 100
  • 1 2 3 [4] 5 … 100
  • 1 … 4 [5] 6 … 100
  • 1 … 97 [98] 99 100
  • 1 … 98 [99] 100
  • 1 … 99 [100]

1st and last pages

Open this example in a new tab

Do not show a “Previous” link on the first page of a set of results. There is no page before the first page.

Open this example in a new tab

Do not show a “Next” link on the last page of a set of results. There are no more pages after the last page.

Back to top

Examples

Welsh Immunisation System (WIS)

This example shows a search results page within the Sessions section of the School-age Immunisations service within WIS. It uses pagination at the bottom of the page to help users manage large sets of data.

Sessions search results with numbered pagination at the bottom

Back to top