Pagination

This component has been deprecated

See the Pagination component in Garden's @zendeskgarden/react-pagination package for the latest updates.

The pagination component provides styling for a multi-page control used to navigate long content lists such as data tables or search results.

previous
1
2-3
4
5
6
7
8
9-10
11
next

Page Anchors

The pagination component supports using anchor tags within page elements.

<ul class="c-pagination">
  <li class="c-pagination__page c-pagination__page--previous"><a href>previous</a></li>
  <li class="c-pagination__page"><a href>1</a></li>
  <li class="c-pagination__page is-current"><a href>2</a></li>
  <li class="c-pagination__page"><a href>3</a></li>
  <li class="c-pagination__page c-pagination__page--next"><a href>next</a></li>
</ul>

Page State

Use the .is-* modifier classes to manage page state. Note this component removes default :focus styling. In order to retain accessibility, use JS to apply .is-focused on keyboard (not mouse) focus. By default, hovered styling will be applied on :hover.

<ul class="c-pagination is-rtl">
  <li class="c-pagination__page c-pagination__page--previous is-hidden">previous</li>
  <li class="c-pagination__page is-current">1</li>
  <li class="c-pagination__page is-focused">2</li>
  <li class="c-pagination__page is-hovered">3</li>
  <li class="c-pagination__page c-pagination__page--next is-focused">next</li>
</ul>

Accessible Markup

Use the following semantic HTML to make the pagination component keyboard and screen reader accessible. ARIA attributes are used to apply the expected page state styling.

<ul class="c-pagination" role="navigation">
  <li class="c-pagination__page c-pagination__page--previous" aria-hidden="true"><a href>previous</a></li>
  <li class="c-pagination__page" aria-current="true"><a href>1</a></li>
  <li class="c-pagination__page"><a href>2</a></li>
  <li class="c-pagination__page"><a href>3</a></li>
  <li class="c-pagination__page c-pagination__page--next"><a href>next</a></li>
</ul>

Layout Rules

Display a maximum of 9 pages.
Use .c-pagination__page--gap when there are more than 9 pages.
The first and last page numbers should always be displayed.
Gap indicators should always be positioned either following the first or preceding the last page.
Center current page selection when both gap indicators are displayed.
Hide .c-pagination__page--previous navigation when the first page is current.
Hide .c-pagination__page--next navigation when the last page is current.

<ol class="u-list-style-decimal u-ml">
  <li class="u-mb-sm"><div class="u-display-inline-block u-ml">
    <ul class="c-pagination">
      <li class="c-pagination__page c-pagination__page--previous">previous</li>
      <li class="c-pagination__page">1</li>
      <li class="c-pagination__page">2</li>
      <li class="c-pagination__page">3</li>
      <li class="c-pagination__page">4</li>
      <li class="c-pagination__page">5</li>
      <li class="c-pagination__page">6</li>
      <li class="c-pagination__page">7</li>
      <li class="c-pagination__page">8</li>
      <li class="c-pagination__page">9</li>
      <li class="c-pagination__page c-pagination__page--next">next</li>
    </ul>
  </div></li>
  <li class="u-mb-sm"><div class="u-display-inline-block u-ml">
    <ul class="c-pagination">
      <li class="c-pagination__page c-pagination__page--previous">previous</li>
      <li class="c-pagination__page">1</li>
      <li class="c-pagination__page">2</li>
      <li class="c-pagination__page">3</li>
      <li class="c-pagination__page">4</li>
      <li class="c-pagination__page">5</li>
      <li class="c-pagination__page">6</li>
      <li class="c-pagination__page">7</li>
      <li class="c-pagination__page c-pagination__page--gap">8-9</li>
      <li class="c-pagination__page">10</li>
      <li class="c-pagination__page c-pagination__page--next">next</li>
    </ul>
  </div></li>
  <li class="u-mb-sm"><div class="u-display-inline-block u-ml">
    <ul class="c-pagination">
      <li class="c-pagination__page c-pagination__page--previous">previous</li>
      <li class="c-pagination__page">1</li>
      <li class="c-pagination__page c-pagination__page--gap">2-3</li>
      <li class="c-pagination__page">4</li>
      <li class="c-pagination__page">5</li>
      <li class="c-pagination__page">6</li>
      <li class="c-pagination__page">7</li>
      <li class="c-pagination__page">8</li>
      <li class="c-pagination__page">9</li>
      <li class="c-pagination__page">10</li>
      <li class="c-pagination__page c-pagination__page--next">next</li>
    </ul>
  </div></li>
  <li class="u-mb-sm"><div class="u-display-inline-block u-ml">
    <ul class="c-pagination">
      <li class="c-pagination__page c-pagination__page--previous">previous</li>
      <li class="c-pagination__page">1</li>
      <li class="c-pagination__page c-pagination__page--gap">2-3</li>
      <li class="c-pagination__page">4</li>
      <li class="c-pagination__page">5</li>
      <li class="c-pagination__page">6</li>
      <li class="c-pagination__page">7</li>
      <li class="c-pagination__page">8</li>
      <li class="c-pagination__page c-pagination__page--gap">9-10</li>
      <li class="c-pagination__page">11</li>
      <li class="c-pagination__page c-pagination__page--next">next</li>
    </ul>
  </div></li>
  <li class="u-mb-sm"><div class="u-display-inline-block u-ml">
    <ul class="c-pagination">
      <li class="c-pagination__page c-pagination__page--previous">previous</li>
      <li class="c-pagination__page">1</li>
      <li class="c-pagination__page c-pagination__page--gap">2-3</li>
      <li class="c-pagination__page">4</li>
      <li class="c-pagination__page">5</li>
      <li class="c-pagination__page is-current">6</li>
      <li class="c-pagination__page">7</li>
      <li class="c-pagination__page">8</li>
      <li class="c-pagination__page c-pagination__page--gap">9-10</li>
      <li class="c-pagination__page">11</li>
      <li class="c-pagination__page c-pagination__page--next">next</li>
    </ul>
  </div></li>
  <li class="u-mb-sm"><div class="u-display-inline-block u-ml">
    <ul class="c-pagination">
      <li class="c-pagination__page c-pagination__page--previous is-hidden">previous</li>
      <li class="c-pagination__page is-current">1</li>
      <li class="c-pagination__page">2</li>
      <li class="c-pagination__page">3</li>
      <li class="c-pagination__page">4</li>
      <li class="c-pagination__page">5</li>
      <li class="c-pagination__page">6</li>
      <li class="c-pagination__page">7</li>
      <li class="c-pagination__page">8</li>
      <li class="c-pagination__page">9</li>
      <li class="c-pagination__page c-pagination__page--next">next</li>
    </ul>
  </div></li>
  <li class="u-mb-sm"><div class="u-display-inline-block u-ml">
    <ul class="c-pagination">
      <li class="c-pagination__page c-pagination__page--previous">previous</li>
      <li class="c-pagination__page">1</li>
      <li class="c-pagination__page">2</li>
      <li class="c-pagination__page">3</li>
      <li class="c-pagination__page">4</li>
      <li class="c-pagination__page">5</li>
      <li class="c-pagination__page">6</li>
      <li class="c-pagination__page">7</li>
      <li class="c-pagination__page">8</li>
      <li class="c-pagination__page is-current">9</li>
      <li class="c-pagination__page c-pagination__page--next is-hidden">next</li>
    </ul>
  </div></li>
</ol>