Pagination

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.

Best practices

Highlight the current page number: users should always know where they currently are and where they can go.
Always use a legend indicating the number of entries (e.g. “Showing 1-30 of 3,500 entries”)
Prefer a see more button to a pagination when you have several lists of items (for example on a dashboard).
Articles and linear contents should never be broken up into multiple screens.
Do not use pagination for less than 25 items.
On mobile, don’t use overflow pagination.

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.