Pagination
Pagination provides multiple visual styles for grouping navigation of a series of related content.
Contents
- Overview
- Basic Pagination
- Styled Pagination
- Using Icons
- Disabled and Active States
- With Text
- Sizes
- Alignment
- SASS Reference
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.
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
.
Group
Group pagination together in a large block of connected items that is hard to miss with .pagination-group
.
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.
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.
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.
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.
Sizes
Fancy larger or smaller pagination? Add .pagination-xsmall
, .pagination-small
, .pagination-large
, or .pagination-xlarge
for additional sizes.
Alignment
Change the alignment of pagination components using the flexbox utilities.
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.
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. |