Pagination

v2.1

Pagination breaks large data sets into multiple pages for easier consumption. Controls are included to navigate between pages and manage how much content is shown at once. This is primarily an HTML pattern.

CSS
Marko
React

Considerations

Consumable

Pagination breaks up large, overwhelming amounts of data into consumable chunks.

Simple

Interactions are quick and easy within a tap or two.

Distinct

Pagination provides a clear distinction of the current page within a data set.

Anatomy

1. Back Navigation: "Arrow pointing left, indicating the option to go to the previous page in the pagination sequence."
2. Page number: "Unselected page numbers showing the sequence of pages available for navigation."
3. Overflow menu: "Three vertical dots representing an overflow menu with additional pagination options."
4. Active page indicator: "Circle highlighting the current page number, page 44, in the pagination sequence."
5. Forward Navigation: "Arrow pointing right, indicating the option to go to the next page in the pagination sequence."

Back Navigation
Page number
Overflow menu
Active page indicator
Forward Navigation

Properties

Visible slots

There is an absolute maximum of 7 visible slots available, including the overflow element if pages are truncated. On smaller screens, more pages will be truncated as the screen width decreases. When pages are truncated, the minimum is 5 slots visible. Avoid showing pagination if only 1 page exists.

Leading overflow

The leading overflow appears when there are at least 2 pages between the last page and the page before the overflow.

Trailing overflow

The trailing overflow appears when navigating within the last 4 pages and will contain a minimum of 2 pages.

Leading and trailing overflow

Both the leading and trailing overflow appear when there are at least 3 pages ahead and behind the active page, excluding the first and last page.

Inline select menu

If space permits, it is recommended to pair pagination with a dropdown controlling the results per page.

Behavior

Overflow interaction

Interacting with the overflow element reveals a popover menu.

Platforms

Native

We recommend avoiding pagination on small screens and native applications. Use an infinite scroll pattern instead to allow users to load content on demand.