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: "", nunjucks: "", json: "", title: "", example: "default", id: "65a92dc0b528b" }) }} {{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "previous-only", id: "66e04c961110f" }) }} {{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "custom-labels", id: "66e04c961110f" }) }}

When to use this component

Consider using pagination when:

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.