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.
  • Pagination is built with the ordered list ol HTML elements, so screen readers can announce the number of available links.