Pagination allows the user to easily find and navigate through large amounts of content and breaks up content into multiple pages.
- Amount of content will take a long time to load/render.
- If you want to browse the data by navigating through pages.
- A table contains more than 30 items.
- 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.
- Use no arrows when number of pages is eight or fewer.
- Display a maximum interval of eight pages at a time.
- Single caret icon increments by one page.
- Double caret icon jumps to the first or last page.
- Distinctive highlight for current page.
- 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.
- Use a wrapping
<nav>element to identify it as a navigation section to screen readers and other assistive technologies.
- As pages likely have more than one such navigation section, it’s advisable to provide a descriptive
<nav>to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be
aria-label="Search results pages".
- Pagination is built with the ordered list
olHTML elements (only if the number of links exactly matches), so screen readers can announce the number of available links.
- If you use icons for the next and previous buttons be sure to add the
aria-label="Next"attributes to the links.
Was this page helpful?
Thanks for your feedback!