Navigation - Next/previous pagination

Use next/previous pagination to allow users to navigate between related pages.

Open this default pagination example in new window
Copy default pagination code 
<nav class="hse-pagination" role="navigation" aria-label="Pagination">
  <ul class="hse-list hse-pagination__list">
    <li class="hse-pagination-item--previous">
      <a class="hse-pagination__link hse-pagination__link--prev" href="#">
        <span class="hse-pagination__title">Previous</span>
        <span class="hse-u-visually-hidden">:</span>
        <span class="hse-pagination__page">Treatments</span>
        <svg class="hse-icon hse-icon__arrow-link-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M1.41 10.59L4 8 5.4 9.42 3.83 11H24v2H3.83l1.58 1.59L4 16 1.4 13.41 0 12.01l1.41-1.42z" />
        </svg>
      </a>
    </li>
    <li class="hse-pagination-item--next">
      <a class="hse-pagination__link hse-pagination__link--next" href="#">
        <span class="hse-pagination__title">Next</span>
        <span class="hse-u-visually-hidden">:</span>
        <span class="hse-pagination__page">Symptoms</span>
        <svg class="hse-icon hse-icon__arrow-link-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M22.59 13.41L20 16l-1.41-1.42L20.17 13H0v-2h20.17L18.6 9.41 20 8l2.59 2.59 1.41 1.4-1.41 1.42z" />
        </svg>
      </a>
    </li>
  </ul>
</nav>
Close default pagination code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for default pagination
Name Type Required Description
Name previousUrl Type string Required true Description The value of the previous link href attribute.
Name previousPage Type string Required true Description The text of the previous link.
Name nextUrl Type string Required true Description The value of the next link href attribute.
Name nextPage Type string Required true Description The text of the next link.
Name classes Type string Required false Description Classes to add to the pagination container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the pagination container.
Copy default pagination code 
{% from 'pagination/macro.njk' import pagination %}

{{ pagination({
  "previousUrl": "#",
  "previousPage": "Treatments",
  "nextUrl": "#",
  "nextPage": "Symptoms"
}) }}
Close default pagination code

When to use next/previous pagination

Use next/previous pagination at the bottom of a page, to let users navigate around a small group of related pages. This should be no more than 8 pages.

If you're using pagination, you should also use a contents list at the top of the page. The 2 components make up the multi-page navigation pattern.

When not to use next/previous pagination

Do not use next/previous pagination on pages that are not grouped together or related. This can confuse users.

Do not use next/previous pagination in a transactional service or a form. We use other components instead, such as:

How to use next/previous pagination

Use a contents list at the top of the page together with next/previous pagination at the bottom of each page.

Use the word "Previous" with an arrow left and a link to the previous page. Use the word "Next" with an arrow right and a link to the next page.

Use the same page titles that are in the contents list.

Accessibility

The next/previous 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 called 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.

Research

The NHS tested next/previous pagination in grouped information pages in 3 labs. They have not tested it in forms.

In a user research lab, 4 out of 5 users, including a user with a very low level of digital skill, used next/previous pagination to navigate through the pages. They understood that it was associated with the navigation at the top of the page.

Users found that next/previous pagination reflected the way they read content and their mental model of the structure of the content.

Updated: September 2023