Pagination
A navigation element that divides content into pages and allows users to navigate between them. The component is made up of a list of page numbers with links, also with “Previous” and “Next” links.
On this page
Example
When to use
Pagination is used with large sets of content that would be impractical or overwhelming to display on a single page. Examples of use cases include: search results, news and blog post archives, and people directories.
Guidelines
These guidelines have been implemented within the component:
- Show current page and total pages clearly (“Page 3 of 15”)
- Include Previous/Next buttons for easy navigation
- Use ellipsis (…) to indicate skipped pages in lengthy pagination
- Avoid pagination for small content sets where users would expect to see everything at once
Accessibility
These accessibility considerations have been implemented within the component:
- Use descriptive link text (“Go to page 2” not just “2”)
- Ensure keyboard navigation works properly
- Provide clear focus indicators