Pagination

The problem it solves

A long list of results, such as products, articles or records, cannot be shown at once without becoming slow to load and hard to scan. Pagination splits the list into pages of a fixed size and gives people controls to move between them. Each page has its own address, so people can come back to the same place, share it, and see how far through the list they are.

When to use it

• People look for a specific item or compare items, and need to return to a known position in the list.
• The list is ordered in a way people understand, such as by price, date or relevance.
• Pages need stable addresses, for sharing or for search engines.

When not to use it

• Do not paginate a feed people browse without a goal, such as social updates. Loading more as they scroll fits that better.
• Do not paginate short lists. If all the results fit in a reasonable page, show them.
• Do not hide the total. People use the number of results to judge whether to refine their search.

How to build it

The controls

Show previous and next links, the current page, the first and last pages, and a few pages either side of the current one, with an ellipsis for the gaps. Make the current page visually distinct and not a link. Keep the controls in the same place on every page, at the bottom of the list, and repeat them at the top on long pages.

Page size and state

Pick a page size that fits the content, and let people change it when they work through many results. Keep filters and sort order when moving between pages, and put the page number in the URL so the back button returns people to the page they left.

Accessibility

• Wrap the controls in a nav element with an accessible name such as "Pagination".
• Mark the current page with aria-current="page".
• Give icon-only previous and next controls a text label, and make each target large enough to tap.

Load more

A "Load more" button is a middle ground: it keeps people on one page while letting them ask for the next set. Keep the position in the URL so a refresh does not lose it.