Usage
Use pagination when there are too many results to show on the one page, so the user isn't overwhelmed by too much information.
Pagination is commonly used for things like table listings, search results, and directories. Consider using pagination if you’re influenced by:
- System load times
- Amount of data in each entry
- Screen space
Pagination is a control that sits at the bottom of the results section and allows the user to easily move between each page.
Best practices
The pagination component comes with maximum and minimum limit to how many pages are shown in desktop and mobile.
- Previous and next buttons or links are the most useful way for the user to move forward or backward through pages of data.
- Display previous and next buttons even if one of them is disabled to help users know what to expect and to keep the UI from jumping around.
- Display the Current Page to provide awareness of location in relation to the other pages.
- If feasible, display additional details (number of pages and total number of items) to communicate even more context about the content or data the user is paging through.
When to use
- To divide large quantities of data or content into chunks.
- To improve the loading performance of a system.
- To make user comprehension of data/content less overwhelming.
- To enable all users to navigate to through pages or locate a specific page number.
- To show how many pages of content there are and how many results have been returned.
- To enable users to focus on a few items at a time.
- To make it clear there’s more to explore when ready.
- For large collections of items.
When not to use
- For only a few items—keep them all on one page.
Anatomy
- Previous page – navigational control
- Page navigation
- Current page
- Truncation
- Next page – navigational control
- Result label
Behaviour
Although it’s best to filter as much as possible and leave the user with a reasonable size of results to sift through, in the undesirable case of many pages, use truncation to indicate that some pages are out of view and always display the first and last page. Truncation on mobile is however not recommended.
Placement
Since Pagination typically appears underneath the UI element it’s controlling, it needs to be obvious that it is controlling the element above it, rather than anything else below it. Placement of the label is directly below the page controls to indicate the size of results and help orient the user.
Responsive behaviour
- For larger screens, you can show up to 6 pages, including truncation.
- For smaller screens, it’s recommended to show page navigation controls with no more than 4 pages and no truncation.
States
Disabled state only applies to navigational control elements (prev/next buttons) when the user is viewing either the first or last page. Page navigation elements should not be disabled as it’s not recommended to list unaccessible pages.
Content guidelines
If customising the label of the total number of results, use a word that accurately describes the items that are being shown.