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.

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.

The pagination component should be placed underneath and justified to the end of the content it is paginating.

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.

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.

1. Wrap pagination links in a <nav> element.
2. Provide an aria-label="pagination navigaton" and role="navigation".
3. 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.
4. The active page button should have aria-current="true".
5. 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.

In addition to Table and List, here is another way pagination can be implemented.

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.

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.