Pagination
A navigation pattern for dividing large datasets into discrete numbered pages.
Plain English
Pagination splits a long list of items into pages so the user is not overwhelmed. The tradeoff vs. infinite scroll: pagination lets users see how much content exists, jump to a specific page, and return to exactly where they were. Infinite scroll is better for exploratory browsing (social feeds, discovery). Pagination is better for task-based browsing where users need context ("I was on page 4").
Technical
Key elements: Previous/Next buttons (always present, disabled at boundaries), current page indicator, page number buttons (show 5-7 numbers, with ellipsis for gaps), optional "Go to page" input. Accessibility: <nav aria-label="Pagination"> with <a> elements (not buttons — these are navigation to new URLs), aria-current="page" on active page, aria-label on Prev/Next ("Previous page", "Next page"). For client-side pagination, use buttons and manage state in JavaScript.
Live Demo
Page 3 of 12
Show max 7 page numbers. Use ellipsis (...) to indicate gaps. Always show first and last pages.
Usage
✓ Good usage
A pagination bar with disabled Prev, pages 1-5 shown, ellipsis, page 20, and Next — users know there are 20 pages and can jump directly.
✗ Bad usage
Only Previous / Next buttons with no page numbers — users have no sense of how much content exists or where they are.
Recommended values
- Show up to 7 page numbers (1 … 4 5 6 … 20 pattern)
- Min-height: 40px per page button (tap target)
- Current page: filled accent background, white text
- Disabled Prev/Next: opacity: 0.4, pointer-events: none
- Include items-per-page selector for data-dense tables
Common mistakes
- No visual difference between current page and others — users lose their place.
- Showing all 500 page numbers — show a windowed set with ellipsis.
- Touch targets below 40px — pagination is frequently used on mobile.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Pagination: show current page ± 2 with ellipsis at edges. Active page: filled accent background. All buttons 40px min-height. Disabled Prev/Next at 40% opacity. aria-label="Pagination" on nav, aria-current="page" on active. Include items-per-page dropdown (10/25/50) beside pagination.