Pagination

Pagination helps users to navigate through multiple pages.

Angular

React

Vanilla

Figma

Last updated v5.0.0

Example

<nav aria-label="Page navigation example" role="navigation">
  <ul class="nj-pagination">
    <li class="nj-pagination__item">
      <button type="button" class="nj-icon-btn nj-icon-btn--secondary nj-icon-btn--lg">
        <span class="nj-sr-only">Previous page</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">chevron_left</span>
      </button>
    </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-current="true" 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"><i class="nj-pagination__more material-icons">more_horiz</i></li>
    <li class="nj-pagination__item"><a class="nj-pagination__link" href="#" aria-label="Page 20">20</a></li>
    <li class="nj-pagination__item">
      <button type="button" class="nj-icon-btn nj-icon-btn--secondary nj-icon-btn--lg">
        <span class="nj-sr-only">Next page</span>
        <span aria-hidden="true" class="nj-icon-btn__icon material-icons">chevron_right</span>
      </button>
    </li>
  </ul>
</nav>

How it works

Use modifier css class on the li tag.

.nj-pagination__item--active to set active the current page
Use the disabled attribute on the button to disable the previous/next page link (chevron)

Navbar

Progress