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)