Skip to main content
Rivet Design System Indiana University

Pagination

Allow users to move between multiple pages of content

Overview #

Use the pagination component to allow users to move between multiple pages of content.

Pagination is often used when showing search results, archived content like news stories, or database records.

Examples #


Open in new window
Copy link to example 
<nav role="navigation" aria-label="More pages of items">
  <ul class="rvt-pagination">
    <li class="rvt-pagination__item">
      <a href="#" aria-label="Go to previous page">
        <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M9.737.854 3.69 8l6.047 7.146 1.526-1.292L6.31 8l4.953-5.854L9.737.854Z"></path></svg>
      </a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Page 1">1</a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Page 2" aria-current="page">2</a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Page 3">3</a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Page 4">4</a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Page 5">5</a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Go to next page">
        <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M6.263 15.146 12.31 8 6.263.854 4.737 2.146 9.69 8l-4.953 5.854 1.526 1.292Z"></path></svg>
      </a>
    </li>
  </ul>
</nav>
Open in new window
Copy link to example 
<nav role="navigation" aria-label="More pages of items">
  <ul class="rvt-pagination">
    <li class="rvt-pagination__item" aria-label="No previous page">
      <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M9.737.854 3.69 8l6.047 7.146 1.526-1.292L6.31 8l4.953-5.854L9.737.854Z"></path></svg>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Page 1" aria-current="page">1</a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Page 2">2</a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Page 3">3</a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Page 4">4</a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Page 5">5</a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Go to next page">
        <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M6.263 15.146 12.31 8 6.263.854 4.737 2.146 9.69 8l-4.953 5.854 1.526 1.292Z"></path></svg>
      </a>
    </li>
  </ul>
</nav>
Open in new window
Copy link to example 
<nav role="navigation" aria-label="More pages of items">
  <ul class="rvt-pagination">
    <li class="rvt-pagination__item">
      <a href="#" aria-label="Go to previous page">
        <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M9.737.854 3.69 8l6.047 7.146 1.526-1.292L6.31 8l4.953-5.854L9.737.854Z"></path></svg>
      </a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Page 1">1</a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Page 2">2</a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Page 3">3</a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Page 4">4</a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Page 5" aria-current="page">5</a>
    </li>
    <li class="rvt-pagination__item" aria-label="No next page">
      <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M6.263 15.146 12.31 8 6.263.854 4.737 2.146 9.69 8l-4.953 5.854 1.526 1.292Z"></path></svg>
    </li>
  </ul>
</nav>
Open in new window
Copy link to example 
<nav role="navigation" aria-label="More pages of items">
  <ul class="rvt-pagination">
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Go to first page">
        <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M.586 8 7 14.414 8.414 13l-5-5 5-5L7 1.586.586 8Z"></path><path d="M6.586 8 13 14.414 14.414 13l-5-5 5-5L13 1.586 6.586 8Z"></path></svg>
      </a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#" aria-label="Go to previous page">
        <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M9.737.854 3.69 8l6.047 7.146 1.526-1.292L6.31 8l4.953-5.854L9.737.854Z"></path></svg>
      </a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Page 6">6</a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Page 7">7</a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Page 8" aria-current="page">8</a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Page 9">9</a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Page 10">10</a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Go to next page">
        <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M6.263 15.146 12.31 8 6.263.854 4.737 2.146 9.69 8l-4.953 5.854 1.526 1.292Z"></path></svg>
      </a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Go to last page">
        <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M9.414 8 3 1.586 1.586 3l5 5-5 5L3 14.414 9.414 8Z"></path><path d="M15.414 8 9 1.586 7.586 3l5 5-5 5L9 14.414 15.414 8Z"></path></svg>
      </a>
    </li>
  </ul>
</nav>

Usage #

Do

  • Use to split large sets of data across multiple pages to reduce load times and make content easier to find
  • Provide a link to the first and last page of results

Don't

  • Use for smaller sets of data that could fit on a single page
  • Use icons other than the arrows shown in the code examples

Accessibility #

  • Use a meaningful ARIA label. Change the value of the aria-label attribute from “Default results pages” to a value that clearly describes the type of content being paginated.