Navigation

Pagination

Controls for moving between pages of a long list, such as search results.

Showing results 1–10 of 40

Also known as

A row of page numbers with “Previous” and “Next” at the ends. The current page number is highlighted, and long ranges are shortened with “…”.

Table pagination: Attached below a data table, with the number of rows per page and the range being shown.

Choosing a number shows that page; “Previous” and “Next” move one page at a time.
The current page is marked with aria-current="page", and the whole control sits in a nav landmark.
Websites often use links to separate URLs; this demo uses buttons because it swaps content on the same screen.

Key	Action
`Tab`	Moves between the page controls.
`Enter`	Goes to the focused page.

The Digital Agency Design System hides "Previous" and "Next" on the first and last pages instead of disabling them. This demo keeps them focusable with aria-disabled.

Carousel: Pagination moves through pages of a long list; a carousel shows one slide of a small set in place.
Stepper: Pagination moves through pages of results; a stepper shows the user’s place in a procedure with distinct steps.