Pagination

Standard

Default

A default pagination helps users navigate collections of numbered pages.

Show code

<nav class="govuk-pagination" aria-label="Pagination">
  <div class="govuk-pagination__prev">
    <a class="govuk-link govuk-pagination__link" rel="prev" href="/previous">
      <svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13"><path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path></svg>
      <span class="govuk-pagination__link-title">
        Previous
        <span class="govuk-visually-hidden"> page</span>
      </span>
    </a>
  </div>
  <ul class="govuk-pagination__list">
    <li class="govuk-pagination__item">
      <a class="govuk-link govuk-pagination__link" href="/page/1" aria-label="Page 1">1</a>
    </li>
    <li class="govuk-pagination__item govuk-pagination__item--current">
      <a class="govuk-link govuk-pagination__link" aria-current="page" href="/page/2" aria-label="Page 2">2</a>
    </li>
    <li class="govuk-pagination__item">
      <a class="govuk-link govuk-pagination__link" href="/page/3" aria-label="Page 3">3</a>
    </li>
  </ul>
  <div class="govuk-pagination__next">
    <a class="govuk-link govuk-pagination__link" rel="next" href="/next">
      <span class="govuk-pagination__link-title">
        Next
        <span class="govuk-visually-hidden"> page</span>
      </span>
      <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13"><path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path></svg>
    </a>
  </div>
</nav>

---
import { Pagination, PaginationList, PaginationItem, PaginationPrev, PaginationNext } from "@i-dot-ai-npm/component-library-astro";
---

<Pagination>
  <PaginationPrev href="/previous" />
  <PaginationList>
    <PaginationItem href="/page/1" aria-label="Page 1">1</PaginationItem>
    <PaginationItem href="/page/2" aria-label="Page 2" current>
      2
    </PaginationItem>
    <PaginationItem href="/page/3" aria-label="Page 3">3</PaginationItem>
  </PaginationList>
  <PaginationNext href="/next" />
</Pagination>

import { Pagination, PaginationList, PaginationItem, PaginationPrev, PaginationNext } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <Pagination>
      <PaginationPrev href="/previous" />
      <PaginationList>
        <PaginationItem href="/page/1" aria-label="Page 1">1</PaginationItem>
        <PaginationItem href="/page/2" aria-label="Page 2" current>
          2
        </PaginationItem>
        <PaginationItem href="/page/3" aria-label="Page 3">3</PaginationItem>
      </PaginationList>
      <PaginationNext href="/next" />
    </Pagination>
  );
}

<script>
  import { Pagination, PaginationList, PaginationItem, PaginationPrev, PaginationNext } from "@i-dot-ai-npm/component-library-svelte";
</script>

<Pagination>
  <PaginationPrev href="/previous" />
  <PaginationList>
    <PaginationItem href="/page/1" aria-label="Page 1">1</PaginationItem>
    <PaginationItem href="/page/2" aria-label="Page 2" current>
      2
    </PaginationItem>
    <PaginationItem href="/page/3" aria-label="Page 3">3</PaginationItem>
  </PaginationList>
  <PaginationNext href="/next" />
</Pagination>

import { Pagination, PaginationList, PaginationItem, PaginationPrev, PaginationNext } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <Pagination>
      <PaginationPrev href="/previous" />
      <PaginationList>
        <PaginationItem href="/page/1" aria-label="Page 1">1</PaginationItem>
        <PaginationItem href="/page/2" aria-label="Page 2" current>
          2
        </PaginationItem>
        <PaginationItem href="/page/3" aria-label="Page 3">3</PaginationItem>
      </PaginationList>
      <PaginationNext href="/next" />
    </Pagination>
  );
}

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. Instead, use the Button component (usually a 'Continue' button) to let the user move to the next page – and a Back link component to let them move to the previous page.