Navigation
Pagination
Pagination is splitting a long list into fixed-size chunks across several pages, with numbered links and Previous/Next buttons for moving between them.
Definition
Pagination is a way to avoid dumping an enormous list on screen all at once. Instead, you slice it into fixed-size chunks, spread them across several pages, and let people move between those pages. You'll usually see numbered links like 1, 2, 3 sitting below the list, along with "Previous" and "Next" buttons, so a reader can jump straight to a section or step through one page at a time. The page you're currently on is highlighted, which means people always know roughly where they are within the whole set. It works just like page numbers in a book, so almost anyone grasps it instantly without a single word of explanation. You'll run into it constantly on search results, message boards, and long data tables.
Why does it matter?
Unlike infinite scroll, which keeps flowing endlessly downward, pagination gives people a clear sense of position — "page 3 of 12." That sense of place matters more than it sounds. You can gauge the total size, so you know roughly when things will end, and if you spot something you like, you can remember "that was on page 3" and return to the exact same spot later. When the page number lives in the URL, that link is easy to bookmark or share with someone else. With infinite scroll, an item you've already scrolled past is painfully hard to find again, and the lack of any visible end wears people down. Pagination also loads only as much as each page needs, so the screen never grows heavy, and it suits situations — like comparing search results — where people hop between sections while exploring.
Common mistakes
- Not highlighting the current page strongly enough. When the page you're on looks just like every other number, people lose track of where they are, so they click the same page again or wander off to the wrong one.
- Listing every single number when there are dozens or hundreds of pages. When numbers fill the whole screen, the ones that actually matter — Previous, Next, and the pages around your current spot — get buried, which makes navigating more of a chore and scatters attention.
- Choosing a poor number of items per page. Too few and people have to keep flipping forward, which feels tedious; too many and splitting into pages loses its point as the screen stretches out. Find a sensible amount that fits the content.
Practical tips
- When there are a great many pages, show only the first, the last, and a few around the current one, then collapse the rest into an ellipsis. That way people can still jump anywhere in one move while the row of numbers stays tidy instead of cluttering the screen.
- Mark the current page clearly with color or weight, and keep the Previous and Next buttons anchored in the same spot every time. When their position stays fixed, people don't have to hunt for the buttons on each new page and can move quickly out of habit.
- Dim the Previous button on the first page and the Next button on the last one so they can't be clicked. Signaling that there's nowhere further to go stops people from uselessly tapping a button that does nothing.
Ask your AI
In the pagination code I'll paste below, fix the part that renders every single number. Show only the first and last page plus 1-2 numbers on each side of the current page, and collapse the rest of each gap into an ellipsis (…). Make the current page stand out clearly from the other numbers with a background color or heavier weight, and set the "Previous" button to aria-disabled on the first page and "Next" on the last so they're dimmed and unclickable. Return the updated code plus render examples for total-page counts of 5, 50, and 500.
Design a pagination from scratch for [list type — e.g. text-heavy forum posts]. Recommend an items-per-page count that fits the content (roughly 10-25 for low-density lists, 12-24 for card or image grids) and explain why. Place numbered links plus Previous/Next buttons below the list, keeping Previous/Next anchored in the exact same spot as pages change so users never have to hunt for them. Highlight the current page with color and weight, and build in the collapsing structure up front — first, last, and the pages around the current one visible, the rest folded into an ellipsis (…) — so it stays tidy once there are many pages.
The pagination I'll paste below keeps the same URL when you flip pages, so sharing a link, bookmarking, or refreshing to restore the same page all break. Reflect the current page number in the URL as a ?page=N query parameter, and on first load read that value and show exactly that page. If page is missing or falls outside the total page range, fall back safely to page 1. Sync it with browser history so the Back button also returns to the previous page.