--- title: "Pagination UI: anatomy, variants and examples | Kombai" description: "Pagination splits a long list into numbered pages, with links to move to the next, previous or any page." canonical_url: https://kombai.com/glossary/pagination/ author: "The Kombai Team" --- # 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 Kombai gallery: [50 web designs](https://kombai.com/gallery/web/pagination/) - [Sightpost](https://kombai.com/gallery/inspirations/pagination-web-12/) (Web) - [Millpond Community](https://kombai.com/gallery/inspirations/pagination-web-25/) (Web) - [Longroom](https://kombai.com/gallery/inspirations/pagination-web-26/) (Web) ## 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. ## When to use pagination - **Long lists people search.** Results, directories and archives where people look for one item. - **A place to come back to.** Page 4 of the results stays page 4, so people can return to it. - **Big tables.** Admin lists with hundreds of rows and a rows-per-page setting. ## When not to use one - **One page of content.** If everything fits on one page, don't show a pager at all. - **Steps in a form.** For a sequence of questions, use a Continue button and a Back link. - **Casual browsing feeds.** For feeds people skim, a Load more button keeps them in flow. ## Anatomy 1. **Previous and next**: Step one page at a time 2. **Page link**: Jump straight to a page 3. **Current page**: Marked with aria-current 4. **Ellipsis**: Stands for skipped pages 5. **Result count**: Which items are showing 6. **States**: Link, hover, focus, current ## Variants We sorted every pagination design in the Kombai gallery and found four patterns. ### 1. Numbers with a gap The default. First pages, an ellipsis and the last page, with the current page filled in. - [Gridhaus](https://kombai.com/gallery/inspirations/pagination-web-21/) (Web) - [Tarnwick](https://kombai.com/gallery/inspirations/pagination-web-42/) (Web) - [Brightmoss Support](https://kombai.com/gallery/inspirations/pagination-web-6/) (Web) ### 2. Boxed page numbers Each number sits in its own outlined box, sometimes with First and Last links at the ends. - [Hachure Instruments](https://kombai.com/gallery/inspirations/pagination-web-11/) (Web) - [Umberloom](https://kombai.com/gallery/inspirations/pagination-web-43/) (Web) - [Sablewing](https://kombai.com/gallery/inspirations/pagination-web-29/) (Web) ### 3. Table footers A row count, a small pager and a rows-per-page select along the bottom of a table. - [Kedgeline](https://kombai.com/gallery/inspirations/pagination-web-16/) (Web) - [Roster](https://kombai.com/gallery/inspirations/pagination-web-24/) (Web) - [Ridgeflow](https://kombai.com/gallery/inspirations/pagination-web-30/) (Web) ### 4. Previous, next and a counter No row of numbers, just arrows or Previous and Next around a counter like 4 of 11. - [Havorlin](https://kombai.com/gallery/inspirations/pagination-web-36/) (Web) - [Kilnframe](https://kombai.com/gallery/inspirations/pagination-web-50/) (Web) - [Ellisfield Press](https://kombai.com/gallery/inspirations/pagination-web-20/) (Web) ## Where pagination controls show up ### Admin tables Contracts, documents and users split into pages, with the count of rows beside the pager. - [Sillimane Console](https://kombai.com/gallery/inspirations/pagination-web-9/) (Web) - [Larknest](https://kombai.com/gallery/inspirations/pagination-web-48/) (Web) - [Ionvale](https://kombai.com/gallery/inspirations/pagination-web-49/) (Web) ### Onboarding and carousels A row of dots shows which card or slide is showing in a short set. - [Rimfjell](https://kombai.com/gallery/inspirations/pagination-web-1/) (Web) - [Quorral](https://kombai.com/gallery/inspirations/pagination-web-47/) (Web) - [Loessa](https://kombai.com/gallery/inspirations/pagination-web-10/) (Web) ## Pagination vs similar components | | [Pagination](https://kombai.com/glossary/pagination/) | [Carousel](https://kombai.com/glossary/carousel/) | [Tabs](https://kombai.com/glossary/tabs/) | |---|---|---|---| | Moves through | Pages of a long list | Slides of a short set | Views of one thing | | Shows | Page numbers and a count | Arrows and dots | A label per view | | Best for | Results, archives, tables | Galleries and featured items | Switching panels | ## Build notes - Wrap the pager in a