Back to components

Pagination

Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.

Table of Contents

Edit this section, Opens in new window

Overview

When there is a lot of content to display, using pagination will help us to add navigation links to reveal more content on the page.

Primarily, put pagination on the bottom of the table. If the table does not fit on the screen, use pagination above the table aswell.

Edit this section, Opens in new window

Default

Default pagination
Minimal pagination
Default pagination with disabled arrows

Disabled buttons is shown when the data set is at the end, or beginning of the data set.

Usage

Use pagination to:

  • Present lists that contain specific items a user may need to find in order to complete their task.
  • Navigate lists that can be sorted and/or filtered.

We use both pagination and load more to segment results depending on the user's task. Compare these guidelines with the Discovery vs browsing usage guidelines if you are unsure of which to use.

Table title

Additional description if needed

Filters
Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
123 123 123
Anatomy
  1. Pagination

Principles

Identify the current page

Clearly identify which page the user is on by displaying the current page number. By providing context into how many pages there are in total (eg. 1 of 4 pages), you can help provide clarity around the data displayed.

Provide various options for navigating

Previous and next chevrons or links are the most useful way for the user to move forward or backward through pages of data.

Sizing

Anatomy

Pagination
  1. Go to first page
  2. Go to next page
  3. Page
  4. Current page
  5. Truncated pages
  6. Go to next page
  7. Go to last page
  8. Showing the current page set and total number of pages

Behaviours

Anchoring

Always anchor to the bottom of the list when the user interacts with the pagination component. If the data-set does not fit on the screen, use pagination above the table aswell.

Truncation

Truncation is shown using when the number of pages exceeds the pagination display limit.

Page counters

When page counters are not available due to a technical restraint, the minimal pagination version may be used without the page count.

Interactions

Focus
Focus

3px outline with color BL 1, BLUE Complement, a direct complement color of BL 1, BLUE.

Edit this section, Opens in new window

Dots

Usage

Use the pagination dots when you want to control

Sizing

Pagination dots comes in two sizes, default and small.

Anatomy

Pagination dots
  1. Page indicator
  2. Current page indicator
Style
  1. The outline is LB 1, LIGHT BROWN 30%
  2. The fill color for current is BL 1, BLUE

Interactions

Hover

Focus

The hover color is BR 1, BROWN

Focus

Focus

2px border with color BL 1, BLUE Complement, a direct complement color of BL 1, BLUE.

Modifiers

Small

Smaller pagination dots can be used depending on the size of the object(s) it controls.

Edit this section, Opens in new window

Accessibility

View the videos at a11ymattters, Accessible Pagination for a demonstration of before and after pagination tests using a screen reader voiceover.

This component has compliance WCAG guidelines by:

  • WCAG 2.4.8: Information about the user's location within a set of Web pages is available
  • WCAG 3.2.3: Navigation patterns follow a consistent pattern. Only position pagination component at the bottom of the page
  • WCAG 2.4.3: Focus state receives focus in an order that preserves meaning
  • WCAG 2.4.7: Focus is visible
  • WCAG 2.5.5: Target size for pagination links are large enough for users to easily activate them

Principles

  • The pagination should be keyboard navigation friendly
  • A screen reader should easily pick up the pagination
  • Each navigation item should be read as "Goto Page 1".
  • We need to tell the user which element is currently active.
  • The pagination should have Next and Previous links, where applicable.
Edit this section, Opens in new window
Contact us, Opens in new window