General guidelines
Pagination must be used in specific context : blog, e-commerce or very long lists of items websites like photo galleries.
It is useful to split a large amount of content across different pages.
Pagination must be used when the user is searching for something in particular in a list of results. Therefore, knowing the number of results available is better than infinite scroll to facilitate decision making.
Show only a maximum of 5 numbers in relation to the current page and use ellipsis marks “…” to indicate the preceding and following pages.
Page numbering is always shown in ascending order. The previous pages represented with the left arrow icon only become active from page 2 onwards.
You can use a selector within the pagination bar so that the user can change the number of rows displayed per page :
- if the page layout permits it.
- if it is in the user’s best interest to have a longer list.
Page selector
We recommend using a page selector on mobile devices.
The page selector allows users to directly choose the page they wish to navigate to.
Load more
The load more is another recommended option, especially on mobile devices, to show only a preview of the available items.
Infinite scroll
Do not use infinite scrolling or the load more option, if the user needs to find specific data.
Use infinite scrolling when the user is just browsing - so they need to see a large number of items in order to find what they like. To discover more, visit the page about the scroll component.
Best practices
Highlight the current page number and always use a legend indicating the number of entries.
Don’t be unclear about the current state : users should always know where they currently are and where they can go.
Keep pagination for very long lists of items.
Do not use pagination for less than 25 items nor within articles
Behaviours
Pagination items have 4 states : default, hover, active and disable.
Layout
On desktop, respect the paddings of the Sketch asset, and give space to the pagination pattern.
Code & Design assets
Request code and design assets for creating user interfaces.
Can I contribute to the System?
Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.