Pagination
Pagination divides content into separate pages in order to enhance navigation to specific items.
When to use pagination
Use pagination when a user’s goal is to find a specific item rather than to peruse the full set of data. By breaking the data up into smaller, consistently sized groups, the user is more easily able to jump to specific sections of the data.
If you expect the user will be scrolling and perusing large amounts of the data set, consider using Infinite Scroll.
Pagination is particularly effective for displaying large sets of results in components such as Table, List, and Cards.
Guidelines
Number of results per page
By default, 20 results should show at once. The examples on this page have been modified to show less results per page so that the pagination control is viewable in the single screen.
If the user has performed a search resulting in less than 20 results, the pagination component should no longer be displayed.
Placement of pagination component
The pagination component should be placed underneath and justified to the end of the content it is paginating.
Showing summary of results
It may be beneficial to provide users with a summary of what range of results they are viewing. This should take the format of "Showing 1-20 of 1000" and should be aligned in a row with the pagination component.
The results summary should be justified to the start of the row and the pagination component should remain justified to the end of the row.
Accessibility
Below are some accessibility requirements that ensure pagination is accessible for screen readers and keyboard navigation.
If your team is developing with Grommet, these considerations are already handled, so no further action is required from your team.
- Wrap pagination links in a
<nav>
element. - Provide an
aria-label="pagination navigaton"
androle="navigation"
. - Individual page buttons should have an
aria-label
that reads "Go to page X", where X is the page that will be navigated to upon selection. - The active page button should have
aria-current="true"
. - The next/previous arrow buttons should have
aria-label
that reads "Go to next page" and "Go to previous page", respectively.
For more detailed documentation on these requirements, you can read more about accessible pagination.
Variants
Paginated table
Tables often contain large amounts of data. To improve the efficiency that a user can navigate to a specific item or range of items, use pagination.
Paginated list
Lists often contain large amounts of data. To improve the efficiency that a user can navigate to a specific item or range of items, use pagination.
Paginated cards
scikit-learn
Personalizer
SuperLearner
Data Analytics Acceleration Library
Python machine-learning
GoLearn
PyTorch
Forecast
MLlib
Kubeflow
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.