Pagination allows a user to navigate back and forth through a URL based dataset, or jump directly to any specific URL in that set.

The pagination set has a maximum of seven items. An item can be a page number or an overflow element (see next section).

Traditional MPA pagination uses links to reload the entire page when clicked. For SPAs, this default click event behaviour can be prevented with JavaScript ( aria-live should also be set from "off" to "on").

Anchor tags can be replaced with buttons if the result set is not intended to be deep linkable . This is a rare & unlikely scenario - therefore please exercise caution!

Overflow Rules for Pagination

A leading and/or trailing overflow element may occupy a slot in the pagination if the total number of pages is greater than seven.

This overflow element can be a static icon (see below) or an interactive menu button (see next section).

In the following example, the first overflow slot is occupied.

Our last example shows both overflow-horizontal-24 slots occupied.

Overflow Control for Pagination

A static overflow icon provides no mechanism to jump to any page that is not immediately available in the pagination's current view. This mechanism can either be deferred to another control outside of the pagination (e.g. a menu button) or, as described in this section, the static overflow icon can be switched out for a fake menu button.