Paginator
Paginator displays data in paged format and provides navigation between pages.
When to use
- Pagination is used for splitting up content or data into several pages, with control for navigating to the next or previous page.
Guidelines
- Provide large clickable areas.
- Identify the current page.
- Provide Previous and Next buttons.
- Use the First and Last buttons (where applicable). Put the First and Last links on the outside.
- Provide option to set the number of results per page.
Basic
Where a user can use links such as "next", "previous", and page numbers to navigate between pages that display one page of results at a time.
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link pre-next disabled" tabindex="-1" href="#">
<i class="ds ds-chevron-double-left"></i>
</a>
</li>
<li class="page-item">
<a class="page-link pre-next disabled" tabindex="-1" href="#">
<i class="ds ds-chevron-left"></i>
</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link pre-next-arrow" href="#">
<i class="ds ds-chevron-right"></i>
</a>
</li>
<li class="page-item">
<a class="page-link pre-next-arrow" href="#">
<i class="ds ds-chevron-double-right"></i>
</a>
</li>
<li class="page-item">
<div class="select">
<!-- <label class="form-label">Items per page:</label> -->
<select class="js-example-basic-filter form-control" name="state" data-minimum-results-for-search="Infinity">
<option value="AL">10</option>
<option value="WY">20</option>
</select>
</div>
</li>
</ul>
</nav>
Template
Templating allows overriding the default content of the UI elements.
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<div class="select d-flex justify-content-center align-items-center">
<label class="form-label me-2">Items per page: </label>
<select class="js-example-basic-filter form-control" name="state" data-minimum-results-for-search="Infinity">
<option value="AL">10</option>
<option value="WY">20</option>
</select>
</div>
</li>
<li class="page-item new-content">
<span>1-10 of 120</span>
</li>
<li class="page-item">
<a class="page-link pre-next disabled" tabindex="-1" href="#">
<i class="ds ds-chevron-left"></i>
</a>
</li>
<li class="page-item">
<a class="page-link pre-next-arrow" href="#">
<i class="ds ds-chevron-right"></i>
</a>
</li>
</ul>
</nav>
Accessibility
- While accessing through a keyboard, the focus goes to the pagination part, and the screen reader reads out that particular page number and by pressing enter it re-directs to that page.
- Must be given a unique accessible name via aria-label.
- The current page is indicated by aria-current="page"