composite pattern · Menus and navigation
Pagination
A row of numbered links or buttons that lets users move between pages of a list, search result, or gallery without loading everything at once.
Decisive boundary
Pagination divides a single long list into pages. Do not confuse it with a step indicator for a multi-step process.
Definition and intent
What is a Pagination UI pattern?
Use the behavior, not the silhouette
A row of numbered links or buttons that lets users move between pages of a list, search result, or gallery without loading everything at once. The term is used here as a composite pattern made from multiple controls or regions that must work together. That distinction prevents a visual resemblance from silently deciding focus, keyboard, modality, or dismissal behavior.
Let users navigate a large collection one page at a time without overwhelming the viewport. A good implementation preserves that job while making the trigger, open state, close path, and responsive behavior observable to users.
Know when the label is wrong
The fastest way to identify a pattern is often to reject the nearest alternative. For Pagination, the boundary is: Pagination divides a single long list into pages. Do not confuse it with a step indicator for a multi-step process.
Do not implement it as Breadcrumbs for site hierarchy, and Infinite Scroll for content exploration that favors discovery over precision. If those requirements describe the real task better, use the related pattern page or the full Menus and navigation comparison before writing code.
Decision process
Decide before choosing a component
Record these requirements in plain language. A library component name is not a substitute for the contract.
Confirm the user job
Let users navigate a large collection one page at a time without overwhelming the viewport.
Define opening and closing
Always visible below or above a paginated list; links are always present. Not applicable; pagination links are persistent navigation, not a dismissible surface.
Specify access behavior
Each page link is an anchor in normal document order; focus may be managed to keep the current page near the viewport. Every page link is keyboard operable; no custom key model beyond normal link behavior.
Reject the near miss
Breadcrumbs for site hierarchy, and Infinite Scroll for content exploration that favors discovery over precision.
Behavior contract
What must survive the build
- trigger
- Always visible below or above a paginated list; links are always present.
- dismissal
- Not applicable; pagination links are persistent navigation, not a dismissible surface.
- modality
- Non-modal inline navigation.
- focus
- Each page link is an anchor in normal document order; focus may be managed to keep the current page near the viewport.
- keyboard
- Every page link is keyboard operable; no custom key model beyond normal link behavior.
- interactive
- Contains numbered links, previous, next, first, and last navigation.
- persistence
- Persists while browsing the paginated content.
- placement
- Below or above the content list.
- mobile
- May show a reduced set of visible page numbers or use a simpler previous-and-next layout.
Failure modes
Common wrong builds
- Using non-link page markers.
- Hiding the total page count when it helps users.
- Making page numbers too small to tap on mobile.
- Failing to announce the current page with aria-current.
Observable checks
Verify the result
- The current page is visually and programmatically indicated.
- Each page number is a reachable link.
- Previous and Next links are present.
- Mobile targets are at least 44px.
- Focus order follows visible page order.
Coding-agent handoff
Implementation brief template
Pattern: Pagination Purpose: Let users navigate a large collection one page at a time without overwhelming the viewport. Trigger: Always visible below or above a paginated list; links are always present. Dismissal behavior: Not applicable; pagination links are persistent navigation, not a dismissible surface. Modality: Non-modal inline navigation. Focus behavior: Each page link is an anchor in normal document order; focus may be managed to keep the current page near the viewport. Keyboard behavior: Every page link is keyboard operable; no custom key model beyond normal link behavior. Interactive content: Contains numbered links, previous, next, first, and last navigation. Placement: Below or above the content list. Mobile behavior: May show a reduced set of visible page numbers or use a simpler previous-and-next layout. Do not implement as: Breadcrumbs for site hierarchy, and Infinite Scroll for content exploration that favors discovery over precision. Acceptance checks: - The current page is visually and programmatically indicated. - Each page number is a reachable link. - Previous and Next links are present. - Mobile targets are at least 44px. - Focus order follows visible page order.
Claim-level references
Sources, not a confidence score
Frequently asked questions
Pagination UI pattern questions
Direct answers based on the reviewed behavior contract above.
What is a Pagination in web UI?
A row of numbered links or buttons that lets users move between pages of a list, search result, or gallery without loading everything at once. In this reference set it is a composite pattern made from multiple controls or regions that must work together.
When should I use a Pagination?
Let users navigate a large collection one page at a time without overwhelming the viewport. The decisive boundary to confirm is this: Pagination divides a single long list into pages. Do not confuse it with a step indicator for a multi-step process.
What keyboard and focus behavior does a Pagination need?
Every page link is keyboard operable; no custom key model beyond normal link behavior. Each page link is an anchor in normal document order; focus may be managed to keep the current page near the viewport. These statements describe the reviewed expectation, but the final implementation still needs testing in the component library and browser you ship.
How should a Pagination behave on mobile?
May show a reduced set of visible page numbers or use a simpler previous-and-next layout. Its modality is a separate requirement: Non-modal inline navigation.
How do I verify a Pagination implementation?
Start with observable checks: The current page is visually and programmatically indicated. Each page number is a reachable link. Previous and Next links are present. Then verify the remaining checks and compare the result with the linked source guidance.