Overview
An example of how our numbered pagination is presented.
How it works
The pattern is made up of chevrons to navigate forwards and backwards, and numbered page buttons.
Selecting the right chevron moves you one page forward.
An example showing the right chevron being selected.
An example showing the left chevron being selected.
You can jump to any page by selecting a page number button. We use an ellipsis (…) to show that more pages exist.
An example showing a single page number being selected, and highlighting the ellipsis.
An example of numbered pagination with a small number of pages.
Rules
- - You can use numbered pagination at the top and/or bottom of any page. We recommend you centrally align the pagination.
- - You should always have left and right chevron buttons.
- - The page number you’re on is always highlighted.
An example of a highlighted page number.
An example showing the difference between the last page number being known.
An example showing numbered pagination below 320px.
An example of tabbing through page numbers.