Components

Pagination

Overview

Overview

When to use

Use pagination to separate large lists of content, such as search results, into smaller lists that are easier to interact with. Showing content on several pages prevents your content from becoming too long and overwhelming.

Consider using pagination when a listing exceeds 20 results.

When not to use

Do not use pagination component for linear journeys – for example, showing progress in multi-page forms.

Principles

Add the pagination component after the content on each page that you're paginating.

Show an appropriate number of pages to fit the horizontal space available.

For large and medium screens, show page numbers for:

• the current page
• at least two pages immediately before and after the current page
• first and last pages

For smaller screens, show page numbers for:

• the current page
• first and last pages

Do not show the previous page link on the first page and do not show the next page link on the last page.

Do not show pagination if there's only one page of content.

Usage

Usage guidliness

Previous and next

Do not show the previous page link on the first page and the next page link on the last page.

Do

Don't

Truncation

Use truncation when the page numbers do not fit in the available space. Avoid multiple rows of page numbers.

Do

Don't

Single page

Do not show pagination if there’s only one page of content.

Don't

Accessibility

Keyboard

Every page number and the previous and next controls are links: Tab moves through them in order and Enter follows one. There is no script.

Screen readers

The pagination is a nav landmark named by ariaLabel ("Pagination"). Page numbers are links in a list, each named "Page N" through aria-label, and the current page carries aria-current="page". The "…" gaps are aria-hidden="true". The previous and next links are named by previousLabel and nextLabel ("Previous page", "Next page") and use rel="prev" / rel="next". Their arrow icons are aria-hidden="true". They need an aria-label because their visible text is hidden on small screens.

Using the example

• Pass an Estonian ariaLabel, previousLabel and nextLabel on Estonian pages, for example "Lehekülgede navigeerimine", "Eelmine leht" and "Järgmine leht".
• Use href with a {page} placeholder so every page number is a real, bookmarkable URL.
• After the user moves to another page, move focus to the start of the new results or to the results heading, especially if the list is updated without a full page load.

Known limits

• The page link names ("Page N") and the visible previous/next text ("Previous", "Next") are hard-coded in English. Change them in Estonian copies.
• An aria-label must contain the visible text (WCAG 2.5.3). If you translate previousLabel and nextLabel, translate the visible text as well, so that, for example, "Eelmine leht" still contains "Eelmine".