Pagination

Allows users to navigate to next or previous page when content is split into several pages

Live code examples for CdrPagination can be found on CodeSandbox.

Pagination @ SM, MD, LG

At the SM, MD, and LG breakpoints, pagination displays as a list of number text links with Prev and Next links when applicable.

Image showing full-sized pagination component

Pagination @ XS

At the XS breakpoint, pagination adapts to a Select component using the native UI dropdown menu.

Image showing responsive pagination component using Select element

Degraded Pagination

For use when only prev and next data is available.

Image showing pagination with only previous and next data available

Accessibility

To ensure that usage of this component complies with accessibility guidelines:

  • Wrap the pagination links in a <nav> element to let screen readers recognize the pagination controls
  • Inlcude role=navigation if the pagination component is not wrapped in a <nav>
  • Add aria-label="pagination" to describe the type of navigation
  • Indicate the active page by adding aria-current="page" to the link that points to the current page
  • View these videos at a11ymattters, Accessible Pagination. They demonstrate before and after pagination tests using a screen reader voiceover

This component has compliance WCAG guidelines by:

  • WCAG 2.4.8: Information about the user's location within a set of Web pages is available
  • WCAG 3.2.3: Navigation patterns follow a consistent pattern. Only position pagination component at the bottom of the page
  • WCAG 2.4.3: Focus state receives focus in an order that preserves meaning
  • WCAG 2.4.7: Focus is visible
  • WCAG 2.5.5: Target size for pagination links are large enough for users to easily activate them