Overview
A pagination splits a long list into pages and lets people go to a page by its number or to the previous and next ones. The pages are links with destinations, so the browser handles history and focus; the current page is marked and is not a link. Which numbers to show (all of them, a window around the current one, an ellipsis) is the application’s decision: the component renders the list it is given.
This page applies to every platform. Where a platform differs, the difference sits under a sub-heading named after it (Web, iOS, Android, Desktop); everything else holds everywhere.
When to use
- Lists of results too long for one page: search results, orders, logs.
- Any list where people need to reach a far page directly, or to come back to a page later.
When not to use
- Infinite scrolling or “Load more” fits better when people read through a feed; it is another pattern.
- A few pages of a flat sequence (an onboarding): a step indicator or a page control.
Sizes
| Size | Use for |
|---|---|
| Small | Under dense tables: 32 px links with 14 px text. |
| Medium | The default: 40 px links with 16 px text. |
States
States belong to the items.
| State | How it happens | What changes |
|---|---|---|
| Default | A page link. | Text on a transparent background. |
| Hover | A pointer rests over a link. Needs a pointing device: there is no hover on touch. | The subtle neutral tint. |
| Active | Pressed down. | The next tint. |
| Focus visible | Keyboard focus on a link. | The shared focus ring appears around it. Pointer focus shows no ring. |
| Current | The page’s current property. |
Filled with the accent neutral color, not a link, exposed as current. |
| Disabled | Previous or next without a destination. | Dimmed, not focusable, exposed as disabled. |
Content
- Page labels are the numbers; an ellipsis stands for skipped pages and is not a link.
- Previous and Next are written out next to their chevrons.
Accessibility
The Specification tab lists the full accessibility contract. Each statement there links the source it comes from. This section explains the decisions behind it.
- A labelled landmark of links. Screen reader users move between landmarks and lists of links; the pagination is a navigation landmark named Pagination, distinct from the main navigation, holding a list (WCAG 1.3.1 Info and Relationships, WCAG 4.1.2 Name, Role, Value, WAI-ARIA: navigation role, APG: navigation landmark, WCAG 2.4.1 Bypass Blocks).
- Links, not buttons. A page has a destination; a link gives history, focus and announcements without script. The current page is marked current and is not a link; a previous or next without destination is exposed as a disabled link (WAI-ARIA: aria-current, WAI-ARIA: aria-disabled, WCAG 1.4.1 Use of Color).
- Link purpose and consistency. A number is clear in the context of the landmark, and the pagination sits in the same place on every page (WCAG 2.4.4 Link Purpose (In Context), WCAG 3.2.3 Consistent Navigation).
- Contrast, focus and target. Links are text; chevrons are hidden decoration backed by the words; keyboard focus shows the ring; links are at least 32 px square (WCAG 1.4.3 Contrast (Minimum), WCAG 1.4.11 Non-text Contrast, WCAG 1.1.1 Non-text Content, WCAG 2.4.7 Focus Visible, WCAG 2.4.13 Focus Appearance, WCAG 2.1.1 Keyboard, WCAG 2.5.8 Target Size (Minimum), WCAG 2.3.3 Animation from Interactions).
Web
- The implementation renders
<nav aria-label="Pagination">holding a<ul>; page links are<a>elements, the current page a<span aria-current="page">, and a previous or next link without destination a<span role="link" aria-disabled="true">; chevrons carryaria-hidden="true"(ARIA in HTML: nav, HTML-AAM: nav, ARIA in HTML: a without href, MDN: aria-current, ARIA6, ARIA11, WAI-ARIA: aria-hidden). - The focus ring uses
:focus-visible(MDN: :focus-visible).
iOS
- A page control shows a row of indicators, the current one solid, for a few pages of a flat list; numbered links remain for long lists (Apple HIG: Page controls).
Related
- Breadcrumb (where a page sits in a hierarchy)