Pagination links allows users to navigate a set of content that is divided between multiple pages or views. This pattern is typically used when a large set of results requires to be split for performance reasons, or when the ability to access a specific listings page is a user requirement.
Rules for pagination
- Pagination must be used on search results and tables which have multiple pages, for example, DataTables.
- Pagination must have 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 aria-label for each
<nav>block to reflect its purpose.
- Links are customisable for different circumstances. Use
.disabledfor unclickable links and
.activeto indicate the current page.
Where space permits the 'Next' and 'Previous' button text should be shown alongside the arrows.
Pagination with disabled and active states
Disabled links should be used when there is no preceeding or following pages to navigate to.
Pagination with large number of pages
When there is a large amount of pages
… should be used to signify any page links that are not immediately displayed.
A small, more compact, sizing that would be best used on internal web applications and mobile displays.
Simple 'Previous' and 'Next' links can be used for pagination that needs a linear navigation through adjoining results. For example these can be used at the bottom of a blog post or news article to allow the user to proceed to another post.
Pager with disabled state
Pager links also use the general
disabled utility class from the pagination. Disabled links are to be used when there is no preceeding or following pages to navigate to.