Skin CSS Framework

Main Navigation
CSS Components
Guides
  • Archive (v19.5.2)
  • Repo
  • Storybook
  • Sitemap
  • Accordion
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumbs
  • Button
  • Calendar
  • Carousel
  • Ccd
  • Chart Legend
  • Checkbox
  • Chip
  • Chips Combobox
  • Combobox
  • Confirm Dialog
  • Cta Button
  • Date Textbox
  • Details
  • Donut Chart
  • Education Notice
  • Eek
  • Field
  • File Input
  • File Preview Card Group
  • File Preview Card
  • Filter Button
  • Filter Input
  • Filter Menu Button
  • Filter Menu
  • Flag
  • Floating Label
  • Global
  • Icon Button
  • Icon
  • Image Placeholder
  • Infotip
  • Inline Notice
  • Item Tile Group
  • Item Tile
  • Layout Grid
  • Less
  • Lightbox Dialog
  • Link
  • List
  • Listbox Button
  • Listbox
  • Marketsans
  • Menu Button
  • Menu
  • Number Input
  • Page Grid
  • Page Notice
  • Pagination
  • Panel Dialog
  • Phone Input
  • Progress Bar Expressive
  • Progress Bar
  • Progress Spinner
  • Progress Stepper
  • Radio
  • Section Notice
  • Section Title
  • Segmented Buttons
  • Select
  • Signal
  • Skeleton
  • Snackbar Dialog
  • Split Button
  • Star Rating Select
  • Star Rating
  • Svg
  • Switch
  • Table
  • Tabs
  • Textbox
  • Toast Dialog
  • Toggle Button Group
  • Toggle Button
  • Tokens
  • Tooltip
  • Tourtip
  • Typography
  • Utility
  • Page Grid Use Guide
  • Skeleton Use Guide
  • Animation Guide
  • Archive (v19.5.2)
  • Repo
  • Storybook

CSS Components

  • Accordion
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumbs
  • Button
  • Calendar
  • Carousel
  • Ccd
  • Chart Legend
  • Checkbox
  • Chip
  • Chips Combobox
  • Combobox
  • Confirm Dialog
  • Cta Button
  • Date Textbox
  • Details
  • Donut Chart
  • Education Notice
  • Eek
  • Field
  • File Input
  • File Preview Card Group
  • File Preview Card
  • Filter Button
  • Filter Input
  • Filter Menu Button
  • Filter Menu
  • Flag
  • Floating Label
  • Global
  • Icon Button
  • Icon
  • Image Placeholder
  • Infotip
  • Inline Notice
  • Item Tile Group
  • Item Tile
  • Layout Grid
  • Less
  • Lightbox Dialog
  • Link
  • List
  • Listbox Button
  • Listbox
  • Marketsans
  • Menu Button
  • Menu
  • Number Input
  • Page Grid
  • Page Notice
  • Pagination
  • Panel Dialog
  • Phone Input
  • Progress Bar Expressive
  • Progress Bar
  • Progress Spinner
  • Progress Stepper
  • Radio
  • Section Notice
  • Section Title
  • Segmented Buttons
  • Select
  • Signal
  • Skeleton
  • Snackbar Dialog
  • Split Button
  • Star Rating Select
  • Star Rating
  • Svg
  • Switch
  • Table
  • Tabs
  • Textbox
  • Toast Dialog
  • Toggle Button Group
  • Toggle Button
  • Tokens
  • Tooltip
  • Tourtip
  • Typography
  • Utility

Guides

  • Page Grid Use Guide
  • Skeleton Use Guide
  • Animation Guide

@ebay/skin/pagination

DS v2

Pagination allows a user to navigate back and forth through a URL based dataset, or jump directly to any specific URL in that set.

The pagination set has a maximum of seven items. An item can be a page number or an overflow element (see next section).

Traditional MPA pagination uses links to reload the entire page when clicked. For SPAs, this default click event behaviour can be prevented with JavaScript ( aria-live should also be set from "off" to "on").

Results Pagination - Page 1

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7

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).

Results Pagination - Page 1

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 80

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

Results Pagination - Page 1

  1. 1
  2. 76
  3. 77
  4. 78
  5. 79
  6. 80

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

Results Pagination - Page 10

  1. 1
  2. 43
  3. 44
  4. 45
  5. 80

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.

Results Pagination - Page 1

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
    • 6
    • 7
    • 8
    • 9
  6. 10
  • Archive (v19.5.2)
  • Repo
  • Storybook
  • Sitemap
Copyright © 2025 eBay, Inc. All rights reserved.
<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>
<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>
<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>