Pagination
Definition
Pagination is used to indicate a series of related content across multiple pages, to which users can navigate.
Description
Pagination is designed to help users move through a large set of pages. The Pagination Bar consists of numbered links for pages, Next and Previous links, and sometimes overflow indicators.
Use
Pagination Full Example with Code
Overflow indicators are shown in the second and sixth slots of the pagination bar.
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item previous">
<a
class="page-link"
href="#"
aria-label="Go to previous page"
tabindex="-1"
><svg
class="icon-inline icon-xs"
xmlns="http://www.w3.org/2000/svg"
height="1em"
viewBox="0 0 320 512">
<path
d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z" />
</svg>
Previous</a
>
</li>
<li class="page-item">
<a class="page-link" href="#/page1" aria-label="Go to page 1">1</a>
</li>
<li class="page-item">
<div class="page-link">…</div>
</li>
<li class="page-item">
<a class="page-link" href="#/page9" aria-label="Go to page 9">9</a>
</li>
<li class="page-item active">
<a
class="page-link"
href="#/page10"
aria-current="page"
aria-label="Go to page "
>10</a
>
</li>
<li class="page-item">
<a class="page-link" href="#/page11#" aria-label="Go to page 11">11</a>
</li>
<li class="page-item">
<div class="page-link">…</div>
</li>
<li class="page-item">
<a class="page-link" href="#/page24" aria-label="Go to page 24">24</a>
</li>
<li class="page-item next">
<a class="page-link" href="#" aria-label="Go to next page"
>Next
<svg
class="icon-inline icon-xs"
xmlns="http://www.w3.org/2000/svg"
height="1em"
viewBox="0 0 320 512">
<path
d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
</svg>
</a>
</li>
</ul>
</nav>Overflow Indicator
The overflow indicator is not a button but a container with a horizontal ellipsis (three dots) inside. It appears next to other page items and is used when there are too many pages to display within the available space.
- …
Selected Page and Overflow
The pagination bar ensures that there is no overflow indicator next to the currently selected page. This avoids confusion and keeps the user informed about their current position.
Hidden 'Previous' and 'Next' Links
The 'Previous' link is hidden on the first page of the set to prevent navigating to a non-existent previous page.
The 'Next' link is hidden on the last page of the set to prevent navigating beyond the available pages.
Small Screen Adjustment
To fit on a small screen, the Previous and Next buttons are hidden.
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item previous">
<a
class="page-link"
href="#"
aria-label="Go to previous page"
tabindex="-1"
><svg
class="icon-inline icon-xs"
xmlns="http://www.w3.org/2000/svg"
height="1em"
viewBox="0 0 320 512">
<path
d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z" />
</svg>
Previous</a
>
</li>
<li class="page-item">
<a class="page-link" href="#/page1" aria-label="Go to page 1">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#/page2" aria-label="Go to page 2">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#/page3" aria-label="Go to page 3">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#/page4#" aria-label="Go to page 4">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#/page5" aria-label="Go to page 5">5</a>
</li>
<li class="page-item active">
<a class="page-link" href="#/page6" aria-current="page">6</a>
</li>
</ul>
</nav><nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item active">
<a class="page-link" href="#/page1" aria-current="page">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#/page2" aria-label="Go to page 2">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#/page3" aria-label="Go to page 3">3</a>
</li>
<li class="page-item next">
<a class="page-link" href="#" aria-label="Go to next page"
>Next
<svg
class="icon-inline icon-xs"
xmlns="http://www.w3.org/2000/svg"
height="1em"
viewBox="0 0 320 512">
<path
d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
</svg>
</a>
</li>
</ul>
</nav>Optimal Slot Adjustment
If there are seven (7) or fewer pages, do not show overflow indicators.
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#/page1" aria-label="Go to page 1">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#/page2" aria-label="Go to page 2">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="#/page3" aria-current="page">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#/page4#" aria-label="Go to page 4">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#/page5" aria-label="Go to page 5">5</a>
</li>
<li class="page-item">
<a class="page-link" href="#/page6" aria-label="Go to page 6">6</a>
</li>
<li class="page-item">
<a class="page-link" href="#/page7" aria-label="Go to page 7">7</a>
</li>
</ul>
</nav>Accessibility Considerations
-
aria-current="page"should be used to inform the assistive technology user what has been indicated via styling. -
Use an
aria-labelto help screenreaders with the intention of the numbered links.aria-label="Go to page $n"
Guidelines/Restrictions
- Use pagination when there are too many results to show on the one page
- Commonly used for things like table listings, search results, and directories
- Provide large clickable areas
- Identify the current page
- Provide Previous and Next links