Help users navigate forwards and backwards through a series of pages. For example, search results or guidance that’s divided into multiple website pages.
{{ aspExample({ code: "<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: "{{ aspPagination({
hrefs: {
previous: \"#\",
next: \"#\"
}
}) }}", title: "", id: "65a92dc0b528b", url: "" }) }}
{{ aspExample({ code: "", nunjucks: "{{ aspPagination({
text: \"months\",
hrefs: {
previous: \"#\"
}
}) }}", title: "", id: "66e04c961110f", url: "" }) }}
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.
{{ aspTable({
head: [
{ text: 'Development criteria'},
{ text: 'Status'}
],
rows: [
{
cells: [
{ text: 'WCAG 2.2 compliant'},
{ html: '<span class="status">Not started</span>'}
]
},
{
cells: [
{ text: 'WCAG 2.1 compliant'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'HTML / Nunjucks version'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'Figma version'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'M365 versions'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'Documentation'},
{ html: '<span class="status status–yellow">In progress</span>'}
]
}
]
}) }}