Pagination is used for displaying a limited number of results on search engine results pages. Pagination is used in some form in almost every web application to divide returned data and display it on multiple pages.

Pagination bar

simple pagination

  1. Active state: Use a filled button to indicate what page the user is on.
  2. Hover state: Use a hover state to show that the user can select another page.
  3. Truncate: When you have a large amount of pages within a pagination, truncate your numbers with the option to navigate further ahead.
  4. Arrow Icon Use arrow icons for the user to switch to the next page.

Use the default pagination when you need a simple pagination pattern for a page that will not change size.

Pagination includes several mechanisms to move between pages:

  • Left arrow:
    • Navigates backward one page
    • Disabled when the first page is selected
  • Numbers: redirects directly to a certain dataset chunk (page) calculated with the page size
  • Ellipsis:
    • Appears when the number of pages exceeds six
    • Displays a dropdown menu with the rest of the pages
    • It is always shown in a middle position
  • Right arrow:
    • Navigates forward one page
    • Disabled when the last page is selected

A pagination bar is pagination with the following features:

  • A page size selector placed on the left side of the bar
  • A label on the right side of the page size selector that displays the exact chunk of information displayed from the dataset
  • Classic pagination on the right side of the bar that adapts to the number of pages Use the pagination bar when you need a complex pagination pattern that requires changing the page size and re-calculating the number of pages.