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.
- Pagination is built with the ordered list
olHTML elements, so screen readers can announce the number of available links.
Was this page helpful?
Thanks for your feedback!