Change log
Components
Pagination
- Overview
- Usage
Overview
When to use
Use pagination to separate large lists of content, such as search results, into smaller lists that are easier to interact with. Showing content on several pages prevents your content from becoming too long and overwhelming.
Consider using pagination when a listing exceeds 20 results.
When not to use
Do not use pagination component for linear journeys – for example, showing progress in multi-page forms.
Principles​
Add the pagination component after the content on each page that you're paginating.
Show an appropriate number of pages to fit the horizontal space available.
For large and medium screens, show page numbers for:
- the current page
- at least two pages immediately before and after the current page
- first and last pages
For smaller screens, show page numbers for:
- the current page
- first and last pages
Do not show the previous page link on the first page and do not show the next page link on the last page.
Do not show pagination if there's only one page of content.
Usage guidliness
Previous and next​
Do not show the previous page link on the first page and the next page link on the last page.
Do
Don't
Truncation​
Use truncation when the page numbers do not fit in the available space. Avoid multiple rows of page numbers.
Do
Don't
Single page​
Do not show pagination if there’s only one page of content.
Don't