Pagination

A component used to split large collections over multiple pages. Navigation controls allow the user to move between or jump to specific pages.

Use pagination to:

  • Display large collections of search results, products, or data
  • Break content into digestible chunks that improve page performance
  • Allow users to navigate through sequential content
  • Provide control over how many items are displayed per page

Do not use pagination:

  • For small collections (fewer than 20-30 items) — display all items on one page instead
  • When infinite scroll would be more appropriate
  • For content that should be viewed as a continuous whole
  • When filtering or searching, it would be better to help users find what they need

Pagination vs infinite scroll

Use pagination for

Use infinite scroll for

Goal-oriented browsing (users looking for specific items)

Exploratory browsing (casual content discovery)

Data tables, search results, product catalogues

Social feeds, image galleries, news streams

When users need to return to specific items

When engagement and continuous browsing are priorities

When footer content needs to be accessible

When no footer exists

Placement

Pagination should be placed in proximity to the collection it is controlling. This is usually located below the content.