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" aria-current="page">
        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

An optional 'Previous' button.

See macro options for previous.
items array

A list of pagination items.

See macro options for items.
next object

An optional 'Next' button.

See macro options for next.
landmarkLabel string

An optional label for the pagination region.

Default value: Pagination
currentItemText string

If no items are provided, this text will be used to indicate the current page.
solid boolean

If true, use a solid background for the pagination buttons.
spaced boolean

If true, add spacing between the pagination buttons and align the previous and next buttons to the extreme left and right of the component respectively.
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

The text for the previous button.

Default value: Previous
href string

Required.

The URL for the previous page.
title string

An optional title attribute for the previous button.
Options for items
Name Type Description
number string

Required.

The number of the page.
href string

Required.

The URL of the page.
current boolean

If true, highlight this item as the current page.
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

The text for the next button.

Default value: Next
href string

Required.

The URL for the next page.
title string

An optional title attribute for the next button.

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

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/pagination/macro.html" 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