Pagination

Responsive and flexible content pagination

You can create a pagination element with the pagination class and a single child ul tag.

<nav class="pagination">
  <ul>
    <li><a href="#">Previous</a></li>
    <li><a href="#">1</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="#">Next</a></li>
  </ul>
</nav>
Copy

Controls

Active

The is-active modifier can be used to signify the currently active page.

<nav class="pagination">
  <ul>
    <li><a href="#">Previous</a></li>
    <li><a href="#">1</a></li>
    <li class="is-active"><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="#">Next</a></li>
  </ul>
</nav>
Copy

Disabled

The is-disabled modifier can be used to grey out an item in the pagination.

<nav class="pagination">
  <ul>
    <li><a href="#">Previous</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li class="is-active"><a href="#">5</a></li>
    <li class="is-disabled">Next<</li>
  </ul>
</nav>
Copy

Alignment

Some of these modifiers are not specific to the Pagination module and can be found within the OrbitCSS global modifiers.

Center alignment

The has-centered modifier will position all of the content to the center of the pagination container.

<nav class="pagination has-centered">
  <ul>
    <li><a href="#">Previous</a></li>
    <li><a href="#">1</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="#">Next</a></li>
  </ul>
</nav>
Copy

Use the is-center if you only want to center-align the ul element. This can be useful if you have custom content within the pagination flexbox container.

Right alignment

The has-end modifier will align the contents from right to left.

<nav class="pagination has-end">
  <ul>
    <li><a href="#">Previous</a></li>
    <li><a href="#">1</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="#">Next</a></li>
  </ul>
</nav>
Copy

Use the is-end modifier if you only want to right-align the ul element. This can be useful if you have custom content within the pagination flexbox container.

<nav class="pagination">
  <span>Showing 1 to 10 of 200 entries</span>
  <ul class="is-end">
    <li><a href="#">Previous</a></li>
    <li><a href="#">1</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="#">Next</a></li>
  </ul>
</nav>
Copy

Style

Border

You can add a border to each of the list items with the has-border modifier.

<nav class="pagination has-border">
  <ul>
    <li><a href="#">1</a></li>
    <li class="is-active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</nav>
Copy

Round

Round each of the list items with the has-round modifier.

<nav class="pagination has-round">
  <ul>
    <li><a href="#">1</a></li>
    <li class="is-active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</nav>
Copy

Both the has-border and has-round modifiers can be used together.


Variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.

Variable Type Default Value
$pagination-background color transparent
$pagination-border border 1px solid transparent
$pagination-font-size units 0.875rem
$pagination-color color $black
$pagination-line-height unitless 1.5
$pagination-margin units 0.125rem
$pagination-padding padding 0.375rem 0.75rem
$pagination-padding-bottom units calc(0.375rem - 1px)
pagination-active-background color $primary
$pagination-active-color color getTextColor($primary)
$pagination-disabled-opacity unitless 0.5
$pagination-hover-background color #f5f5f5
$pagination-rounded units 50px
$pagination-rounded-margin units 0.25rem
$pagination-bordered-background color $white
$pagination-bordered-radius units 4px
$pagination-bordered border 1px solid $light-grey
$pagination-bordered-active color $primary
$pagination-bordered-hover color darken($light-grey, 10%)