Pagination allows the user to navigate across separate and numerous pages.

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

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

Visual guidelines


Pagination items have 4 states : default, hover, active and disable.



On desktop, respect the paddings of the Sketch asset, and give space to the pagination pattern.

Responsive behaviours

Page selector


Load more

Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

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.

Back to top