Pagination

Pagination is a type of navigation that lets users click through pages of search results, products, or other related items.

Basics

A pagination list is just a <ul> with the class .pagination, and a series of <li>/<a> pairs. Add the class .current to an <li> to mark the current page, or .disabled to add disabled styles to a link.

Note that the list is nested inside a <nav> with the attributes aria-label="Pagination". This explains the purpose of the component to assistive technologies.

Extra screen reader-only text should also be added to a pagination element. In the below example, users reading the page will just see "Next" and "Previous", but screen readers will read it as "Next page" and "Previous page". Additionally, the text for the current page will read as "You're on page one".

Watch this part in video

edit on codepen button
<nav aria-label="Pagination">
  <ul class="pagination">
    <li class="pagination-previous disabled">Previous <span class="show-for-sr">page</span></li>
    <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
    <li><a href="#" aria-label="Page 2">2</a></li>
    <li><a href="#" aria-label="Page 3">3</a></li>
    <li><a href="#" aria-label="Page 4">4</a></li>
    <li class="ellipsis" aria-hidden="true"></li>
    <li><a href="#" aria-label="Page 12">12</a></li>
    <li><a href="#" aria-label="Page 13">13</a></li>
    <li class="pagination-next"><a href="#" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>
  </ul>
</nav>

Centered

The items in a pagination list are display: inline-block, which makes centering them easy. Use our built-in .text-center class, or add text-align: center in your CSS.

Watch this part in video

edit on codepen button
<nav aria-label="Pagination">
  <ul class="pagination text-center">
    <li class="pagination-previous disabled">Previous</li>
    <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
    <li><a href="#" aria-label="Page 2">2</a></li>
    <li><a href="#" aria-label="Page 3">3</a></li>
    <li><a href="#" aria-label="Page 4">4</a></li>
    <li class="ellipsis"></li>
    <li><a href="#" aria-label="Page 12">12</a></li>
    <li><a href="#" aria-label="Page 13">13</a></li>
    <li class="pagination-next"><a href="#" aria-label="Next page">Next</a></li>
  </ul>
</nav>

Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

NameTypeDefault ValueDescription
$pagination-font-size Number rem-calc(14)

Font size of pagination items.

$pagination-margin-bottom Number $global-margin

Default bottom margin of the pagination object.

$pagination-item-color Color $black

Text color of pagination items.

$pagination-item-padding Number rem-calc(3 10)

Padding inside of pagination items.

$pagination-item-spacing Number rem-calc(1)

Right margin to separate pagination items.

$pagination-radius Number $global-radius

Default radius for pagination items.

$pagination-item-background-hover Color $light-gray

Background color of pagination items on hover.

$pagination-item-background-current Color $primary-color

Background color of pagination item for the current page.

$pagination-item-color-current Color $white

Text color of the pagination item for the current page.

$pagination-item-color-disabled Color $medium-gray

Text color of a disabled pagination item.

$pagination-ellipsis-color Color $black

Color of the ellipsis in a pagination menu.

$pagination-mobile-items Boolean false

If false, don't display page number links on mobile, only next/previous links and optionally current page number.

$pagination-mobile-current-item Boolean false

If true, display the current page number on mobile even if $pagination-mobile-items is set to false. This parameter will only override the visibility setting of the current item for $pagination-mobile-items: false;, it will not affect the current page number visibility when $pagination-mobile-items is set to true.

$pagination-arrows Boolean true

If true, arrows are added to the next and previous links of pagination.

$pagination-arrow-previous String '\00AB'

Content for the previous arrow when $pagination-arrows is true

$pagination-arrow-next String '\00BB'

Content for the next arrow when $pagination-arrows is true


Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

pagination-container

@include pagination-container;

Adds styles for a pagination container. Apply this to a <ul>.


pagination-item-current

@include pagination-item-current;

Adds styles for the current pagination item. Apply this to an <a>.


pagination-item-disabled

@include pagination-item-disabled;

Adds styles for a disabled pagination item. Apply this to an <a>.


pagination-ellipsis

@include pagination-ellipsis;

Adds styles for an ellipsis for use in a pagination list.