Skip to main content Skip to list of components
Service phase: 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. Component 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 640 640" height="24" aria-hidden="true" focusable="false"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
        <path d="M73.4 297.4C60.9 309.9 60.9 330.2 73.4 342.7L233.4 502.7C245.9 515.2 266.2 515.2 278.7 502.7C291.2 490.2 291.2 469.9 278.7 457.4L173.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L173.3 288L278.7 182.6C291.2 170.1 291.2 149.8 278.7 137.3C266.2 124.8 245.9 124.8 233.4 137.3L73.4 297.3z" />
      </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 640 640" height="24" aria-hidden="true" focusable="false"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
        <path d="M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z" />
      </svg>
      Next
    </a>
  </div>
</nav>

Nunjucks

Nunjucks options
Primary options
Name Type Description
previous object

See macro options for previous.
items array

See macro options for items.
next object

See macro options for 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.

title string
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.

title string 
{% 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: "#"
  }
}) }}

Component status

Phase
Official (ready to use in production)

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)’.

Number of page links

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:

First and last pages

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