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 permits you to navigate within content split across numerous pages.

Usage

Use pagination to permit navigation between different pages of data list of content too long to be presented in its entirety. This is ideal for presenting data sets not adapted to the display areas. Users can navigate by clicking directly on the page numbers or by clicking on the ‘Previous’ and ‘Next’ buttons. It is also possible to propose an indicator for the number of results and an input to allow the selection of the number of entries per page.

 

Best Practices

* Use pagination when the length of the content affects the page layout.

* Page numbering is always shown in ascending order.

* Show only a maximum of 5 sliding numbers in relation to the current page and use “…” to indicate the preceding and following pages.

* The “Previous” button only becomes active from page 2 onwards.

* The “Next” button is inactive on the last page.

* The current page number is always highlighted.

* We advise showing the total number of items in a list and indicating the items consulted (e.g. “Showing 1-30 of 3,500 entries”)

* Only authorize the variation number of entries per page if the page layout permits and if it is in the user’s best interest to have a longer list.

 

Placement

The navigation is located at the bottom of a card, or a page containing the split up data list.

Visual
Pagination Desktop
Pagination Mobile

Appearance

Pagination is shown in the form of a list of separable numbers and the “Previous” and “Next” buttons. 

 

Behavior

The current page is highlighted with a colored square using a color from the primary palette. Pages may also display the hover state.


Variations

A variation exists in which the total number of results is displayed along with the position of displayed results. It is also possible to add an input to select the number of items  to display per page.

 

 

Back to top