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.