Pagination breaks up content or data into multiple pages and gives users easier ways to navigate throughout.


Default pagination

See the Pen Pagination by USANA UX (@usana_ux) on CodePen.


As related content is divided or large data sets are relayed in smaller parts, pagination is recommended to make information easier to find and use.


  1. Previous & Next: From the selected page, you can move backward and forward.
  2. Current page: The current page on which the user is.
  3. Page navigation: Select a page number to navigate to it.
  4. Truncation (optional): Ellipses are used to truncate pages when the maximum display limit is exceeded.



These specifications enable designers and developers to create pagination that are pixel-perfect.


  • Users can navigate with a keyboard and trigger the chevron icons and page numbers using the ENTER or SPACE keys.
  • The pagination is clearly identified by the screen reader technology.
  • Page numbers are correctly identified and interpreted by the screen reader.
  • Current page numbers include the aria-current attribute.
  • Chevron icons are correctly identified by the screen reader.
  • When users are unlikely to need to see all the content.
  • When the first page is enough to make a decision.
  • When loading all the content at once would not be possible technically.
  • When keeping your place is important or you want to bookmark a specific page
  • When there's lot of screen real estate.
  • Place pagination above search results.
  • Show all available pages.
  • Use lazy load or infinite scroll.
  • Switch between slides or content in a carousel displaying editorial content.