Pagination

Definition

Pagination is used to indicate a series of related content across multiple pages, to which users can navigate.

Description

Pagination is designed to help users move through a large set of pages. The Pagination Bar consists of numbered links for pages, Next and Previous links, and sometimes overflow indicators.

Note: The .pagination-wrapper class is necessary on the <nav> parent element to allow proper flex sizing.

Use

Pagination Full Example with Code

Overflow indicators are shown in the second and sixth slots of the pagination bar.

<nav class="pagination-wrapper" aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item previous">
      <a
        class="page-link"
        href="#"
        aria-label="Go to previous page"
        tabindex="-1"
        ><svg
          class="icon-inline icon-xs"
          xmlns="http://www.w3.org/2000/svg"
          height="1em"
          viewBox="0 0 320 512">
          <path
            d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z" />
        </svg>
        Previous</a
      >
    </li>
    <li class="page-item">
      <a class="page-link" href="#/page1" aria-label="Go to page 1">1</a>
    </li>
    <li class="page-item">
      <div class="page-link">&hellip;</div>
    </li>
    <li class="page-item">
      <a class="page-link" href="#/page9" aria-label="Go to page 9">9</a>
    </li>
    <li class="page-item active">
      <a
        class="page-link"
        href="#/page10"
        aria-current="page"
        aria-label="Go to page "
        >10</a
      >
    </li>
    <li class="page-item">
      <a class="page-link" href="#/page11#" aria-label="Go to page 11">11</a>
    </li>
    <li class="page-item">
      <div class="page-link">&hellip;</div>
    </li>
    <li class="page-item">
      <a class="page-link" href="#/page24" aria-label="Go to page 24">24</a>
    </li>
    <li class="page-item next">
      <a class="page-link" href="#" aria-label="Go to next page"
        >Next
        <svg
          class="icon-inline icon-xs"
          xmlns="http://www.w3.org/2000/svg"
          height="1em"
          viewBox="0 0 320 512">
          <path
            d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
        </svg>
      </a>
    </li>
  </ul>
</nav>

Hide

Overflow Indicator

The overflow indicator is not a button but a container with a horizontal ellipsis (three dots) inside. It appears next to other page items and is used when there are too many pages to display within the available space.

Selected Page and Overflow

The pagination bar ensures that there is no overflow indicator next to the currently selected page. This avoids confusion and keeps the user informed about their current position.

Hidden 'Previous' and 'Next' Links

The 'Previous' link is hidden on the first page of the set to prevent navigating to a non-existent previous page.

The 'Next' link is hidden on the last page of the set to prevent navigating beyond the available pages.

Small Screen Adjustment

To fit on a small screen, the Previous and Next buttons are hidden.

<nav class="pagination-wrapper" aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item previous">
      <a
        class="page-link"
        href="#"
        aria-label="Go to previous page"
        tabindex="-1"
        ><svg
          class="icon-inline icon-xs"
          xmlns="http://www.w3.org/2000/svg"
          height="1em"
          viewBox="0 0 320 512">
          <path
            d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z" />
        </svg>
        Previous</a
      >
    </li>
    <li class="page-item">
      <a class="page-link" href="#/page1" aria-label="Go to page 1">1</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#/page2" aria-label="Go to page 2">2</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#/page3" aria-label="Go to page 3">3</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#/page4#" aria-label="Go to page 4">4</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#/page5" aria-label="Go to page 5">5</a>
    </li>
    <li class="page-item active">
      <a class="page-link" href="#/page6" aria-current="page">6</a>
    </li>
  </ul>
</nav>

Hide

<nav class="pagination-wrapper" aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item active">
      <a class="page-link" href="#/page1" aria-current="page">1</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#/page2" aria-label="Go to page 2">2</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#/page3" aria-label="Go to page 3">3</a>
    </li>
    <li class="page-item next">
      <a class="page-link" href="#" aria-label="Go to next page"
        >Next
        <svg
          class="icon-inline icon-xs"
          xmlns="http://www.w3.org/2000/svg"
          height="1em"
          viewBox="0 0 320 512">
          <path
            d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
        </svg>
      </a>
    </li>
  </ul>
</nav>

Hide

Optimal Slot Adjustment

If there are seven (7) or fewer pages, do not show overflow indicators.

<nav class="pagination-wrapper" aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#/page1" aria-label="Go to page 1">1</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#/page2" aria-label="Go to page 2">2</a>
    </li>
    <li class="page-item active">
      <a class="page-link" href="#/page3" aria-current="page">3</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#/page4#" aria-label="Go to page 4">4</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#/page5" aria-label="Go to page 5">5</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#/page6" aria-label="Go to page 6">6</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#/page7" aria-label="Go to page 7">7</a>
    </li>
  </ul>
</nav>

Hide

Accessibility Considerations

aria-current="page" should be used to inform the assistive technology user what has been indicated via styling.
Use an aria-label to help screenreaders with the intention of the numbered links. aria-label="Go to page $n"

Guidelines/Restrictions

Use pagination when there are too many results to show on the one page
Commonly used for things like table listings, search results, and directories
Provide large clickable areas
Identify the current page
Provide Previous and Next links

Pagination

Definition

Description

Use

Pagination Full Example with Code

Pagination Code

Overflow Indicator

Selected Page and Overflow

Hidden 'Previous' and 'Next' Links

Small Screen Adjustment

Pagination with Previous Button

Pagination with Next Button

Optimal Slot Adjustment

Optimal Slot Adjustment

Accessibility Considerations

Guidelines/Restrictions

References