In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Pagination

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.

Picture shows a mobile presentation.

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.
Desktop pagination
Image shows an example of a desktop 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.
Mobile pagination

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.

picture shows a page selector on mobile.

Load more

The load more is another recommended option, especially on mobile devices, to show only a preview of the available items.

picture shows a load more button with legend on a mobile.
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.

Visual guidelines

Behaviours

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

Pagination05

Layout

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

picture shows a pagination on a datatable.
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