Your web browser is out of date
Your web browser (the software you use to access the internet) is out of date. You need to update it or use a different web browser to ensure you can complete this form.
Pagination
Help users navigate forwards and backwards through a series of pages. For example, search results or guidance that’s divided into multiple website pages.
<nav class="asp-pagination">
<ul class="asp-pagination__list">
<li class="asp-pagination__item">
<a href="#">Previous 10 results</a>
</li>
<li class="asp-pagination__item asp-pagination__item--next">
<a href="#">Next 10 results</a>
</li>
</ul>
</nav>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Description |
|---|---|---|
| links | array or false (boolean) | The link text for the previous and next buttons. Default values are 'default', false (boolean) or null, which will show "Previous 10 results" / "Next 10 results". If false (boolean), the following parameters will be ignored. See links. |
| hrefs | array | The URLs for the next and/or previous links. See hrefs. |
Options for links
| Name | Type | Description |
|---|---|---|
| previous | string | Required. The text for the previous link. |
| next | string | Required. The text for the next link. |
Options for hrefs
| Name | Type | Description |
|---|---|---|
| previous | string or false (boolean) | The URL for the previous link. Default values are false (boolean) or null, which will not show this link. Note, if 'previous' and 'next' are both blank the pagination component will not show. |
| next | string or false (boolean) | The URL for the next link. Default values are false (boolean) or null, which will not show this link. Note, if 'previous' and 'next' are both blank the pagination component will not show. |
{% from "components/pagination/macro.njk" import aspPagination %}
{{ aspPagination({
hrefs: {
previous: "#",
next: "#"
}
}) }}
Twig macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Description |
|---|---|---|
| links | array or false (boolean) | The link text for the previous and next buttons. Default values are 'default', false (boolean) or null, which will show "Previous 10 results" / "Next 10 results". If false (boolean), the following parameters will be ignored. See links. |
| hrefs | array | The URLs for the next and/or previous links. See hrefs. |
Options for links
| Name | Type | Description |
|---|---|---|
| previous | string | Required. The text for the previous link. |
| next | string | Required. The text for the next link. |
Options for hrefs
| Name | Type | Description |
|---|---|---|
| previous | string or false (boolean) | The URL for the previous link. Default values are false (boolean) or null, which will not show this link. Note, if 'previous' and 'next' are both blank the pagination component will not show. |
| next | string or false (boolean) | The URL for the next link. Default values are false (boolean) or null, which will not show this link. Note, if 'previous' and 'next' are both blank the pagination component will not show. |
{% from "components/pagination/macro.njk" import aspPagination %}
{{ aspPagination({
hrefs: {
previous: "#",
next: "#"
}
}) }}
<nav class="asp-pagination">
<ul class="asp-pagination__list">
<li class="asp-pagination__item">
<a href="#">Previous 10 results</a>
</li>
</ul>
</nav>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Description |
|---|---|---|
| links | array or false (boolean) | The link text for the previous and next buttons. Default values are 'default', false (boolean) or null, which will show "Previous 10 results" / "Next 10 results". If false (boolean), the following parameters will be ignored. See links. |
| hrefs | array | The URLs for the next and/or previous links. See hrefs. |
Options for links
| Name | Type | Description |
|---|---|---|
| previous | string | Required. The text for the previous link. |
| next | string | Required. The text for the next link. |
Options for hrefs
| Name | Type | Description |
|---|---|---|
| previous | string or false (boolean) | The URL for the previous link. Default values are false (boolean) or null, which will not show this link. Note, if 'previous' and 'next' are both blank the pagination component will not show. |
| next | string or false (boolean) | The URL for the next link. Default values are false (boolean) or null, which will not show this link. Note, if 'previous' and 'next' are both blank the pagination component will not show. |
{% from "components/pagination/macro.njk" import aspPagination %}
{{ aspPagination({
text: "months",
hrefs: {
previous: "#"
}
}) }}
Twig macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Description |
|---|---|---|
| links | array or false (boolean) | The link text for the previous and next buttons. Default values are 'default', false (boolean) or null, which will show "Previous 10 results" / "Next 10 results". If false (boolean), the following parameters will be ignored. See links. |
| hrefs | array | The URLs for the next and/or previous links. See hrefs. |
Options for links
| Name | Type | Description |
|---|---|---|
| previous | string | Required. The text for the previous link. |
| next | string | Required. The text for the next link. |
Options for hrefs
| Name | Type | Description |
|---|---|---|
| previous | string or false (boolean) | The URL for the previous link. Default values are false (boolean) or null, which will not show this link. Note, if 'previous' and 'next' are both blank the pagination component will not show. |
| next | string or false (boolean) | The URL for the next link. Default values are false (boolean) or null, which will not show this link. Note, if 'previous' and 'next' are both blank the pagination component will not show. |
{% from "components/pagination/macro.njk" import aspPagination %}
{{ aspPagination({
text: "months",
hrefs: {
previous: "#"
}
}) }}
<nav class="asp-pagination">
<ul class="asp-pagination__list">
<li class="asp-pagination__item">
<a href="#">Previous page</a>
</li>
<li class="asp-pagination__item asp-pagination__item--next">
<a href="#">Next page</a>
</li>
</ul>
</nav>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Description |
|---|---|---|
| links | array or false (boolean) | The link text for the previous and next buttons. Default values are 'default', false (boolean) or null, which will show "Previous 10 results" / "Next 10 results". If false (boolean), the following parameters will be ignored. See links. |
| hrefs | array | The URLs for the next and/or previous links. See hrefs. |
Options for links
| Name | Type | Description |
|---|---|---|
| previous | string | Required. The text for the previous link. |
| next | string | Required. The text for the next link. |
Options for hrefs
| Name | Type | Description |
|---|---|---|
| previous | string or false (boolean) | The URL for the previous link. Default values are false (boolean) or null, which will not show this link. Note, if 'previous' and 'next' are both blank the pagination component will not show. |
| next | string or false (boolean) | The URL for the next link. Default values are false (boolean) or null, which will not show this link. Note, if 'previous' and 'next' are both blank the pagination component will not show. |
{% from "components/pagination/macro.njk" import aspPagination %}
{{ aspPagination({
links: {
previous: "Previous page",
next: "Next page"
},
hrefs: {
previous: "#",
next: "#"
}
}) }}
Twig macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Description |
|---|---|---|
| links | array or false (boolean) | The link text for the previous and next buttons. Default values are 'default', false (boolean) or null, which will show "Previous 10 results" / "Next 10 results". If false (boolean), the following parameters will be ignored. See links. |
| hrefs | array | The URLs for the next and/or previous links. See hrefs. |
Options for links
| Name | Type | Description |
|---|---|---|
| previous | string | Required. The text for the previous link. |
| next | string | Required. The text for the next link. |
Options for hrefs
| Name | Type | Description |
|---|---|---|
| previous | string or false (boolean) | The URL for the previous link. Default values are false (boolean) or null, which will not show this link. Note, if 'previous' and 'next' are both blank the pagination component will not show. |
| next | string or false (boolean) | The URL for the next link. Default values are false (boolean) or null, which will not show this link. Note, if 'previous' and 'next' are both blank the pagination component will not show. |
{% from "components/pagination/macro.njk" import aspPagination %}
{{ aspPagination({
links: {
previous: "Previous page",
next: "Next page"
},
hrefs: {
previous: "#",
next: "#"
}
}) }}
When to use this component
Consider using pagination when:
- showing all the content on a single page makes the page take too long to load
- most users will only need the content on the first page or first few pages
When not to use this component
Only break up content onto separate pages if it improves the performance or usability of your service.
Avoid using the ‘infinite scroll’ technique to automatically load content when the user approaches the bottom of the page. This causes problems for keyboard users.
Do not use this Pagination component for linear journeys — for example, where you’re asking the user to complete a form.
Status of development
The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.
| Development criteria | Status |
|---|---|
| WCAG 2.2 compliant | Not started |
| WCAG 2.1 compliant | Completed |
| HTML / Nunjucks version | Completed |
| Figma version | Not started |
| M365 versions | Not started |
| Documentation | In progress |
Make a change to the Design System
Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.
Published 3 May 2024
Last updated 24 October 2025