Skip to main content Skip to list of components
Beta

This is a new service – give us your feedback to help improve it.

Components

Pagination

Use a list-type layout if users need to navigate through pages of similar items.

Contents

  1. Status
  2. Number of page links
  3. First and last pages

Pagination can be used for example, as a list of search results or a list of cases in a case working system.

Open this example in new tab

HTML

<nav class="tna-pagination" aria-label="Pagination">
  <div class="tna-pagination__prev">
    <a href="#" class="tna-button tna-button--plain" rel="prev">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="24"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
        <path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z" />
      </svg>
      Previous
    </a>
  </div>
  <ul class="tna-pagination__list">
    <li class="tna-pagination__item">
      <a href="#" class="tna-button tna-pagination__link tna-button--plain" aria-label="Page 1" title="Page 1">
        1
      </a>
    </li>
    <li class="tna-pagination__item tna-pagination__item--ellipses">&ctdot;</li>
    <li class="tna-pagination__item">
      <a href="#" class="tna-button tna-pagination__link tna-button--plain" aria-label="Page 6" title="Page 6">
        6
      </a>
    </li>
    <li class="tna-pagination__item tna-pagination__item--current">
      <a href="#" class="tna-button tna-pagination__link" aria-label="Page 7" title="Page 7">
        7
      </a>
    </li>
    <li class="tna-pagination__item">
      <a href="#" class="tna-button tna-pagination__link tna-button--plain" aria-label="Page 8" title="Page 8">
        8
      </a>
    </li>
    <li class="tna-pagination__item tna-pagination__item--ellipses">&ctdot;</li>
    <li class="tna-pagination__item">
      <a href="#" class="tna-button tna-pagination__link tna-button--plain" aria-label="Page 42" title="Page 42">
        42
      </a>
    </li>
  </ul>
  <div class="tna-pagination__next">
    <a href="#" class="tna-button tna-button--icon-right tna-button--plain" rel="next">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="24"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
        <path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" />
      </svg>
      Next
    </a>
  </div>
</nav>

Nunjucks

Nunjucks options
Primary options
Name Type Description
previous object

See previous.

items array

See items.

next object

See next.

landmarkLabel string
solid boolean
spaced boolean
classes string

Classes to add to the pagination.

attributes object

HTML attributes (for example data attributes) to add to the pagination.

Options for previous
Name Type Description
text string
href string

Required.

Options for items
Name Type Description
number string

Required.

href string

Required.

current boolean
ellipsis boolean

Use this option if you want to specify an ellipsis at a given point between numbers. If you set this option as true, any other options for the item are ignored.

Options for next
Name Type Description
text string
href string

Required.

{% from "nationalarchives/components/pagination/macro.njk" import tnaPagination %}

{{ tnaPagination({
  previous: {
    href: "#"
  },
  items: [
    {
      number: 1,
      href: "#"
    },
    {
      ellipsis: true
    },
    {
      number: 6,
      href: "#"
    },
    {
      number: 7,
      current: true,
      href: "#"
    },
    {
      number: 8,
      href: "#"
    },
    {
      ellipsis: true
    },
    {
      number: 42,
      href: "#"
    }
  ],
  next: {
    href: "#"
  }
}) }}
Status
In development
Tested without CSS
Yes
WCAG 2.2 AA compliant
In development
Analytics integrated
In development
Documentation complete
No

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:

For larger screens, show page numbers for:

Use ellipses (…) to replace any skipped pages. For example:

Do not show the previous page link on the first page — and do not show the next page link on the last page.

Open this example in new tab
Open this example in new tab

Back to top