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 width="16" height="16" viewBox="0 0 16 16">
          <path fill="currentColor" d="M10.5,15a1,1,0,0,1-.77-.36L4.87,8.8a1.25,1.25,0,0,1,0-1.61L9.73,1.36a1,1,0,0,1,1.54,1.28L6.8,8l4.47,5.36A1,1,0,0,1,10.5,15ZM6.41,8.47h0Zm0-1h0Z"/>
        </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 width="16" height="16" viewBox="0 0 16 16">
          <path fill="currentColor" d="M5.5,15a1,1,0,0,1-.77-1.64L9.2,8,4.73,2.64A1,1,0,0,1,6.27,1.36L11.13,7.2a1.25,1.25,0,0,1,0,1.61L6.27,14.64A1,1,0,0,1,5.5,15ZM9.6,8.48h0Zm0-1h0Z"/>
        </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 width="16" height="16" viewBox="0 0 16 16">
        <path fill="currentColor" d="M10.5,15a1,1,0,0,1-.77-.36L4.87,8.8a1.25,1.25,0,0,1,0-1.61L9.73,1.36a1,1,0,0,1,1.54,1.28L6.8,8l4.47,5.36A1,1,0,0,1,10.5,15ZM6.41,8.47h0Zm0-1h0Z"/>
      </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 width="16" height="16" viewBox="0 0 16 16">
          <path fill="currentColor" d="M5.5,15a1,1,0,0,1-.77-1.64L9.2,8,4.73,2.64A1,1,0,0,1,6.27,1.36L11.13,7.2a1.25,1.25,0,0,1,0,1.61L6.27,14.64A1,1,0,0,1,5.5,15ZM9.6,8.48h0Zm0-1h0Z"/>
        </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 width="16" height="16" viewBox="0 0 16 16">
          <path fill="currentColor" d="M10.5,15a1,1,0,0,1-.77-.36L4.87,8.8a1.25,1.25,0,0,1,0-1.61L9.73,1.36a1,1,0,0,1,1.54,1.28L6.8,8l4.47,5.36A1,1,0,0,1,10.5,15ZM6.41,8.47h0Zm0-1h0Z"/>
        </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 width="16" height="16" viewBox="0 0 16 16">
        <path fill="currentColor" d="M5.5,15a1,1,0,0,1-.77-1.64L9.2,8,4.73,2.64A1,1,0,0,1,6.27,1.36L11.13,7.2a1.25,1.25,0,0,1,0,1.61L6.27,14.64A1,1,0,0,1,5.5,15ZM9.6,8.48h0Zm0-1h0Z"/>
      </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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
          <g fill="currentColor">
            <path d="M13,13.8a1,1,0,0,1-.77-.36L8.37,8.8a1.25,1.25,0,0,1,0-1.61l3.86-4.64a1,1,0,0,1,1.54,1.28L10.3,8l3.47,4.16A1,1,0,0,1,13,13.8ZM9.91,8.47h0Zm0-1h0Z"/>
            <path d="M7,13.8a1,1,0,0,1-.77-.36L2.37,8.8a1.25,1.25,0,0,1,0-1.61L6.23,2.56A1,1,0,0,1,7.77,3.84L4.3,8l3.47,4.16A1,1,0,0,1,7,13.8ZM3.91,8.47h0Zm0-1h0Z"/>
          </g>
        </svg>
      </a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#" aria-label="Go to previous page">
        <svg width="16" height="16" viewBox="0 0 16 16">
          <path fill="currentColor" d="M10.5,15a1,1,0,0,1-.77-.36L4.87,8.8a1.25,1.25,0,0,1,0-1.61L9.73,1.36a1,1,0,0,1,1.54,1.28L6.8,8l4.47,5.36A1,1,0,0,1,10.5,15ZM6.41,8.47h0Zm0-1h0Z"/>
        </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 width="16" height="16" viewBox="0 0 16 16">
          <path fill="currentColor" d="M5.5,15a1,1,0,0,1-.77-1.64L9.2,8,4.73,2.64A1,1,0,0,1,6.27,1.36L11.13,7.2a1.25,1.25,0,0,1,0,1.61L6.27,14.64A1,1,0,0,1,5.5,15ZM9.6,8.48h0Zm0-1h0Z"/>
        </svg>
      </a>
    </li>
    <li class="rvt-pagination__item">
      <a href="#0" aria-label="Go to last page">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
          <g fill="currentColor">
            <path d="M3,13.8a1,1,0,0,1-.77-1.64L5.7,8,2.23,3.84A1,1,0,0,1,3.77,2.56L7.63,7.2a1.25,1.25,0,0,1,0,1.61L3.77,13.44A1,1,0,0,1,3,13.8ZM6.1,8.48h0Zm0-1h0Z"/>
            <path d="M9,13.8a1,1,0,0,1-.77-1.64L11.7,8,8.23,3.84A1,1,0,0,1,9.77,2.56L13.63,7.2a1.25,1.25,0,0,1,0,1.61L9.77,13.44A1,1,0,0,1,9,13.8Zm3.1-5.32h0Zm0-1h0Z"/>
          </g>
        </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.