Pagination
Pagination splits a long list into numbered pages, with links to move to the next, previous or any page.
- Also called
- pager
- Platforms
- Web
- In the gallery
- 50 web designs
Pagination from the Kombai gallery: a business directory's company list, a product forum's thread and a listening community's member grid.
What is a pagination?
Pagination is a row of page links under a long list of results, posts or rows. It shows how many pages there are and which one people are on, and lets them step forward, step back or jump straight to a page, without loading the whole list at once.
- Previous and Next sit at the ends, with page numbers between them.
- Long runs of pages collapse into an ellipsis around the current page.
Pagination controls show up across table, carousel, testimonials and blog index screens.
When to use a pagination
- Long lists people searchResults, directories and archives where people look for one item.
- A place to come back toPage 4 of the results stays page 4, so people can return to it.
- Big tablesAdmin lists with hundreds of rows and a rows-per-page setting.
When not to use one
- One page of contentIf everything fits on one page, don't show a pager at all.
- Steps in a formFor a sequence of questions, use a Continue button and a Back link.
- Casual browsing feedsFor feeds people skim, a Load more button keeps them in flow.
Anatomy of a pagination
This one works. Pick a page, or step with Previous and Next. Tab through the links and press Enter.
Showing 21 to 30 of 94 recipes
- Link
- Hover
- Keyboard focus
- Current page
- Previous and nextStep one page at a time
- Page linkJump straight to a page
- Current pageMarked with aria-current
- EllipsisStands for skipped pages
- Result countWhich items are showing
- StatesLink, hover, focus, current
Pagination variants
We sorted every pagination design in the Kombai gallery and found four patterns. Browse all 50 web designs.
1. Numbers with a gap
The default. First pages, an ellipsis and the last page, with the current page filled in.
2. Boxed page numbers
Each number sits in its own outlined box, sometimes with First and Last links at the ends.
3. Table footers
A row count, a small pager and a rows-per-page select along the bottom of a table.
4. Previous, next and a counter
No row of numbers, just arrows or Previous and Next around a counter like 4 of 11.
Where pagination controls show up
Admin tables
Contracts, documents and users split into pages, with the count of rows beside the pager.
Onboarding and carousels
A row of dots shows which card or slide is showing in a short set.
Pagination vs similar components
Build notes
- Wrap the pager in a <nav> element with aria-label="Pagination".
- Make every page a link with a real URL, so people can share and return to it.
- Set aria-current="page" on the current page link.
- Don't show Previous on the first page or Next on the last.
- Show the first, last and neighboring pages, and an ellipsis for the gaps.
- On small screens, show fewer numbers: the current page, its neighbors and the ends.
FAQ
Pagination, infinite scroll or Load more?
Use pagination when people search for something specific or need to come back to a place in the list. A Load more button suits feeds people browse. The GOV.UK Design System advises against infinite scroll, because it causes problems for keyboard users.
How many page numbers should I show?
Enough to fit the space. The GOV.UK Design System shows the first and last pages, the current page and at least one page on each side of it on large screens, with an ellipsis for the gaps, like 1 … 97 98 99 100.
Should page numbers be links or buttons?
Links. Each page has its own address, so the back button works, people can bookmark page 3 and search engines can follow the pages.
Should pagination show a result count?
It helps. A line like Showing 21 to 30 of 94 tells people how big the list is and where they are in it, which page numbers alone do not.
Related terms
All glossary terms · Browse 50 web pagination designs