Pharos
JSTOR's Design System
 Getting started Help FAQs DocumentationDevelopment GitHub JSTOR LogosTypographyColorImageryIconographyElevationVoice and toneJSTOR termsWeb elementsGrammar and styleEditing checklistAlertButtonBreadcrumbCheckboxCheckbox groupCoach MarkComboboxDropdown menuDropdown menu navFooterHeaderHeadingIconImage cardInput groupLayoutLinkLoading spinnerModalMultiselect dropdownPaginationPillPopoverProgress barRadio buttonRadio groupSelectSheetSidenavSliderSwitchTableTabsToastTooltipText inputTextareaToggle button groupOverviewAlias colorsGlobal colorsFont familyFont sizeFont weightLine heightElevationRadiusSpacingTransitionsType scaleType styles
Skip to main navigation
Pagination
Pagination allows users to move through a list or set of items that have been split into different pages.
Example

See live code examples in Storybook
Usage

Pagination splits content into smaller chunks across several pages, making it easier to consume.

Pagination only includes navigational elements for paging through the content and does not manipulate data or control the display of the content. It is used only to provide navigation and to indicate the current page and number of pages.

Best practices
Dos
  • To be used only for lists with more than 25 items
  • Place pagination below the set of items it paginates through, aligned to the right side of the content being displayed
  • When the first page is selected the "Previous" button is not displayed and, similarly, when the last page is selected the "Next" button is not displayed
Don'ts
  • Don't use pagination on a transactional service or a form
Variants Basic

Use the basic variant to navigate to different pages of large lists of items, and indicate which page you are currently viewing.

Jump to page

Use the jump-to-page variant when users need to navigate directly to a specific page in a long result set without stepping through every page.

Simple

Add the simple attribute to any variant for tighter layouts. It hides the "Previous"/"Next" text (icon-only, chevrons remain) and, when combined with the jump-to-page variant, also omits the first/last page buttons.

With the jump-to-page variant:

With the default variant:

Accessibility Relevant WCAG guidelines
  • 1.3.1 Info and Relationships A
Importance

Pagination allows users to navigate multiple pages that are grouped together.

Code expectations
  • Everything should be wrapped in the <nav> tag
  • <nav> should also have a role="navigation" to ensure that all assistive technologies will be given the information
  • You should add an aria-label that denotes this <nav> element as pagination
  • List elements should be given an aria-label that gives more information. This should include "previous/next" and the page number.
<nav role="navigation" aria-label="pagination navigation">
              <ul>
                <li>
                  <a href="/example-page" aria-label="Go to previous/next page 1">
                    1
                  </a>
                </li>
              </ul>
            </nav>
Expected actions Screen reader
  • Reads "Pagination navigation, go to (previous/next) page 1, list 1 of X, link"
Keyboard
  • Tab: goes to next pagination number
  • Shift + Tab: goes to the previous pagination number
  • Enter: goes to selected page