Figuration v4.4 is now available!

Pagination

Pagination provides multiple visual styles for grouping navigation of a series of related content.

Overview

Pagination links indicate a series of related content exists across multiple pages. Typically these are used where a multi-page approach to long lists of content improves general performance, such as in search results.

Basic Pagination

Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.

<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><a href="#" class="page-link">Previous</a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</nav>

Styled Pagination

Add some visual style to lists with a couple of modifier classes.

Spaced

Add a border around each .page-link and spaced them out a bit with .pagination-spaced.

<nav aria-label="Page navigation">
<ul class="pagination pagination-spaced">
<li class="page-item"><a href="#" class="page-link">Previous</a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</nav>

Group

Group pagination together in a large block of connected items that is hard to miss with .pagination-group.

<nav aria-label="Page navigation">
<ul class="pagination pagination-group">
<li class="page-item"><a href="#" class="page-link">Previous</a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</nav>

Using Icons

Want to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria- attributes.

<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item">
<a href="#" class="page-link" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item">
<a href="#" class="page-link" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

<nav aria-label="Page navigation">
<ul class="pagination pagination-spaced">
<li class="page-item">
<a href="#" class="page-link" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item">
<a href="#" class="page-link" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

<nav aria-label="Page navigation">
<ul class="pagination pagination-group">
<li class="page-item">
<a href="#" class="page-link" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item">
<a href="#" class="page-link" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

Disabled and Active States

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

Disabling Anchors

Please refer to the Accessiblity notes about disabled anchors.

<nav aria-label="...">
<ul class="pagination">
<li class="page-item">
<a href="#" class="page-link disabled" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item">
<a href="#" class="page-link active" aria-current="page">1</a>
</li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</nav>

<nav aria-label="...">
<ul class="pagination pagination-spaced">
<li class="page-item">
<a href="#" class="page-link disabled" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item">
<a href="#" class="page-link active" aria-current="page">1</a>
</li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</nav>

<nav aria-label="...">
<ul class="pagination pagination-group">
<li class="page-item">
<a href="#" class="page-link disabled" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item">
<a href="#" class="page-link active" aria-current="page">1</a>
</li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</nav>

You can optionally swap out active or disabled anchors for <span>, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.

<nav aria-label="...">
<ul class="pagination">
<li class="page-item">
<span class="page-link disabled" aria-disabled="true">Previous</span>
</li>
<li class="page-item">
<span class="page-link active">
1
<span class="sr-only">(current page)</span>
</span>
</li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</nav>

With Text

Add normal text to your pagination navigation by using .page-text. This class will adjust the alignment, spacing, and size the text to match the controls.

<nav aria-label="...">
<ul class="pagination">
<li class="page-item"><span class="page-link disabled" aria-disabled="true">Previous</span></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><span class="page-text">&hellip;</span></li>
<li class="page-item"><a href="#" class="page-link">98</a></li>
<li class="page-item"><a href="#" class="page-link">99</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</nav>

<nav aria-label="...">
<ul class="pagination pagination-spaced">
<li class="page-item"><span class="page-link disabled" aria-disabled="true">Previous</span></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><span class="page-text">&hellip;</span></li>
<li class="page-item"><a href="#" class="page-link">98</a></li>
<li class="page-item"><a href="#" class="page-link">99</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</nav>

<nav aria-label="...">
<ul class="pagination pagination-group">
<li class="page-item"><span class="page-link disabled" aria-disabled="true">Previous</span></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><span class="page-text">&hellip;</span></li>
<li class="page-item"><a href="#" class="page-link">98</a></li>
<li class="page-item"><a href="#" class="page-link">99</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</nav>

Sizes

Fancy larger or smaller pagination? Add .pagination-xsmall, .pagination-small, .pagination-large, or .pagination-xlarge for additional sizes.

<!-- Extra Large pagination -->
<nav aria-label="...">
<ul class="pagination pagination-group pagination-xlarge">
...
</ul>
</nav>

<!-- Large pagination -->
<nav aria-label="...">
<ul class="pagination pagination-group pagination-large">
...
</ul>
</nav>

<!-- Default pagination -->
<nav aria-label="...">
<ul class="pagination pagination-group">
...
</ul>
</nav>

<!-- Small pagination -->
<nav aria-label="...">
<ul class="pagination pagination-group pagination-small">
...
</ul>
</nav>

<!-- Extra Small pagination -->
<nav aria-label="...">
<ul class="pagination pagination-group pagination-xsmall">
...
</ul>
</nav>

Alignment

Change the alignment of pagination components using the flexbox utilities.

<nav aria-label="...">
<ul class="pagination pagination-group flex-center">
<li class="page-item"><a href="#" class="page-link">Previous</a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</nav>
<nav aria-label="...">
<ul class="pagination pagination-group flex-end">
<li class="page-item"><a href="#" class="page-link">Previous</a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</nav>
<nav aria-label="..." class="d-flex flex-between">
<ul class="pagination pagination-group">
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
</ul>

<ul class="pagination pagination-spaced">
<li class="page-item"><a href="#" class="page-link">Previous</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</nav>

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for pagination component.

Name Type Default Description
$enable-pagination boolean true Enable the generation of the pagination classes. Smaller segements of the pagination classes can be disabled with the following $enable-* variables.
$enable-pagination-spaced boolean true Enable the generation of the spaced pagination variant.
$enable-pagination-group boolean true Enable the generation of the pagination group variant.
$enable-pagination-sizing boolean true Enable the generation of the pagination sizing variants.
$pagination-margin-bottom string .5em Vertical spacing below a pagination container.
$pagination-line-height string $btn-line-height Line height for pagination items.
$pagination-padding-y string $btn-padding-y Vertical padding for pagination items.
$pagination-padding-x string .5em Horizontal padding for pagination items.
$pagination-border-width string $border-width Border width for pagination items.
$pagination-border-color string $btn-default-border-color Border color for pagination items.
$pagination-border-radius string $border-radius Border radius for pagination items.
$pagination-bg string $btn-default-bg Background color for pagination items.
$pagination-color string $btn-default-color Text color for pagination items.
$pagination-hover-bg string $btn-default-hover-bg Background color for pagination items in hover or focus state.
$pagination-hover-color string $btn-default-hover-color Text color for pagination items in hover or focus state.
$pagination-hover-border-color string $pagination-border-color Border color for pagination items in hover or focus state.
$pagination-active-color string $component-active-color Text color for pagination items in active state.
$pagination-active-bg string $component-active-bg Background color for pagination items in active state.
$pagination-disabled-color string $component-disabled-color Text color for pagination items in disabled state.
$pagination-disabled-bg string $component-disabled-bg Background color for pagination items in disabled state.
$pagination-spaced-margin-end string .25em Vertical spacing between items in spaced pagination.
$pagination-sizes map $component-sizes Values for pagination sizing variants.

Mixins

Here are the mixins related to pagination that we use to help generate our CSS. You can also uses these mixins to generate your own custom components or utilities.

pagination-size

Build a size variant for pagination.

@include pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius);
Argument Type Default Description
$padding-y string '' Vertical padding for pagination size variant.
$padding-x string none Horizontal padding for pagination size variant.
$font-size string none Font size for pagination size variant.
$line-height string none Line height for pagination size variant.
$border-radius string none Border radius for pagination size variant.