Skip to content

Pagination13.10.5

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


$ npm i @if-design-system/pagination@13.10.5

Edit this section

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

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.

Implementation

Default

<nav class="if pagination" role="navigation" aria-label="Pagination Navigation">
  <ul class="if">
    <li class="if"><button class="if first" type="button" aria-label="Goto first page"></button></li>
    <li class="if">
      <button class="if previous" type="button" aria-label="Goto previous page"></button>
    </li>
    <li class="if"><button class="if" type="button" aria-label="Goto Page 1">1</button></li>
    <li class="if"><button class="if" type="button" aria-label="Goto Page 2">2</button></li>
    <li class="if">
      <button class="if current" type="button" aria-label="Current Page, Page 3" aria-current="true">
        3
      </button>
    </li>
    <li class="if"><button class="if" type="button" aria-label="Goto Page 4">4</button></li>
    <li class="if">
      <button class="if expand" type="button" aria-label="Expand pages" title="Expand pages"></button>
    </li>
    <li class="if"><button class="if" type="button" aria-label="Goto Page 30">30</button></li>
    <li class="if"><button class="if next" type="button" aria-label="Goto next page"></button></li>
    <li class="if"><button class="if last" type="button" aria-label="Goto last page"></button></li>
  </ul>
  <span class="if description">Showing <strong class="if">31-40</strong> of <strong class="if">300</strong></span>
</nav>

Minimal

<nav class="if pagination" role="navigation" aria-label="Pagination Navigation">
  <ul class="if">
    <li class="if">
      <button class="if previous" type="button" aria-label="Goto previous page"></button>
    </li>
    <li class="if"><button class="if next" type="button" aria-label="Goto next page"></button></li>
  </ul>
  <span class="if description"><strong class="if">31-40</strong> of <strong class="if">300</strong></span>
</nav>

Default with disabled arrows

<nav class="if pagination" role="navigation" aria-label="Pagination Navigation">
  <ul class="if">
    <li class="if">
      <button disabled class="if first" type="button" aria-label="Goto first page"></button>
    </li>
    <li class="if">
      <button disabled class="if previous" type="button" aria-label="Goto previous page"></button>
    </li>
    <li class="if"><button class="if" type="button" aria-label="Goto Page 1">1</button></li>
    <li class="if"><button class="if" type="button" aria-label="Goto Page 2">2</button></li>
    <li class="if">
      <button class="if current" type="button" aria-label="Current Page, Page 3" aria-current="true">
        3
      </button>
    </li>
    <li class="if"><button class="if" type="button" aria-label="Goto Page 4">4</button></li>
    <li class="if"><button class="if" type="button" aria-label="Goto Page 5">5</button></li>
    <li class="if">
      <button disabled class="if next" type="button" aria-label="Goto next page"></button>
    </li>
    <li class="if">
      <button disabled class="if last" type="button" aria-label="Goto last page"></button>
    </li>
  </ul>
  <span class="if description">Showing <strong class="if">31-40</strong> of <strong class="if">300</strong></span>
</nav>
Edit this section

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.

<nav class="if pagination dots small" role="navigation" aria-label="Pagination Navigation"></nav>

Implementation

<nav class="if pagination dots" role="navigation" aria-label="Pagination Navigation">
  <ul class="if">
    <li class="if"><button class="if" type="button" aria-label="Goto Page 1">1</button></li>
    <li class="if"><button class="if" type="button" aria-label="Goto Page 2">2</button></li>
    <li class="if">
      <button class="if current" type="button" aria-label="Current Page, Page 3" aria-current="true">
        3
      </button>
    </li>
    <li class="if"><button class="if" type="button" aria-label="Goto Page 4">4</button></li>
    <li class="if"><button class="if" type="button" aria-label="Goto Page 5">5</button></li>
  </ul>
</nav>
Edit this section

Accessibility

This component complies with accessibility guidelines by doing the following:

  • Wraps the pagination links in a <nav> element to let screen readers recognize the pagination controls
  • Sets aria-label="pagination" to describe the type of navigation
  • Indicates the active page by adding aria-current="page" to the link that points to the current page

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

Contact us