Quick Answer
Pagination is a navigation pattern that divides a large result set into separate pages and gives users a controlled way to move between them.
Good pagination UI communicates three things at the same time:
- Where the user is now.
- How much content exists.
- Which destinations are available next.
Use pagination when people need to compare results, return to a known position, share a result page, or understand the scope of a collection. For a feed that people mainly consume in sequence, a “Load more” control or infinite scroll may be a better fit.
Pagination design is therefore not just a row of numbers. It is a position and navigation model for the result set.
When to Use Pagination
Pagination works best when the content has meaningful boundaries and users benefit from a stable location.
Strong candidates include:
- Search results that users inspect, refine, and revisit.
- Product listings where people compare items across a known set.
- Data tables in admin or business applications.
- Article archives and directories.
- Audit logs or records that need stable URLs.
The pattern becomes especially useful when a person might say, “The item was on page 4,” use the browser Back button, bookmark a page, or send the current view to someone else.
Pagination is usually unnecessary for a short list. If the complete set can load quickly and remain easy to scan, adding page controls only creates another navigation decision.
Pagination vs. Load More vs. Infinite Scroll
Choose the pattern based on the user’s task, not only on the number of records.
| Pattern | Best for | Main advantage | Main tradeoff |
|---|---|---|---|
| Pagination | Search, comparison, tables, stable archives | Clear position and direct navigation | Interrupts continuous browsing |
| Load more | Browsing a collection in one growing view | Simple continuation under user control | Returning to an exact position can be harder |
| Infinite scroll | Feeds consumed continuously and opportunistically | Low-friction ongoing discovery | Weak sense of scope and difficult restoration |
Pagination supports deliberate retrieval. Infinite scroll supports continuous consumption. “Load more” sits between them: it preserves a single list while making each additional request intentional.
Do not select infinite scroll merely because it feels modern. It can make the footer difficult to reach, hide the size of the collection, and make a previous position hard to recover after navigation.
What a Pagination UI Should Communicate
Current Position
The current page needs a distinct visual state and a programmatic state. A number that looks the same as every other link does not tell users where they are.
Use text near the list when more context is valuable:
Showing 21–30 of 96 results
This is often more informative than “Page 3 of 10” because it connects the navigation to the actual records.
Available Movement
Previous and Next controls make sequential movement easy. Page numbers allow direct movement. First and last pages can help users understand the scale of a large collection.
Do not show every page number in a very large set. Keep the current page and nearby destinations visible, preserve useful endpoints when appropriate, and replace undisplayed ranges with a non-interactive ellipsis.
Boundaries
On the first page, Previous should not perform an action. On the last page, Next should not perform an action. Remove the destination or expose the control as unavailable in a way that is both visually and programmatically clear.
Pagination Design Rules
1. Keep the Current Page Obvious
Use more than color alone. Combine a background, border, weight, shape, or current-page label with sufficient contrast.
Do not make the current page look like the primary destination. Its purpose is orientation, not persuasion.
2. Use Real, Stable Destinations
For web content, give pages stable URLs such as ?page=3. This supports refresh, bookmarking, browser history, sharing, and server-rendered discovery.
If filters or sorting affect the result set, preserve those parameters when the page changes. Reset to a valid page when a filter makes the previous page number impossible.
3. Put Controls Near the Results
Place pagination immediately after the list or table it controls. For long result sets, repeating a compact version above the results may help, but the two controls must stay synchronized.
When a user selects a new page, move focus or scroll position intentionally. Do not leave them at the bottom of a newly loaded page with no announcement or visible context.
4. Design for Narrow Screens
A desktop row such as “Previous 1 2 3 … 18 Next” may not fit on mobile. A compact pattern can show:
- Previous.
- “Page 3 of 18.”
- Next.
The information model stays the same even when fewer direct page links are visible.
5. Make Targets Easy to Activate
The clickable area should include padding around the number, not only the glyph itself. Provide enough size and spacing to avoid accidental activation, especially when several page links appear side by side.
WCAG 2.2 Success Criterion 2.5.8 sets a minimum target-size requirement of 24 by 24 CSS pixels, with specific exceptions. Larger targets are often more comfortable in touch interfaces.
6. Preserve the User’s Context
Changing pages should preserve filters, sort order, selected page size, and other state that defines the current result set. If the user opens an item and returns, restore the same page and position whenever practical.
Accessible Pagination
Use native links when selecting a page navigates to a new URL. Links provide expected browser behavior, including opening a destination in a new tab.
Wrap the set in a named navigation landmark:
<nav aria-label="Search results pages">
<a href="?page=2">Previous</a>
<a href="?page=1">1</a>
<a href="?page=2">2</a>
<a href="?page=3" aria-current="page">3</a>
<a href="?page=4">4</a>
<a href="?page=4">Next</a>
</nav>
Important requirements:
- Give the navigation region a useful accessible name.
- Use
aria-current="page"on the current page. - Give icon-only Previous and Next controls accessible names.
- Keep visible keyboard focus indicators.
- Ensure the reading and focus order matches the visual order.
- Treat an ellipsis as text, not as an unlabeled destination.
- Do not rely only on color to identify the current page.
Avoid adding redundant labels to every number unless testing shows they improve the experience. Link text “3” inside a clearly named pagination region, together with aria-current on the current destination, may already provide sufficient context.
Example: Search Results
Imagine a catalog with 96 results and 10 results per page.
A useful desktop presentation includes:
- “Showing 21–30 of 96 results” above the list.
- Previous, page 1, nearby pages, an ellipsis, page 10, and Next below it.
- Page 3 marked visually and with
aria-current="page". - URLs that retain the query, filters, sort order, and
page=3.
On mobile, the same catalog can use Previous, “3 of 10,” and Next. Direct access to every page is less important than preserving position and providing comfortable targets.
Implementation Checklist
Common Mistakes
Showing Numbers Without Scope
A row of page numbers does not tell users whether the collection contains 30 results or 30,000. Add a result count or displayed range when scope affects the task.
Making Only the Text Clickable
Small numeric glyphs are difficult to target. Apply the link to the padded control area.
Losing Filters on Page Change
If changing pages clears the user’s query or sort order, the navigation no longer refers to the same collection.
Treating the Ellipsis as a Page
An ellipsis communicates an omitted range. Do not make it a mysterious link unless activating it has a clearly explained behavior.
Hiding the Current State
Hover styles do not communicate the current page. Current, hover, focus, and disabled states have different meanings and need distinct treatments.
Related UIXHERO References
- Browse the UI Components hub for more component decision guides.
- Learn how active controls expose state in Toggle Button UI.
- See how complexity can be revealed in stages in Progressive Disclosure in UX.
External References
FAQ
What is pagination UI?
Pagination UI divides a result set into separate pages and provides controls for moving between them. It should communicate the current page, available destinations, and the scope of the collection.
When should pagination be used?
Use pagination when users need stable positions, direct page access, comparison, bookmarking, or reliable return paths. Search results, product listings, archives, and data tables are common examples.
Is pagination better than infinite scroll?
Neither pattern is always better. Pagination is stronger for retrieval, comparison, and position awareness. Infinite scroll is stronger for continuous feed consumption. “Load more” can provide a useful middle ground.
How should the current page be marked?
Give it a distinct visual treatment and use aria-current="page" so assistive technology can identify it as the current destination.
Should pagination use links or buttons?
Use links when each page has a navigable URL. Use buttons only when the interaction changes an application view without navigating, and then manage focus, history, loading state, and announcements carefully.