Components

Pagination

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

Component status
Number of page links
First and last pages
Previous and next pages

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

HTML

<nav class="tna-pagination" aria-label="Pagination">
  <div class="tna-pagination__prev-next tna-pagination__prev-next--prev">
    <a href="#" class="tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--prev 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>
      <span class="tna-pagination__prev-next-button-text"><span class="tna-pagination__prev-next-button-title">Previous</span></span>
    </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__prev-next tna-pagination__prev-next--next">
    <a href="#" class="tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--next 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>
      <span class="tna-pagination__prev-next-button-text"><span class="tna-pagination__prev-next-button-title">Next</span></span>
    </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`
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.
description	string	An optional description to show below the previous button text.

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. Default value: `false`
ellipsis	boolean	Use this option 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. Default value: `false`

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.
description	string	An optional description to show below the next button text.

{% 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:

the current page
previous and next pages
first and last pages

For larger screens, show page numbers for:

the current page
at least one page immediately before and after the current page
first and last pages

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

[1] 2 3 … 42
1 [2] 3 … 42
1 2 [3] 4 … 42
1 2 3 [4] 5 … 42
1 … 4 [5] 6 … 42
1 … 37 [38] 39 … 42
1 … 38 [39] 40 41 42
1 … 39 [40] 41 42
1 … 40 [41] 42
1 … 40 41 [42]

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

Previous and next pages

Show only a previous and next with no numbers if your pagination isn't part of a numbered sequence.

Open this example in new tab

HTML

<nav class="tna-pagination" aria-label="Pagination">
  <div class="tna-pagination__prev-next tna-pagination__prev-next--prev">
    <a href="#" class="tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--prev 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>
      <span class="tna-pagination__prev-next-button-text"><span class="tna-pagination__prev-next-button-title">Previous item: TS 11/45/166</span><span class="tna-pagination__prev-next-button-description">Previous item description</span></span>
    </a>
  </div>
  <div class="tna-pagination__prev-next tna-pagination__prev-next--next">
    <a href="#" class="tna-button tna-pagination__prev-next-button tna-pagination__prev-next-button--next 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>
      <span class="tna-pagination__prev-next-button-text"><span class="tna-pagination__prev-next-button-title">Next item: TS 11/45/168</span><span class="tna-pagination__prev-next-button-description">Next item description</span></span>
    </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`
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.
description	string	An optional description to show below the previous button text.

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. Default value: `false`
ellipsis	boolean	Use this option 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. Default value: `false`

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.
description	string	An optional description to show below the next button text.

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

{{ tnaPagination({
  previous: {
    href: "#",
    text: "Previous item: TS 11/45/166",
    description: "Previous item description"
  },
  next: {
    href: "#",
    text: "Next item: TS 11/45/168",
    description: "Next item description"
  }
}) }}

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": "#",
    "text": "Previous "item": TS 11/45/166",
    "description": "Previous item description"
  },
  "next": {
    "href": "#",
    "text": "Next "item": TS 11/45/168",
    "description": "Next item description"
  }
}) }}

This website uses cookies

Pagination

Contents

HTML

Nunjucks

Jinja

Important information!

Component status

Number of page links

First and last pages

Previous and next pages

HTML

Nunjucks

Jinja

Important information!

Important information

Important information