Previous and next navigation
Navigational links that allow users to navigate within a series of pages or elements.
When to use this component
The previous and next navigation component is used when content is split over multiple pages. Particularly if showing all the content on a single page would take too long to load.
When not to use this component
This component is not necessary for single pages.
How it works
It allows users to step through multiple pages using links to the previous or next page.
The links are accompanied by a left or right arrow icon as a visual cue to its functionality.
A single link can be displayed, for example, only a next page link would be necessary on the first page of a sequence.
There is also an option to provide labels for additional context, for example, the title of the page or the page number.
GA4 tracking is enabled by default, but can be switched off.
View this component and all its variations in the Component Guide (opens in a new tab).
Accessibility criteria
Icons in the component must not be announced by screen readers.
The component must:
- identify itself as pagination navigation
- provide a distinction between the navigation text and label text of the links both visually and for screenreaders
Links in the component must:
- accept focus
- be focusable with a keyboard
- be usable with a keyboard
- indicate when they have focus
- change in appearance when touched (in the touch-down state)
- change in appearance when hovered
- be usable with touch
- be usable with voice commands
- have visible text
- have meaningful text
Considerations and criteria taken from the Component Guide (opens in a new tab).
How other design systems document this component
How to report an issue
If you happen to come across an issue:
- Report it on Github (opens in a new tab).
- Once the issue has been added, update this document by adding the title and Github Issue’s link.
- Give yourself a high-five.
Help improve this page
To help make sure that this page is useful, relevant and up to date, submit a GitHub issue (opens in a new tab) with your proposed updates.