No Results Found
Pagination allows customers to navigate between multiple pages worth of items in a single view.
<nav aria-labelledby="paginated-list">
<ul class="pagination" id="paginated-list">
<li class="pagination__item">
<a aria-label="Jump to the first page" class="pagination__text" href="#">First</a>
</li>
<li class="pagination__item">
<a rel="prev" aria-label="Go to the previous page" class="pagination__text pagination__text--prev" href="#">Prev</a>
</li>
<li class="pagination__item pagination__item--current">1</li>
<li class="pagination__item">
<a class="pagination__link" rel="next" aria-label="Page 2" href="#">2</a>
</li>
<li class="pagination__item">
<a class="pagination__link" aria-label="Page 3" href="#">3</a>
</li>
<li class="pagination__item">
<a class="pagination__link" aria-label="Page 4" href="#">4</a>
</li>
<li class="pagination__item pagination__gap">…</span>
<li class="pagination__item">
<a class="pagination__text pagination__text--next" rel="next" aria-label="Go to the next page" href="#">Next</a>
</li>
<li class="pagination__item">
<a class="pagination__text" aria-label="Jump to the last page" href="#">Last</a>
</li>
</ul>
</nav>
In most cases we opt for an infinite scroll pattern but for dense tabular data we opt for pagination. This keeps the user oriented on how to navigate such data.
Receives :focus
Link content should be available to screen readers