Pagination
Help users navigate forwards and backwards through a series of pages.
Help users navigate forwards and backwards through a series of pages. For example, search results or guidance that’s divided into multiple website pages.
When to use this component
Consider using pagination when:
showing all the content on a single page makes the page take too long to load
most users will only need the content on the first page or first few pages
When not to use this component
Only break up content onto separate pages if it improves usability.
Avoid using the ‘infinite scroll’ technique to automatically load content when the user approaches the bottom of the page. This causes problems for keyboard users.
Do not use this pagination component for linear journeys, for example, where you’re asking the user to complete a form. Instead, use the button component (usually a ‘Continue’ button) to let the user move to the next page, and a back link to let them move to the previous page.
How it works
Add the pagination component after the content on each page that you’re paginating.
Do not show pagination if there’s only one page of content.
Redirect users to the first page if they enter a URL of a page that no longer exists.
For navigating between content pages
Use the ‘block’ style of pagination to let users navigate through related content that has been split across multiple pages. Stack the links vertically, so they’re more obvious to screen magnifier users when they’re zoomed in.
You can use link labels to give context on what the neighbouring pages are about.
Get the Nunjucks macro for this example from the Camden Frontend library
For navigating between pages of items
Use a list-type layout 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.
Get the Nunjucks macro for this example from the Camden Frontend library
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)’.
Show an appropriate number of pages to fit the horizontal space available.
For smaller screens, show page numbers for:
the current page
previous and next pages
first and last pages
For larger screens, show page numbers for:
the current page
at least one page immediately before and after the current page
first and last pages
Use ellipses (…) to replace any skipped pages. 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]
First and last pages
Do not show the previous page link on the first page, and do not show the next page link on the last page.
Get the Nunjucks macro for this example from the Camden Frontend library
Filtering and sorting
Consider adding filtering or sorting options if it helps users to find what they need in a long list of pages.
If the user filters or sorts the list of pages, apply this to the whole list (not just the current page) and redirect them back to the first page of the new results.
Set defaults to minimise how many pages most users have to click through to find what they need.
Research on this component
This component is based on the pagination component from the GOV.UK Design System.
You can take part in the ‘Pagination' discussion on GOV.UK’s Design System’s GitHub and share your research.