Loading pattern...

What is Pagination?

Pagination splits content across multiple pages with controls to navigate between them (Previous/Next, page numbers 1-2-3). It's the traditional way to handle large lists or datasets without overwhelming users with everything at once. Users can see how much content exists (50 pages), jump to specific pages, and maintain their position. Common in e-commerce, search results, and data tables.

When Should You Use This?

Use pagination for goal-oriented browsing where users want to find specific items (search results, e-commerce catalogs, data tables). It works well when users need to return to specific pages, compare items across pages, or when you want to show total results count. Avoid for casual browsing feeds where infinite scroll works better.

Common Mistakes to Avoid

  • Too many page numbers—show 5-7 at most, with ellipsis for the rest
  • No "show all" option—some users want to see everything at once
  • Losing scroll position on page change—remember where user was
  • Slow page loads—prefetch next/previous pages for instant navigation
  • Not mobile-friendly—pagination controls should be thumb-friendly on mobile

Real-World Examples

  • Google Search—numbered pagination with Previous/Next
  • Amazon product listings—pagination with jump-to controls
  • GitHub issues—numbered pages with filters preserved
  • Admin dashboards—data tables with rows-per-page selector

Category

Navigation Patterns

Tags

navigationpaginationlistdata-tableui-pattern

Permalink