Pagination
Pagination helps users to navigate through multiple pages
Example
<nav aria-label="Page navigation example">
<ul class="nj-pagination">
<li class="nj-pagination__item">
<a class="nj-pagination__link nj-pagination__link--prev" href="#" aria-label="Previous">
<i class="nj-pagination__nav material-icons">chevron_left</i>
</a>
</li>
<li class="nj-pagination__item"><a class="nj-pagination__link" href="#" aria-label="Page 1">1</a></li>
<li class="nj-pagination__item"><a class="nj-pagination__link" href="#" aria-label="Page 2">2</a></li>
<li class="nj-pagination__item nj-pagination__item--active"><a class="nj-pagination__link" href="#" aria-label="Page 3">3</a></li>
<li class="nj-pagination__item"><a class="nj-pagination__link" href="#" aria-label="Page 4">4</a></li>
<li class="nj-pagination__item"><a class="nj-pagination__link" href="#" aria-label="Page 5">5</a></li>
<li class="nj-pagination__item">
<a class="nj-pagination__link nj-pagination__link--next" href="#" aria-label="Next">
<i class="nj-pagination__nav material-icons">chevron_right</i>
</a>
</li>
</ul>
</nav>
How it works
Use modifier css class on the li
tag.
.nj-pagination__item--active
to set active the current page.nj-pagination__item--disable
to disable the previous/next page link (chevron)