Overview
The pagination pattern splits and organizes content of a list or table into separate pages.
Pagination Pattern - Look and feel
When to Use
1
do
false
Recommended
- Use for goal-oriented finding tasks (e.g. locate specific content or compare options)
- Use for information heavy pages with a lot of items and columns
- If user shall rather adapt searching and filtering capabilities than scrolling through whole content
- If the scrollbar needs to represent the actual amount of data on one page
- If the user needs control on how the data is shown
As of now a working sample from UI5 is not yet implemented.
1
dont
false
Not Recommended
- Avoid using for content exploration and catalogues
- Avoid using it for cards and visual content
- Avoid using for displaying small number of items which fit into a single page
- Avoid using without sorting, filtering or searching possibilities
Anatomy
1
84.93; 5.88
Results per Page Label
Label for the page interval select.
2
86.30; 19.25
Page Interval Select
Select for choosing the number of items shown on the page.
3
84.93; 38.50
Navigation Button Back
Navigates back to prior page.
4
86.30; 45.00
Placeholder Dots
Placeholder dots for indicating in-between pages.
5
86.30; 48.50
Navigation Buttons
Buttons for navigating to prior, next, -2 and +2 page of current page.
6
87.67; 56.13
Page Input
Contains the current page number. Entering a different number and pressing enter navigates to new page.
7
86.30; 73.88
Navigation Button Next
Navigates to next page.
8
89.04; 95.00
Results (Optional)
Shows overall result number. Only use if no other option is applicable for showing the overall result number n.
- Place the pagination component always below the list or table it relates to.
- The Results per Page section is left-aligned, the page selection section centrally aligned and the Results section right-aligned.
- The total item amount must be visible somewhere on the screen. Prefer showing the total number on the table, list or page itself rather than using the results section in the pagination control.
Responsiveness
Using pagination in a mobile use case is generally not recommended. If pagination is needed, recommendation is to simplify the pagination component.
1
91.25; 8.15
Page Interval Select
Select for choosing the number of items shown on the page.
2
85.62; 39.49
First Page Button
Navigates to first page.
3
85.62; 48.33
Navigation Button Back
Navigate back to prior page.
4
81.92; 56.19
Page Label
Label for the Page Input.
5
87.47; 65.82
Page Input
Contains the current page number. Entering a different number and pressing enter navigates to new page.
6
87.47; 76.03
Page Number
Label to show the overall Page Number.
7
96.73; 85.66
Navigation Button Next
Navigates to next page.
8
93.03; 93.32
Last Page Button
Navigates to last page.
See also:
Visual Design Wiki - Pagination
Fundamental Styles Sample - Pagination