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"><a href="#">Next</a></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 modifier 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.


VariableTypeDefault value
$pagination-backgroundcolortransparent
$pagination-borderborder1px solid transparent
$pagination-font-sizeunits0.875rem
$pagination-colorcolor$black
$pagination-line-heightunitless1.5
$pagination-marginunits0.125rem
$pagination-paddingpadding0.375rem 0.75rem
$pagination-padding-bottomunitscalc(0.375rem - 1px)
$pagination-active-backgroundcolor$primary
$pagination-active-colorcolorgetTextColor($primary)
$pagination-disabled-opacityunitless0.5
$pagination-hover-backgroundcolor#f5f5f5
$pagination-roundedunits50px
$pagination-rounded-marginunits0.25rem
$pagination-bordered-backgroundcolor$white
$pagination-bordered-radiusunits4px
$pagination-borderedborder1px solid $light-grey
$pagination-bordered-activecolor$primary
$pagination-bordered-hovercolordarken($light-grey, 10%)