Guidelines

Use When

A page contains enough content to justify breaking it into smaller chunks to improve a user’s experience.

Don't Use When

Using lazy load to load content as the user scrolls.

Behaviors

Disable the first and previous arrow icons (and their labels) when the first page is selected.

Disable the next and last arrow icons (and their labels) when the last page is selected.

Accessibility

Wrap the links with <nav class=”mds-pagination__wrapper” role="navigation" aria-label="Pagination Navigation"> to explicitly communicate that page navigation is present and that it’s intended for pagination.

Add the appropriate ARIA labels to each link, for example, <a href="/page-1" aria-label="Go to Page 1">. This ensures that the screen readers deliver an appropriate message to a user for each link in the pagination component.

For the currently selected page in the range, set the appropriate ARIA attributes on the anchor elements, for example, <a href="/page-3" aria-label="Current Page, Page 3" aria-current="page">3</a>.

Disable the previous and next links when at the beginning or end of a page set. Use the mds-pagination__link--disabled class, combined with aria-disabled="true" and tabindex="-1" to accessibly disable those links.

Code Reference

CSS Class References

Class

Applies to

Outcome

.mds-pagination__link--selected

.mds-pagination__link

Applies the selected visual style to a pagination link. Use to indicate the current or active page. Combine with aria-current="page" to align with accessibility best practices.

.mds-pagination__link--disabled

.mds-pagination__link

Applies disabled visual style to a pagination link. Combine with aria-disabled="true" and tabindex="-1" to align with accessibility best practices.