Pagination design is the practice of splitting a long list of items — blog posts, search results, product listings — across multiple pages with controls to move between them. In 2026, the conversation is not pagination versus nothing; it is pagination versus infinite scroll versus the “load more” button, and which pattern fits which use case.
Why Pagination Still Matters
Infinite scroll became fashionable in the social media era because it suited timelines built for endless consumption. The web at large has different jobs. Visitors searching for a specific product, scanning a blog archive, or comparing options need to know where they are in a list, how big the list is, and how to get back to a result they saw earlier. Pagination answers all three questions; infinite scroll often answers none.
The trade-offs are concrete. Pagination is faster to load, easier to bookmark, kinder to SEO, more accessible, and gives the visitor a sense of progress. Infinite scroll is smoother on mobile, increases time-on-page, and removes the cognitive cost of clicking. The right pattern depends on the content and the goal.
The Three Main Patterns
Classic Numbered Pagination
Page numbers at the bottom of the list, with previous and next arrows. The current page is highlighted. Sometimes the first and last page are pinned visible with ellipses representing the skipped pages: 1 … 5 6 7 … 20. This is the most informative pattern — visitors know exactly where they are and how big the list is.
Load More
A single button at the bottom of the list. Clicking it appends the next set of items without a page reload. URL can update to reflect the loaded count, or it can stay static. This pattern keeps the smoothness of infinite scroll while giving the visitor an explicit pause point, which is important for the footer to be reachable.
Infinite Scroll
New items load automatically as the visitor scrolls toward the bottom. Best for timeline-style content (social feeds, image galleries) where the items are visually similar and exploration is the goal. Worst for any list where the visitor needs to compare, return to a result, or feel a sense of completion.
When to Use Each Pattern
The choice is not a matter of taste. It is determined by what the visitor is trying to do.
Use Pagination When
- Visitors are searching for a specific item (product listings, search results).
- Visitors compare items across the list before committing.
- The list has a known, finite size that matters (job listings, archive pages).
- SEO matters — search engines crawl paginated lists more reliably.
- The footer contains important navigation or trust signals.
Use Load More When
- Content is best consumed in flow but the footer still matters.
- The list is long but bounded (blog archives, gallery pages).
- You want the smoothness of infinite scroll without the SEO and footer problems.
- Mobile experience is the priority but you do not want to lose the footer.
Use Infinite Scroll When
- The content is timeline-style and exploration is the goal.
- There is no meaningful “bottom” — social feeds, news feeds.
- The visitor is unlikely to need to return to a specific item via URL.
- You have alternative navigation for important off-feed actions.
Designing Numbered Pagination That Works
The Anatomy
Previous arrow, first page, an ellipsis or full range, the current page (visually distinct), more page numbers, an ellipsis, the last page, next arrow. The current page should never be a link to itself. Disabled previous and next arrows on the first and last page give a clear signal of position.
How Many Pages to Show
Show 5-7 page numbers at once. Always include the first and last page. The current page sits in the middle of the visible range. This gives the visitor a sense of total scale without overwhelming the control with 50+ numbers.
Page Size
The number of items per page should match the visual density. A grid of cards typically shows 12-24 per page. A list of articles 10-20. A search result page often 10. Too few items per page wastes the visitor’s clicks; too many slows the page load and pushes the pagination control off-screen.
URL Structure
Pages should have clean URLs: /blog/page/2, /products?page=3. The URL must change on every page change so visitors can bookmark and share specific pages. Using JavaScript to fetch the next page without changing the URL is a common mistake that breaks the back button and breaks SEO.
Designing a Good “Load More” Button
Make It Obvious
The button must be clearly a button — high-contrast background, clear text, sized for comfortable tapping on mobile. Center it. Pad above and below so it does not blend into the list above.
Show Progress
Display “Showing 24 of 156” near the button. The visitor knows where they are and how much remains. This is the load-more equivalent of pagination’s page numbers.
Update the URL
As content loads, push the URL state forward so a refresh restores the visitor to the same position. /blog?loaded=72 or /blog/page/4 (whichever convention your routing supports). Without this, refresh feels like punishment.
Loading States
Replace the button text with a spinner during the fetch. If the fetch fails, restore the button with an error message and a retry option. Silent failure is the most common failure mode and the easiest to avoid.
Accessibility Considerations
Keyboard Navigation
Every pagination control must be reachable and operable by keyboard. Tab order should flow from the list into the pagination, with arrow buttons and numbered links each receiving focus. The current page should be marked aria-current=”page”.
Screen Reader Announcements
When new content loads (load more, infinite scroll), use a live region (aria-live=”polite”) to announce “12 more items loaded” so screen reader users know the page changed. Without this, the visit feels broken.
Focus Management
After paginating, move keyboard focus to the start of the new content, not back to the top of the page. This matches the visitor’s mental model — they wanted the next batch of items.
Infinite Scroll Is Hostile to Accessibility
Infinite scroll without an opt-out is one of the worst patterns for keyboard and screen reader users. The footer becomes unreachable. Focus management becomes unpredictable. The visitor cannot scrub to a known position. For these reasons, always pair infinite scroll with an explicit alternative — a “view all” link or numbered pagination — for users who need it. The broader picture is in our website accessibility guide.
SEO and Pagination
Google deprecated the rel=”prev” and rel=”next” tags in 2019, but pagination still has SEO implications.
Canonical Tags
Each paginated page should self-canonicalize. Page 2 of a blog archive canonicalizes to its own URL, not to page 1. Trying to consolidate ranking signals to page 1 with canonicals is an old mistake that hides content from search.
Crawl Depth
If important products live on page 7, the crawler may not get there efficiently. Counteract this with category pages, sitemaps, and internal links. For deep dives, see our internal linking guide.
Infinite Scroll and SEO
Pure infinite scroll often hides content from search engines because the bot does not scroll. Solutions: progressively enhanced pagination URLs, server-side rendered pages with infinite-scroll layered on top, or fallback “view all” pages. For more, see our JavaScript SEO guide.
Performance Notes
Above-the-fold First
Whatever pattern you choose, the first page-load should ship only the items needed above the fold. Lazy-load images below. For images, our lazy loading guide covers the patterns.
Virtual Scrolling
For very long lists in single-page apps (10,000+ items), virtual scrolling renders only the visible items and recycles DOM nodes as the visitor scrolls. This is a developer-level technique but worth knowing about when ordinary patterns chug.
Pre-fetch the Next Page
On numbered pagination, pre-fetching the next page in the background makes the next click feel instant. Modern frameworks do this automatically with link prefetching.
Design Anti-Patterns to Avoid
- Pagination controls that hide on mobile, leaving the visitor stranded on page 1.
- Tiny click targets — page numbers under 40 pixels are unfriendly on touch.
- Pagination that requires a full page reload in a single-page app.
- Showing only “next” without “previous” or page numbers, removing the ability to back up.
- Resetting the visitor’s filters or sort order when they paginate.
- Infinite scroll without a footer alternative.
- “Load more” buttons that move position after click, forcing the visitor to hunt for them.
Mobile Pagination
On phones, vertical space is the most valuable resource. The standard treatment is fewer visible page numbers (3-5 instead of 7), larger tap targets (44px minimum), and previous/next arrows that take priority over numbers. On very long mobile lists, “load more” often wins over numbered pagination because tapping a small number is harder than tapping a wide button.
Frequently Asked Questions
Is pagination or infinite scroll better for SEO?
Pagination is generally better for SEO because each page has a unique, indexable URL. Infinite scroll often hides content from search engines unless paired with progressive enhancement. If SEO matters, pagination or hybrid load-more is the safer choice.
How many items per page is best?
It depends on item size and intent. Card grids work well at 12-24 per page. Article lists at 10-20. Search results often at 10. The right answer is the one that keeps the pagination control reachable without scrolling more than two screens.
Should I use infinite scroll on an e-commerce site?
Usually no. Visitors comparing products need to find their place again, share specific results, and reach the footer for trust signals and policies. Numbered pagination or load-more is almost always the better fit on commerce.
How do I make pagination accessible?
Use a nav element with aria-label, mark the current page with aria-current=”page”, ensure keyboard tab order is sensible, and move focus to the new content after pagination. For infinite scroll, always provide a visible alternative for users who need pagination.
If you want a Framer or WordPress site with pagination, search, and navigation built around real visitor needs, see our pricing or get in touch.