Pagination

Pagination affords navigation between pages of content, and it highlights the page currently in view.

Overview

Pagination allows the user to easily find and navigate through large amounts of content and breaks up content into multiple pages.

Usage

Use when

  • Amount of content will take a long time to load/render.
  • If you want to browse the data by navigating through pages.
  • A table contains more than 30 items.
  • A page contains enough content to justify breaking it into smaller chunks to improve a user’s experience.

Don’t use when

  • Using lazy load to load content as the user scrolls.

Specifications

Example
Small
Default
Large

  • Use no arrows when number of pages is eight or fewer.
  • Display a maximum interval of eight pages at a time.
  • Single caret icon increments by one page.
  • Double caret icon jumps to the first or last page.
  • Distinctive highlight for current page.

Behaviors

  • Disable the first and previous arrow icons (and their labels) when the first page is selected.

  • Disable the next and last arrow icons (and their labels) when the last page is selected.

Accessibility

  • Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.
  • As pages likely have more than one such navigation section, it’s advisable to provide a descriptive aria-label for the <nav> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be aria-label="Search results pages".
  • Pagination is built with the ordered list ol HTML elements (only if the number of links exactly matches), so screen readers can announce the number of available links.
  • If you use icons for the next and previous buttons be sure to add the aria-label="Previous" and aria-label="Next" attributes to the links.