Pagination

Divides content into multiple pages through a list of numerical links.

Top

Usage

The pagination markup makes use of nav and ol elements for semantic structuring. Each link within the pagination should point to a specific page for the list of results.

<nav class="pagination">
    <ol>
        <li><a href="?page=1" class="button">1</a></li>
        <li class="is-active"><a href="?page=2" class="button">2</a></li>
        <li><a href="?page=3" class="button">3</a></li>
    </ol>
</nav>

The links in the pagination can be placed wherever and however we please. Require next and previous links? Add them. What about first and last links? Add them also.

In the example above, we are using a .button. This is not required by pagination, but can be used for quick mocking.

By default, all links in a pagination list will be spaced out evenly. To group all links into a single solid bar, use the .pagination--grouped modifier.

<nav class="pagination pagination--grouped">
    ...
</nav>

Grouped paginations can also make use of certain effects, like .round, .pill, .oval, and .skew.

<nav class="pagination pagination--grouped round">
    ...
</nav>
All effects (excluding round) are disabled by default. Modify the $pagination-effects Sass variable to enable them.

Notes

  • The current page in the list should have an .is-active on the parent li.
Top

ARIA

The navigation role and the appropriate aria-* attributes are required when supporting ARIA.

<nav class="pagination" role="navigation" aria-label="Paged Navigation">
    ...
</nav>
Top

Variables

Variable Default Description
$pagination-class .pagination CSS class name for the pagination list.
$pagination-class-modifier-grouped .pagination--grouped CSS class name for the pagination grouped modifier.
$pagination-effects () List of effects to include in the CSS output. Accepts oval, pill, and skew.
$pagination-modifiers ("grouped") List of modifiers to include in the CSS output. Accepts grouped.