CSS Components / Pagination


This component has been deprecated

See the Pagination component in Garden's @zendeskgarden/react-pagination package for the latest updates.

The pagination component provides styling for a multi-page control used to navigate long content lists such as data tables or search results.

Page Anchors

The pagination component supports using anchor tags within page elements.

Page State

Use the .is-* modifier classes to manage page state. Note this component removes default :focus styling. In order to retain accessibility, use JS to apply .is-focused on keyboard (not mouse) focus. By default, hovered styling will be applied on :hover.

Accessible Markup

Use the following semantic HTML to make the pagination component keyboard and screen reader accessible. ARIA attributes are used to apply the expected page state styling.

Layout Rules

  1. Display a maximum of 9 pages.
  2. Use .c-pagination__page--gap when there are more than 9 pages.
  3. The first and last page numbers should always be displayed.
  4. Gap indicators should always be positioned either following the first or preceding the last page.
  5. Center current page selection when both gap indicators are displayed.
  6. Hide .c-pagination__page--previous navigation when the first page is current.
  7. Hide .c-pagination__page--next navigation when the last page is current.