Skip to main content

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 #


<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>
<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>
<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>
<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.