Pagination

Provide pagination links for your site or app with the multi-page pagination component.

Default pagination

Simple pagination based on the bootstrap pagination.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="prev page-item disabled">
      <a class="page-link" href="#" aria-label="Previous">
        <span class="icon-controller" aria-hidden="true"><i class="fas fa-chevron-left"></i></span>
      </a>
    </li>
    <li class="page-item active"><span>1</span></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" href="#">4</a></li>
    <li class="disabled"><span></span></li>
    <li class="page-item"><a class="page-link" href="#">8</a></li>
    <li class="page-item"><a class="page-link" href="#">9</a></li>
    <li class="next page-item ">
      <a class="page-link" href="#" aria-label="Next">
        <span class="icon-controller" aria-hidden="true"><i class="fas fa-chevron-right"></i></span>
      </a>
    </li>
  </ul>
</nav>
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="prev page-item disabled">
      <a class="page-link" href="#" tabindex="-1"><i class="fas fa-arrow-left controller-icon"></i>Previous </a>
    </li>
    <li class="page-item active"><span>1</span></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" href="#">4</a></li>
    <li class="disabled"><span></span></li>
    <li class="page-item"><a class="page-link" href="#">8</a></li>
    <li class="page-item"><a class="page-link" href="#">9</a></li>
    <li class="next page-item">
      <a class="page-link" href="#">Next <i class="fas fa-arrow-right controller-icon"></i></a>
    </li>
  </ul>
</nav>