Pager

The pager provides a responsive, flexible pager for standard numerical pagination.

Examples and Code

Select exampleDefault

Open Full Example

<ul class="pager">
  <li class="pager__item">
    <a title="Go to first page" href="/admin/content">« first</a>
  </li>
  <li class="pager__item">
    <a title="Go to previous page" href="/admin/content?page=1">‹ previous</a>
  </li>
  <li class="pager__item">
    <a title="Go to page 1" href="/admin/content">1</a>
  </li>
  <li class="pager__item">
    <a title="Go to page 2" href="/admin/content?page=1">2</a>
  </li>
  <li class="pager__current-item">3</li>
  <li class="pager__item">
    <a title="Go to page 4" href="/admin/content?page=3">4</a>
  </li>
  <li class="pager__item">
    <a title="Go to page 5" href="/admin/content?page=4">5</a>
  </li>
  <li class="pager__item">
    <a title="Go to next page" href="/admin/content?page=3">next ›</a>
  </li>
  <li class="pager__item">
    <a title="Go to last page" href="/admin/content?page=4">last »</a>
  </li>
</ul>

Usage

Add a list item for each page in the pager. The current page should be a plain list item with the class pager__current-item and all other pages items should use the pager__item class and have a link inside them linking to that page.

Guidance

When to Use Pagers

• For multipage listings
• For dynamic reports with many records

When to Consider Another Component

• For alphabetical listings: Use the alphabetical pager component instead.