Navigation pagination
Pagination allows long sets of data or content to be divided into multiple pages with controls to navigate between these pages.
Guidelines
When content will take a long time to load or is better viewed in smaller sets, pagination can be used to divide this content into multiple pages. Pagination only loads one page at a time.
Don't
- Do not lazy load content as the user scrolls when using pagination.
Variant
There are three variations of pagination to use: Page numbers
, Total + page numbers
, Switcher + total + page numbers
.
Interaction
The active page number always stays in the middle, shifting the previous numbers. For example, in pagination with five page buttons but ten pages---pages 1, 2, 9, and 10 will not be able to be centered when they are active, but the rest will be.
Edit this page on GitHub