Page Loading

Pagination

Pagination helps users navigate through multiple pages of the same type of content such as listings or search results.

Pagination example

How to use pagination

You can use this component for:

  • Events
  • News  
  • Search results

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

If there are 5 pages of results, then a link will display for each of the 5 pages.

If there are more than 5 pages of results, then a link will display for pages 1-4. An ellipsis will be displayed, and then a link for the last page. 

Adding pagination in the CMS

At the moment, you can’t add pagination manually to a page through the CMS. It's automatically added to listings pages and search results pages. 

Accessibility

The pagination components are surrounded by a <nav> element to show that they are navigation links. This element has an aria-label attribute with the value Pagination. Screen readers that support this attribute will read this.

There is also a visually hidden heading title pagination which will be read by screen readers as a heading to the links.

If the link describes the current page that you are on, then it has the aria-current="page" value to indicate to screen readers that this is the case. 

Evidence and research

In testing users interacted with the pagination and could understand how to navigate with them.