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

<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

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

Name	Type	Default Value	Description
`$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.