Skip to main content
Experimental This website is used for testing – your feedback will help us to improve it.

Pagination

Overview

Use the .bsk-pagination class for navigating within large collections of items, such as lists or tables.

Use the .bsk-pager class as a simpler alternative to pagination.

Use the aria-label element so assistive technologies can tell each pagination or pager instance apart.

Heads up! Pagination and pagers are not yet fully styled, but will be in the next version of the Style Kit.

Variants

Default pagination

<nav aria-label="pagination-example-1">
  <ul class="bsk-pagination">
    <li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="bsk-active"><a href="#">1 <span class="bsk-sr-only">(current)</span></a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
  </ul>
</nav>

Simple pager

<nav aria-label="pager-example-1">
  <ul class="bsk-pager">
    <li><a href="#"><span aria-hidden="true">&larr;</span> Previous</a></li>
    <li><a href="#">Next <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Sizes

Add one of these classes to alter the size of a pagination instance:

Pagination Size Pagination Group Size Class
Large .bsk-pagination-lg
Small .bsk-pagination-sm

These classes don’t apply to the pager.

<nav aria-label="pagination-example-2">
  <ul class="bsk-pagination bsk-pagination-sm">
    <li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li><a href="#">1 <span class="bsk-sr-only">(current)</span></a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
  </ul>
</nav>
<nav aria-label="pagination-example-3">
  <ul class="bsk-pagination">
    <li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li><a href="#">1 <span class="bsk-sr-only">(current)</span></a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
  </ul>
</nav>
<nav aria-label="pagination-example-4">
  <ul class="bsk-pagination bsk-pagination-lg">
    <li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li><a href="#">1 <span class="bsk-sr-only">(current)</span></a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
  </ul>
</nav>

States

Active item

Add the .bsk-active class to indicate the current pagination item.

The active state doesn’t apply to the pager.

<nav aria-label="pagination-example-5">
  <ul class="bsk-pagination">
    <li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="bsk-active"><a href="#">1 <span class="bsk-sr-only">(current)</span></a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
  </ul>
</nav>

Disabled item

Add the .bsk-disabled class to indicate unavailable items or actions.

It is not safe to rely on this state to prevent users activating disabled actions

Browsers may not enforce these properties, or users may trivially edit the DOM. Server side protections must be used for dangerous actions.

<nav aria-label="pagination-example-6">
  <ul class="bsk-pagination">
    <li class="bsk-disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li><a href="#">1 <span class="bsk-sr-only">(current)</span></a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
  </ul>
</nav>
<nav aria-label="pager-example-2">
  <ul class="bsk-pager">
    <li class="bsk-disabled"><a href="#"><span aria-hidden="true">&larr;</span> Previous</a></li>
    <li><a href="#">Next <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Layouts

Pager alignment

Add the .bsk-previous and .bsk-next classes to position pager elements to the sides.

<nav aria-label="pager-example-3">
  <ul class="bsk-pager">
    <li class="bsk-previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="bsk-next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>