Pagination

Example

<nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#"><i class="bi bi-chevron-left"></i>Previous</a></li>
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">...</a></li>
      <li class="page-item"><a class="page-link" href="#">12</a></li>
      <li class="page-item"><a class="page-link" href="#">Next<i class="bi bi-chevron-right"></i></a></li>
    </ul>
  </nav>

<nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#">Previous</a></li>
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">...</a></li>
      <li class="page-item"><a class="page-link" href="#">12</a></li>
      <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
  </nav>

<nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#"><i class="bi bi-chevron-left"></i></a></li>
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">...</a></li>
      <li class="page-item"><a class="page-link" href="#">12</a></li>
      <li class="page-item"><a class="page-link" href="#"><i class="bi bi-chevron-right"></i></a></li>
    </ul>
  </nav>

Anatomy

1. Previous and next buttons: Allows users to go backward or forward a page, can be text or icon, can be used individually depending on situation and space constraints.
2. Numbering: Allow users to skip to different pages anytime.
3. Truncation: When a threshold of pages is reached, the list is truncated using an ellipsis.

Spacing

Within the pagination
Ensure that there is a min of 8px vertical spacing and 16px horizontal spacing. Base height 48px.

Usage guidelines

Best practices:

1. Provide context on how many pages are there in total.

Pagination should be used when:

1. Long content can be separated into multiple pages that can be navigated sequentially or by selecting a specific page within the pagination set.
2. Providing various option for navigating, when previous and next links are most useful way for the user to move forward and backward through pages of data.

Pagination should not be used when:

1. The page has infinite scrolling, i.e. loading data as the user scrolls down the page.
2. The content is not part of the same set, consider using navigation instead.
3. Switching between slides or content in a carousel.

Usability guidelines

Show the total number of pages in the pagination set whenever possible
Users should know the total number of pages or items. Truncation can be used when the number of pages exceeds the pagination display limit.

Highlight the current page
Pagination should highlight the page the user is currently on.

Place pagination at the bottom of the set of results
Do place pagination at the bottom of page so that users are able to navigate between pages.

Behaviour
Clearly identify the pagination different states so that users will know which page they are on. Selected, hover, disabled and enabled.

Accessibility guidelines

Aria attributes

1. Pagination links should be wrapped in a <nav> element and add aria-label to the nav element to make it clearer to users that this navigation landmark is intended for the pagination.

Keyboard accessibility

1. Tab to iterate forward to the next page number
2. Shift-Tab to iterate backwards to the previous page number.
3. Space or Enter to select interactive pagination link

Focus indicator

1. Focus indicator should be clearly visible when a header is focused.
2. Move focus to the accordion content when it is expanded, if necessary.
3. Ensure that focusable elements within the accordion panel can be navigated using the keyboard.

Pagination design tokens

$pagination-padding-y: 0.5rem !default;
$pagination-padding-x: 1rem !default;
$pagination-padding-y-sm: .25rem !default;
$pagination-padding-x-sm: .5rem !default;
$pagination-padding-y-lg: .75rem !default;
$pagination-padding-x-lg: 1.5rem !default;
$pagination-color: $link-color !default;
$pagination-bg: $white !default;
$pagination-border-width: $border-width !default;
$pagination-border-radius: $border-radius !default;
$pagination-margin-start: -$pagination-border-width !default;
$pagination-border-color: $border-color !default;
$pagination-focus-color: $link-hover-color !default;
$pagination-focus-bg: $gray-200 !default;
$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
$pagination-focus-outline: 0 !default;
$pagination-hover-color: $link-hover-color !default;
$pagination-hover-bg: $gray-200 !default;
$pagination-hover-border-color: $gray-300 !default;
$pagination-active-color: $component-active-color !default;
$pagination-active-bg: $component-active-bg !default;
$pagination-active-border-color: $pagination-active-bg !default;
$pagination-disabled-color: $gray-600 !default;
$pagination-disabled-bg: $white !default;
$pagination-disabled-border-color: $border-color !default;
$pagination-transition: color .15s ease-in-out,
background-color .15s ease-in-out,
border-color .15s ease-in-out,
box-shadow .15s ease-in-out !default;
$pagination-border-radius-sm: $border-radius-sm !default;
$pagination-border-radius-lg: $border-radius-lg !default;