Home
Components
Pagination

Pagination

Use pagination to link to additional content when the number of items in a group is greater than what can be displayed on a single page.

Use the disabled attribute on a button when the pagination list cannot be advanced any further in one direction. Use aria-current="page" on a list item to highlight the current page. Use data-style="small" for a smaller version.

Example
Pagination with three pages in regular and small sizes.

HTML

<ol role="list" class="pv-pagination">
  <li>
    <button type="button" disabled>
      <svg aria-hidden="true" class="pv-icon">
      <title>chevrons-left</title>
      <use xlink:href="#chevrons-left"></use>
    </svg>
    </button>
  </li>
  <li>
    <button type="button" disabled>
      <svg aria-hidden="true" class="pv-icon">
      <title>chevron-left</title>
      <use xlink:href="#chevron-left"></use>
    </svg>
    </button>
  </li>
  <li aria-current="page">
    <button type="button">1</button>
  </li>
  <li>
    <button type="button">2</button>
  </li>
  <li>
    <button type="button">3</button>
  </li>
  <li>
    <button type="button">
      <svg aria-hidden="true" class="pv-icon">
      <title>chevron-right</title>
      <use xlink:href="#chevron-right"></use>
    </svg>
    </button>
  </li>
  <li>
    <button type="button">
      <svg aria-hidden="true" class="pv-icon">
      <title>chevrons-right</title>
      <use xlink:href="#chevrons-right"></use>
    </svg>
    </button>
  </li>
</ol>
<ol role="list" class="pv-pagination" data-style="small">
  <li>
    <button type="button" disabled>
      <svg aria-hidden="true" class="pv-icon">
      <title>chevrons-left</title>
      <use xlink:href="#chevrons-left"></use>
    </svg>
    </button>
  </li>
  <li>
    <button type="button" disabled>
      <svg aria-hidden="true" class="pv-icon">
      <title>chevron-left</title>
      <use xlink:href="#chevron-left"></use>
    </svg>
    </button>
  </li>
  <li aria-current="page">
    <button type="button">1</button>
  </li>
  <li>
    <button type="button">2</button>
  </li>
  <li>
    <button type="button">3</button>
  </li>
  <li>
    <button type="button">
      <svg aria-hidden="true" class="pv-icon">
      <title>chevron-right</title>
      <use xlink:href="#chevron-right"></use>
    </svg>
    </button>
  </li>
  <li>
    <button type="button">
      <svg aria-hidden="true" class="pv-icon">
      <title>chevrons-right</title>
      <use xlink:href="#chevrons-right"></use>
    </svg>
    </button>
  </li>
</ol>