Pagination

Pagination links indicate a series of related content exists across multiple pages. Typically these are used where a multi-page approach to long lists of content improves general performance, such as in search results.

Contents

Overview

Pagination is designed to be a large block of connected links that is hard to miss, easily scalable, and provide large click areas. It is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item"><a href="#" class="page-link">Previous</a></li>
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item"><a href="#" class="page-link">Next</a></li>
  </ul>
</nav>

Using Icons

Want to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria- attributes and the .sr-only utility.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item">
      <a href="#" class="page-link" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

Disabled and Active States

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

Disabling Anchors

Please refer to the Accessiblity notes about disabled anchors.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item">
      <a href="#" class="page-link disabled" tabindex="-1">Previous</a>
    </li>
    <li class="page-item">
      <a href="#" class="page-link active">
        1
        <span class="sr-only">(current)</span>
      </a>
    </li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item"><a href="#" class="page-link">Next</a></li>
  </ul>
</nav>

You can optionally swap out active or disabled anchors for <span>, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item">
      <span class="page-link disabled">Previous</span>
    </li>
    <li class="page-item">
      <span class="page-link active">
        1
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item"><a href="#" class="page-link">Next</a></li>
  </ul>
</nav>

With Text

Add normal text to your pagination navigation by using .page-text. This class will adjust the alignment, spacing, and size the text to match the controls.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item"><span class="page-link disabled">Previous</span></li>
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><span class="page-text">&hellip;</span></li>
    <li class="page-item"><a href="#" class="page-link">98</a></li>
    <li class="page-item"><a href="#" class="page-link">99</a></li>
    <li class="page-item"><a href="#" class="page-link">Next</a></li>
  </ul>
</nav>

Sizes

Fancy larger or smaller pagination? Add .pagination-xs, .pagination-sm, .pagination-lg, or .pagination-xl for additional sizes.

<!-- Extra Large pagination -->
<nav aria-label="...">
  <ul class="pagination pagination-xl">
    ...
  </ul>
</nav>

<!-- Large pagination -->
<nav aria-label="...">
  <ul class="pagination pagination-lg">
    ...
  </ul>
</nav>

<!-- Default pagination -->
<nav aria-label="...">
  <ul class="pagination">
    ...
  </ul>
</nav>

<!-- Small pagination -->
<nav aria-label="...">
  <ul class="pagination pagination-sm">
    ...
  </ul>
</nav>

<!-- Extra Small pagination -->
<nav aria-label="...">
  <ul class="pagination pagination-xs">
    ...
  </ul>
</nav>

Alignment

Change the alignment of pagination components using the flexbox utilities.

<nav aria-label="...">
  <ul class="pagination flex-center">
    <li class="page-item"><span class="page-link disabled">Previous</span></li>
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item"><a href="#" class="page-link">Next</a></li>
  </ul>
</nav>
<nav aria-label="...">
  <ul class="pagination flex-end">
    <li class="page-item"><span class="page-link disabled">Previous</span></li>
    <li class="page-item"><a href="#" class="page-link">1</a></li>
    <li class="page-item"><a href="#" class="page-link">2</a></li>
    <li class="page-item"><a href="#" class="page-link">3</a></li>
    <li class="page-item"><a href="#" class="page-link">Next</a></li>
  </ul>
</nav>