Pagination

Pagination controls for navigating through pages of content.

Markup

<nav aria-label="Pagination">
  <ul class="af-pagination">
    <li class="af-pagination-item">
      <a href="#" class="af-pagination-link" aria-disabled="true">
        Previous
      </a>
    </li>
    <li class="af-pagination-item">
      <a href="#" class="af-pagination-link">
        1
      </a>
    </li>
    <li class="af-pagination-item">
      <a href="#" class="af-pagination-link" aria-current="page">
        2
      </a>
    </li>
    <li class="af-pagination-item">
      <a href="#" class="af-pagination-link">
        3
      </a>
    </li>
    <li class="af-pagination-item">
      <a href="#" class="af-pagination-link">
        Next
      </a>
    </li>
  </ul>
</nav>

Live example

• Previous

• 1

• 2

• 3

• Next