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.
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.