Pagination Component

<nav class="pagination" aria-labelledby="pagination-heading" role="navigation">
  <span aria-live="off" role="status">
    <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
  </span>
  <a
    aria-disabled="true"
    aria-label="Previous Page - Results Pagination"
    class="icon-link pagination__previous"
    href="https://www.ebay.com/sch/i.html?_nkw=guitars"
  >
    <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
      <use href="#icon-arrow-left-16" />
    </svg>
  </a>
  <ol class="pagination__items">
    <li>
      <a
        href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=1"
        class="pagination__item"
        aria-current="page"
      >
        1
      </a>
    </li>
    <li>
      <a
        href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2"
        class="pagination__item"
      >
        2
      </a>
    </li>
    <li>
      <a
        href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=3"
        class="pagination__item"
      >
        3
      </a>
    </li>
    <li>
      <a
        href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=4"
        class="pagination__item"
      >
        4
      </a>
    </li>
    <li>
      <a
        href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=5"
        class="pagination__item"
      >
        5
      </a>
    </li>
    <li>
      <a
        href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=6"
        class="pagination__item"
      >
        6
      </a>
    </li>
    <li>
      <a
        href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=7"
        class="pagination__item"
      >
        7
      </a>
    </li>
  </ol>
  <a
    aria-label="Next Page - Results Pagination"
    class="icon-link pagination__next"
    href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2"
  >
    <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
      <use href="#icon-arrow-right-16" />
    </svg>
  </a>
</nav>

Anchor tags can be replaced with buttons if the result set is not intended to be deep linkable . This is a rare & unlikely scenario - therefore please exercise caution!

Overflow Rules for Pagination

A leading and/or trailing overflow element may occupy a slot in the pagination if the total number of pages is greater than seven.

This overflow element can be a static icon (see below) or an interactive menu button (see next section).

<nav
  class="pagination pagination--fluid"
  aria-labelledby="pagination-heading"
  role="navigation"
>
  <span aria-live="off" role="status">
    <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
  </span>
  <a
    aria-disabled="true"
    aria-label="Previous Page - Results Pagination"
    class="icon-link pagination__previous"
    href="https://www.ebay.com/sch/i.html?_nkw=guitars"
  >
    <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
      <use href="#icon-arrow-left-16" />
    </svg>
  </a>
  <ol class="pagination__items">
    <li>
      <a
        href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=1"
        class="pagination__item"
        aria-current="page"
      >
        1
      </a>
    </li>
    <li>
      <a
        href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2"
        class="pagination__item"
      >
        2
      </a>
    </li>
    <li>
      <a
        href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=3"
        class="pagination__item"
      >
        3
      </a>
    </li>
    <li>
      <a
        href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=4"
        class="pagination__item"
      >
        4
      </a>
    </li>
    <li>
      <a
        href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=5"
        class="pagination__item"
      >
        5
      </a>
    </li>
    <li>
      <span class="pagination__item" role="separator">
        <svg class="icon icon--24" width="8" height="8" aria-hidden="true">
          <use href="#icon-overflow-horizontal-24" />
        </svg>
      </span>
    </li>
    <li>
      <a
        href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=80"
        class="pagination__item"
      >
        80
      </a>
    </li>
  </ol>
  <a
    aria-label="Next Page - Results Pagination"
    class="icon-link pagination__next"
    href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2"
  >
    <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
      <use href="#icon-arrow-right-16" />
    </svg>
  </a>
</nav>

In the following example, the first overflow slot is occupied.

Our last example shows both overflow-horizontal-24 slots occupied.

Overflow Control for Pagination

A static overflow icon provides no mechanism to jump to any page that is not immediately available in the pagination's current view. This mechanism can either be deferred to another control outside of the pagination (e.g. a menu button) or, as described in this section, the static overflow icon can be switched out for a fake menu button.

<nav
  class="pagination pagination--fluid"
  aria-labelledby="pagination-heading"
  role="navigation"
>
  <span aria-live="off" role="status">
    <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
  </span>
  <a
    aria-disabled="true"
    aria-label="Previous Page - Results Pagination"
    class="icon-link pagination__previous"
    href="https://www.ebay.com/sch/i.html?_nkw=guitars"
  >
    <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
      <use href="#icon-arrow-left-16" />
    </svg>
  </a>
  <ol class="pagination__items">
    <li>
      <a
        href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=1"
        class="pagination__item"
        aria-current="page"
      >
        1
      </a>
    </li>
    <li>
      <a
        href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2"
        class="pagination__item"
      >
        2
      </a>
    </li>
    <li>
      <a
        href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=3"
        class="pagination__item"
      >
        3
      </a>
    </li>
    <li>
      <a
        href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=4"
        class="pagination__item"
      >
        4
      </a>
    </li>
    <li>
      <a
        href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=5"
        class="pagination__item"
      >
        5
      </a>
    </li>
    <li>
      <span class="pagination__item">
        <span class="fake-menu-button">
          <button
            class="icon-btn icon-btn--transparent fake-menu-button__button"
            type="button"
            aria-label="Menu"
          >
            <svg class="icon icon--24" width="8" height="8" aria-hidden="true">
              <use href="#icon-overflow-horizontal-24" />
            </svg>
          </button>
          <ul class="fake-menu-button__menu">
            <li>
              <a class="fake-menu-button__item" href="https://www.ebay.com">
                <span> 6 </span>
              </a>
            </li>
            <li>
              <a href="https://www.ebay.com" class="fake-menu-button__item">
                <span> 7 </span>
              </a>
            </li>
            <li>
              <a href="https://www.ebay.com" class="fake-menu-button__item">
                <span> 8 </span>
              </a>
            </li>
            <li>
              <a href="https://www.ebay.com" class="fake-menu-button__item">
                <span> 9 </span>
              </a>
            </li>
          </ul>
        </span>
      </span>
    </li>
    <li>
      <a
        href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=80"
        class="pagination__item"
      >
        10
      </a>
    </li>
  </ol>
  <a
    aria-label="Next Page - Results Pagination"
    class="icon-link pagination__next"
    href="https://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2"
  >
    <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
      <use href="#icon-arrow-right-16" />
    </svg>
  </a>
</nav>