Pagination
Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
Table of Contents
Edit this section, Opens in new windowOverview
When there is a lot of content to display, using pagination will help us to add navigation links to reveal more content on the page.
Primarily, put pagination on the bottom of the table. If the table does not fit on the screen, use pagination above the table aswell.
Default
Disabled buttons is shown when the data set is at the end, or beginning of the data set.
Usage
Use pagination to:
- Present lists that contain specific items a user may need to find in order to complete their task.
- Navigate lists that can be sorted and/or filtered.
We use both pagination and load more to segment results depending on the user's task. Compare these guidelines with the Discovery vs browsing usage guidelines if you are unsure of which to use.
Table title
Additional description if needed
| Name | Age | Position | Office | Start date | Salary |
|---|---|---|---|---|---|
| John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
| John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
| John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
| John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
| 123 123 123 | |||||
- Pagination
Principles
Identify the current page
Clearly identify which page the user is on by displaying the current page number. By providing context into how many pages there are in total (eg. 1 of 4 pages), you can help provide clarity around the data displayed.
Provide various options for navigating
Previous and next chevrons or links are the most useful way for the user to move forward or backward through pages of data.
Sizing
Anatomy
- Go to first page
- Go to next page
- Page
- Current page
- Truncated pages
- Go to next page
- Go to last page
- Showing the current page set and total number of pages
Behaviours
Anchoring
Always anchor to the bottom of the list when the user interacts with the pagination component. If the data-set does not fit on the screen, use pagination above the table aswell.
Truncation
Truncation is shown using … when the number of pages exceeds the pagination display limit.
Page counters
When page counters are not available due to a technical restraint, the minimal pagination version may be used without the page count.
Interactions
Focus
2px dotted outline with color BL 1,
BLUE.
Dots
Usage
Use the pagination dots when you want to control
Sizing
Pagination dots comes in two sizes, default and small.
Anatomy
- Page indicator
- Current page indicator
- The outline is LB 1, LIGHT BROWN 30%
- The fill color for current is BL 1, BLUE
Interactions
Hover
Focus
The hover color is BR 1, BROWN
Focus
Focus
2px border with
color BL 1, BLUE
Complement, a direct complement color
of BL 1, BLUE.
Modifiers
Small
Smaller pagination dots can be used depending on the size of the object(s) it controls.
Accessibility
View the videos at a11ymattters, Accessible Pagination for a demonstration of before and after pagination tests using a screen reader voiceover.
This component has compliance WCAG guidelines by:
- WCAG 2.4.8: Information about the user's location within a set of Web pages is available
- WCAG 3.2.3: Navigation patterns follow a consistent pattern. Only position pagination component at the bottom of the page
- WCAG 2.4.3: Focus state receives focus in an order that preserves meaning
- WCAG 2.4.7: Focus is visible
- WCAG 2.5.5: Target size for pagination links are large enough for users to easily activate them
Principles
- The pagination should be keyboard navigation friendly
- A screen reader should easily pick up the pagination
- Each navigation item should be read as "Goto Page 1".
- We need to tell the user which element is currently active.
- The pagination should have Next and Previous links, where applicable.