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