Pagination lets users navigate through content divided over several pages.
How to use pagination
Pagination is typically used in product listing or search results pages. They tell users how many pages of results have been found and allow users to navigate back and forth between them.
When using pagination:
- Make sure pagination is only used for lists with more than 25 items
aria-liveregions to tell screen reader users about dynamic changes in content that don’t trigger a full page refresh
- Always place it at the bottom of the page
- Use the landmark
<nav>region with an appropriate
aria-labelto make the component more accessible to screen reader users
- This component uses buttons and not links and is therefore most accessible when triggering dynamic content changes as opposed to navigating to a new page
Pagination is an effective way to help users navigate a long list whilst maintaining a sense of where they are. But alternative solutions like a 'load more' pattern may encourage users to browse more, particularly on a mobile.
Types of pagination
This type of pagination allows users to skip multiple pages at a time rather than one by one.
This variant of pagination can be used when space is limited.
Use ‘Next’ and ‘Previous’ as navigation labels.
Was this page helpful?
Get in touch
Our team can answer any questions about using pagination or give you a helping hand with your next project.