Pagination organizes content into logical, manageable groups, dividing it across pages based on the relevance of results. This method offers a clear, structured way for users to navigate through information.
desktop
mobile
selected
selected:focus
unselected
unselected:hover
unselected:focus
There is an absolute maximum of 7 visible slots available, including the overflow element if pages are truncated. On smaller screens, more pages will be truncated as the screen width decreases. When pages are truncated, the minimum is 5 slots visible. Avoid showing pagination if only 1 page exists.
first-page
last-page
first-page: leading-overflow
last-page: trailing-overflow
leading-overflow
The leading overflow appears when there are at least 2 pages between the last page and the page before the overflow.
leading-and-trailing-overflow
Both the leading and trailing overflow appear when there are at least 3 pages ahead and behind the active page, excluding the first and last page.
trailing-overflow
The trailing overflow appears when navigating within the last 4 pages and will contain a minimum of 2 pages.
Interacting with the overflow element reveals an action menu.
overflow-active