Pagination
Pagination breaks up content or data into multiple pages and gives users easier ways to navigate throughout.
Types
Default pagination
Guidelines
As related content is divided or large data sets are relayed in smaller parts, pagination is recommended to make information easier to find and use.
Anatomy
- Previous & Next: From the selected page, you can move backward and forward.
- Current page: The current page on which the user is.
- Page navigation: Select a page number to navigate to it.
- Truncation (optional): Ellipses are used to truncate pages when the maximum display limit is exceeded.
Interaction
Specifications
These specifications enable designers and developers to create pagination that are pixel-perfect.
Accessibility
- Users can navigate with a keyboard and trigger the chevron icons and page numbers using the ENTER or SPACE keys.
- The pagination is clearly identified by the screen reader technology.
- Page numbers are correctly identified and interpreted by the screen reader.
- Current page numbers include the aria-current attribute.
- Chevron icons are correctly identified by the screen reader.
Do
- When users are unlikely to need to see all the content.
- When the first page is enough to make a decision.
- When loading all the content at once would not be possible technically.
- When keeping your place is important or you want to bookmark a specific page
- When there's lot of screen real estate.
Don't
- Place pagination above search results.
- Show all available pages.
- Use lazy load or infinite scroll.
- Switch between slides or content in a carousel displaying editorial content.