Fluxo

Overview #

Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.

In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive aria-label for the <nav> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be aria-label="Search results pages".

<nav aria-label="Page navigation example">
  <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="#">Next</a></li>
  </ul>
</nav>

Working with Icon #

Looking 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.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <small><i class="fas fa-chevron-left"></i></small>
      </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="#">17</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <small><i class="fas fa-chevron-right"></i></small>
      </a>
    </li>
  </ul>
</nav>

Disabled and active states #

Pagination links are customizable for different circumstances. Use .disabled for links that appear un-clickable and .active to indicate the current page.

While the .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, that CSS property is not yet standardized and doesn’t account for keyboard navigation. As such, you should always add tabindex="-1" on disabled links and use custom JavaScript to fully disable their functionality.

<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
  <li class="page-item disabled">
    <a class="page-link" href="#" aria-label="Previous">
      <small><i class="fas fa-chevron-left"></i></small>
    </a>
  </li>
  <li class="page-item active"><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 disabled"><a class="page-link" href="#">...</a></li>
  <li class="page-item"><a class="page-link" href="#">17</a></li>
  <li class="page-item">
    <a class="page-link" href="#" aria-label="Next">
      <small><i class="fas fa-chevron-right"></i></small>
    </a>
  </li>
</ul>
</nav>

Alignment #

Change the alignment of pagination components with flexbox utilities.

<nav aria-label="Page navigation">
  <ul class="pagination justify-content-center">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <small><i class="fas fa-chevron-left"></i></small>
      </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="#">17</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <small><i class="fas fa-chevron-right"></i></small>
      </a>
    </li>
  </ul>
</nav>

<nav aria-label="Page navigation">
  <ul class="pagination justify-content-end">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <small><i class="fas fa-chevron-left"></i></small>
      </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="#">17</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <small><i class="fas fa-chevron-right"></i></small>
      </a>
    </li>
  </ul>
</nav>

<nav aria-label="Page navigation">
  <ul class="pagination justify-content-around">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <small><i class="fas fa-chevron-left"></i></small>
      </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="#">17</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <small><i class="fas fa-chevron-right"></i></small>
      </a>
    </li>
  </ul>
</nav>