Pagination
Pagination links should be used as a method of navigating a set of content that is divided between multiple pages or views. Typical use of this pattern would be 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 where they 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 the
<nav>to reflect its purpose. - Links are customisable for different circumstances. Use
.disabledfor unclickable links and.activeto indicate the current page.
Options available
- Pagination
- Pagination with disabled and active states
- Pagination with large number of pages
- Compact pagination
- Pager
- Pager with disabled state
Pagination
Where space permits the 'Next' and 'Previous' button text should be shown alongside the arrows.
Example
Pagination with disabled and active states
Example
Pagination with large number of pages
When there are a large amount of pages … should be used to signify any page links that are not immediately displayed.
Compact pagination
A small, more compact, sizing that would be best used on internal web applications and mobile displays.
Example
Pager
Simple 'Previous' and 'Next' links for pagination implementation use cases that need 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.
Example
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.