Pagination

Pagination is a set of links that allow users to navigate content split into multiple pages. It typically includes navigational controls such as next and previous buttons, as well as direct links to specific pages.

Also known as: Page navigation, page toggle, page numbers, paging.

Anatomy

A. Skip navigation arrow (optional): Links allowing users to skip to the first or last page.
B. Sequential navigation arrow (required): Links enabling users to navigate forward or back one page.
C. Page numbers (required): Visible numbers linking to other pages in the collection.
D. Selected page number (required): Indicator of the current page the user is interacting with.
E. Overflow ellipsis (optional): Non-interactive separator between the start or end page numbers.

Usage

Best practices

• Ensure all page numbers and arrows function as interactive links, except the currently selected page.
• Use a clear visual indicator to show which page is currently selected.
• Always allow users to navigate to the first page, last page, back one page, or forward one page using navigation arrows.
• Display a manageable number of page links, using ellipsis to truncate the list if necessary.

Default pagination

Default pagination provides a standard way to navigate through large volumes of content or datasets. It’s ideal for larger sets of content because it includes more functionality for users to easily move between pages. It typically includes sequential navigational controls, such as next and previous buttons, as well as ellipses and skip navigation controls for users to move to the first and last pages.

Slim pagination

Slim pagination is a more compact version of default pagination, designed for scenarios where screen space is limited or when a cleaner, less cluttered interface is desired. It includes only the essential navigational controls, such as next and previous buttons, and may omit direct links to specific pages. Slim pagination is ideal for mobile interfaces or when the total number of pages is relatively small and it’s feasible for the user to navigate one page at a time.

Placement

Pagination is usually centered below an element or at the foot of page content.

• Place pagination controls in consistent locations throughout an interface.

Results per page

The “Results per page” feature allows users to control how many items they see on each page of a paginated list. This functionality gives users the flexibility to view more or fewer items per page according to their preferences or needs. It’s particularly useful in scenarios where users may want to adjust the volume of information they are processing, such as in search results, product listings, or data tables.

• Set a reasonable default number of results per page that balances performance and usability, such as 10 to 20 items, without overwhelming users with too many choices.
• Clearly indicate the current selection of results per page and make it easy for users to change this setting.
• Save the user’s preference for the number of results per page, so that they don’t have to re-select it each time they return to the same page or application.
• Ensure that the “Results per page” feature works well on mobile devices, where screen space is limited and users may prefer fewer results per page to avoid excessive scrolling.

Behaviors

Pagination has a number of expected behaviors depending on the type selected. The guidance below outlines the expected behaviors of default pagination.

First four pages selected

When users navigate through pages 1–4 in a pagination set, pagination includes one overflow ellipsis symbol representing the pages between the fifth and last page. When page 1 is selected, the arrow buttons to navigate backward should be disabled.

Middle pages selected

When users select any page other than the first four or last four, pagination includes two overflow ellipsis symbols on either end of three internal page numbers. The selected page should always be the center of the set. The first and last page number should always show and all navigation arrows should be active.

Last four pages selected

When users navigate through the last four pages, pagination includes one overflow ellipsis symbol after the number representing page 1. When the last page is selected, the arrow buttons to navigate forward should be disabled.

Platform considerations

Web (default)

For web, pagination is shown in a single line with all four navigational arrows and utilizes the behaviors outlined above around overflow. Depending on the use case, navigational arrows can be simplified to the include only sequential controls.

Mobile

Mobile screen sizes use a five-control design that limits how many pages are available to users. While pagination for mobile screen sizes is available, it’s generally not recommended for use and isn’t available in mobile native.

Consider implementing these common alternatives in place of mobile pagination.

Infinite scrolling

Infinite scrolling automatically loads new content as a user scrolls through the page, eliminating the need to manually navigate to the next page.

• Use for content-heavy applications where continuous exploration is needed.
• Provide visual feedback if needed, such as a loading spinner, to indicate that new content is being loaded.
• Avoid infinite scrolling for content where users might need to find specific information quickly.

“Load more” button scrolling

“Load more” buttons allow users to manually load content as needed. It provides more control than infinite scrolling, enabling users to decide when they want more information.

• Place the “load more” button at the bottom of the content list, ensuring it’s easily accessible.
• Clearly indicate when new content has been loaded to avoid confusion.
• Consider adding a counter or Progress indicator to show how much content remains unloaded.

Related guidelines