Pagination

Stable3.120.0View in LexiconCHANGELOG

You can use ClayPagination.Ellipsis to display a dropdown with the specified page numbers as the dropdown's options.

ClayPagination.Item renders a basic Pagination item with content you provide.

Combining these you can reach the following result:

Numbered Pagination

If you want to have a simple Pagination with integers as Pagination items you can use a simpler variant, PaginationWithBasicItems as you can see below:

Accessibility

ClayPaginationWithBasicItems generates aria-label's for the previous, next, page, and ellipsis links. Custom labels can be passed to the previous, next, and page links through the ariaLabels attribute. It is useful for providing translated labels for screen readers or custom text more relevant to your app. The component will replace the placeholder {0} with the page number.

<ClayPaginationWithBasicItems
	ariaLabels={{
		link: 'Change the page to {0}',
		next: 'Change the page to {0}',
		previous: 'Change the page to {0}',
	}}
	activePage={8}
	ellipsisBuffer={2}
	totalPages={25}
/>

The aria-label attribute on ClayPaginationWithBasicItems sets the aria-label on the nav element. It defaults to "Pagination".

<ClayPaginationWithBasicItems
	aria-label="Pagination for 25 pages worth of stuff"
	activePage={8}
	ellipsisBuffer={2}
	totalPages={25}
/>

The ellipsis aria-label and title are customized through the ellipsisProps attribute. The placeholder text {0} will be replaced with the first page number on the list and {1} will be replaced with the last page number on the list.

<ClayPaginationWithBasicItems
	activePage={8}
	ellipsisBuffer={2}
	ellipsisProps={{
		'aria-label': 'Show links to pages {0} through {1}',
		title: 'Show links to pages {0} through {1}',
	}}
	totalPages={25}
/>