Pagination

Pagination links aloows 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 .disabled for unclickable links and .active to indicate the current page.

Options available

Pagination

Where space permits the 'Next' and 'Previous' button text should be shown alongside the arrows.

Example
Code

Pagination with disabled and active states

Disabled links should be used when there is no preceeding or following pages to navigate to.

Example
Code

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.

Example
Code

Compact pagination

A small, more compact, sizing that would be best used on internal web applications and mobile displays.

Example
Code

Pager

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.

Example
Code

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.

Example
Code