Components
Pagination
Use a list-type layout if users need to navigate through pages of similar items.
Contents
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" 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">⋯</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">⋯</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
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. |
Name | Type | Description |
---|---|---|
text | string | |
href | string |
Required. |
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 |
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.