View in FigmaView in ClayDocumentation
Pagination provides horizontal navigation between chunks(pages) of a dataset.
Use the default pagination when you need a simple pagination pattern for a page that will not change size.
Pagination includes several mechanisms to move between pages:
- Left arrow:
- Navigates backward one page
- Disabled when the first page is selected
- Numbers: redirects directly to a certain dataset chunk (page) calculated with the page size
- Appears when the number of pages exceeds six
- Displays a dropdown menu with the rest of the pages
- It is always shown in a middle position
- Right arrow:
- Navigates forward one page
- Disabled when the last page is selected
A pagination bar is pagination with the following features:
- A page size selector placed on the left side of the bar
- A label on the right side of the page size selector that displays the exact chunk of information displayed from the dataset
- Classic pagination on the right side of the bar that adapts to the number of pages
Use the pagination bar when you need a complex pagination pattern that requires changing the page size and re-calculating the number of pages.
- Entries dropdown to select the number of elements per page. You can configure the page size options.
- Descriptive text to clarify the dataset segment shown.
- Back arrow
- Selected page
- Non-selected page
- Ellipsis to select intermediate pages through a dropdown menu. Since there are so many pages, it's impossible to view all the pages at once.
- Forth arrow