Pagination

Luma comes with a pagination component. We use the Bootstrap syntax with custom styling since some frameworks (such as Laravel) generate Bootstrap compliant pagination by default.

<nav aria-label="pagination">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">← Previous</a></li>
    <li class="page-item"><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" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">Next →</a></li>
  </ul>
</nav>

Active state

Add the active class to a page-item to indicate it is the currently active page:

<nav aria-label="pagination">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">← Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item active"><a class="page-link" href="#" aria-current="page">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">Next →</a></li>
  </ul>
</nav>

Alignment

Use the is-center class to horizontally center the pagination:

<nav aria-label="pagination">
  <ul class="pagination is-center">
    <li class="page-item"><a class="page-link" href="#">← Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item active"><a class="page-link" href="#" aria-current="page">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">Next →</a></li>
  </ul>
</nav>