Pagination

Help users navigate forwards and backwards through a series of pages. For example, search results or guidance that’s divided into multiple website pages.

<nav class="asp-pagination">
  <ul class="asp-pagination__list">
    <li class="asp-pagination__item">
      <a href="#">Previous 10 results</a>
    </li>
    <li class="asp-pagination__item asp-pagination__item--next">
      <a href="#">Next 10 results</a>
    </li>
  </ul>
</nav>

{% from "pagination/macro.njk" import aspPagination %}

{{ aspPagination({
  hrefs: {
    previous: "#",
    next: "#"
  }
}) }}

{% from "pagination/macro.njk" import aspPagination %}

{{ aspPagination({
  hrefs: {
    previous: "#",
    next: "#"
  }
}) }}

<nav class="asp-pagination">
  <ul class="asp-pagination__list">
    <li class="asp-pagination__item">
      <a href="#">Previous 10 results</a>
    </li>
  </ul>
</nav>

{% from "pagination/macro.njk" import aspPagination %}

{{ aspPagination({
  text: "months",
  hrefs: {
    previous: "#"
  }
}) }}

{% from "pagination/macro.njk" import aspPagination %}

{{ aspPagination({
  text: "months",
  hrefs: {
    previous: "#"
  }
}) }}

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 the performance or usability of your service.

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.

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.

Published 3 May 2024
Last updated 11 September 2024