University of St Andrews

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 .disabled for unclickable links and .active to 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.

Pagination with disabled and active states

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.

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.

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.