Components

Pagination

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

Status
Number of page links
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.

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"><!--!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"><!--!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

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

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

This website uses cookies