Patternfly Logo

Pagination

Examples

Top

Top expanded

Top sticky

Bottom

Bottom sticky

Top disabled

Compact

Documentation

Note: <button> or <a> elements can be used in .pf-c-pagination__nav-page-select.

Accessibility

AttributeApplied toOutcome
aria-label.pf-c-pagination__navProvides an accessible name for pagination navigation element. Required

Pagination nav input

AttributeApplied toOutcome
type="number".pf-c-pagination > .pf-c-form-controlDefines a field as a number. Required
value.pf-c-pagination__nav-page-select > .pf-c-form-controlProvides initial integer value. Required
min.pf-c-pagination__nav-page-select > .pf-c-form-controlProvides minimum integer value. Required
max.pf-c-pagination__nav-page-select > .pf-c-form-controlProvides max integer value. Required

Usage

ClassApplied toOutcome
.pf-c-pagination<div>Initiates pagination.
.pf-c-pagination__current<div>Initiates element to display currently displayed items for use in responsive view. Only needed for default pagination, not .pf-m-bottom.
.pf-c-pagination__total-items<div>Initiates element to replace the options menu on mobile.
.pf-c-pagination__nav<nav>Initiates pagination nav.
.pf-c-pagination__nav-control<div>Initiates pagination nav control.
.pf-c-pagination__nav-page-select<div>Initiates pagination nav page select.
.pf-m-bottom.pf-c-paginationModifies for bottom pagination component styles.
.pf-m-compact.pf-c-paginationModifies for compact pagination component styles.
.pf-m-static.pf-c-pagination.pf-m-bottomModifies bottom pagination to not be positioned sticky on mobile.
.pf-m-sticky.pf-c-paginationModifies the pagination to be sticky to its container. It will be sticky to the top of the container by default, and sticky to the bottom of the container when applied to .pf-c-pagination.pf-m-bottom.
.pf-m-first.pf-c-pagination__nav-controlIndicates the control is for the first page button.
.pf-m-prev.pf-c-pagination__nav-controlIndicates the control is for the previous page button.
.pf-m-next.pf-c-pagination__nav-controlIndicates the control is for the next page button.
.pf-m-last.pf-c-pagination__nav-controlIndicates the control is for the last page button.

CSS variables

.pf-c-pagination--pf-c-pagination--child--MarginRight
1.5rem
.pf-c-pagination--pf-c-pagination--m-bottom--child--MarginRight
0
.pf-c-pagination--pf-c-pagination--m-bottom--child--md--MarginRight
1.5rem
.pf-c-pagination--pf-c-pagination--m-compact--child--MarginRight
0.5rem
.pf-c-pagination--pf-c-pagination--c-options-menu__toggle--FontSize
0.875rem
.pf-c-pagination--pf-c-pagination__nav-control--c-button--PaddingRight
0.5rem
.pf-c-pagination--pf-c-pagination__nav-control--c-button--PaddingLeft
0.5rem
.pf-c-pagination--pf-c-pagination__nav-control--c-button--FontSize
1rem
.pf-c-pagination--pf-c-pagination--m-bottom__nav-control--c-button--OutlineOffset
calc(0.25rem * -1)
.pf-c-pagination--pf-c-pagination--m-bottom__nav-control--c-button--PaddingTop
1rem
.pf-c-pagination--pf-c-pagination--m-bottom__nav-control--c-button--PaddingBottom
1rem
.pf-c-pagination--pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight
1rem
.pf-c-pagination--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop
0.375rem
.pf-c-pagination--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight
0.5rem
.pf-c-pagination--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom
0.375rem
.pf-c-pagination--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft
0.5rem
.pf-c-pagination--pf-c-pagination--m-compact__nav-control--nav-control--MarginLeft
1rem
.pf-c-pagination--pf-c-pagination__nav-page-select--FontSize
0.875rem
.pf-c-pagination--pf-c-pagination__nav-page-select--PaddingLeft
1rem
.pf-c-pagination--pf-c-pagination__nav-page-select--PaddingRight
1rem
.pf-c-pagination--pf-c-pagination__nav-page-select--child--MarginRight
0.25rem
.pf-c-pagination--pf-c-pagination__nav-page-select--c-form-control--width-base
3.5ch
.pf-c-pagination--pf-c-pagination__nav-page-select--c-form-control--width-chars
2
.pf-c-pagination--pf-c-pagination__nav-page-select--c-form-control--Width
calc(3.5ch + (2 * 1ch))
.pf-c-pagination--pf-c-pagination--m-bottom--BackgroundColor
#fff
.pf-c-pagination--pf-c-pagination--m-bottom--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-pagination--pf-c-pagination--m-bottom--md--PaddingTop
1rem
.pf-c-pagination--pf-c-pagination--m-bottom--md--PaddingRight
1rem
.pf-c-pagination--pf-c-pagination--m-bottom--md--PaddingBottom
1rem
.pf-c-pagination--pf-c-pagination--m-bottom--md--PaddingLeft
1rem
.pf-c-pagination--pf-c-pagination--m-bottom--xl--PaddingRight
1.5rem
.pf-c-pagination--pf-c-pagination--m-bottom--xl--PaddingLeft
1.5rem
.pf-c-pagination.pf-m-bottom--pf-c-pagination--child--MarginRight
0
.pf-c-pagination.pf-m-bottom--pf-c-pagination__nav-control--c-button--PaddingRight
1rem
.pf-c-pagination.pf-m-bottom--pf-c-pagination__nav-control--c-button--PaddingLeft
1rem
.pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control .pf-c-button--pf-c-button--PaddingTop
1rem
.pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control .pf-c-button--pf-c-button--PaddingBottom
1rem
.pf-c-pagination.pf-m-bottom.pf-m-static--pf-c-pagination--m-bottom--MarginTop
0
.pf-c-pagination.pf-m-bottom.pf-m-static--pf-c-pagination--m-bottom--BorderTopWidth
0
.pf-c-pagination.pf-m-compact--pf-c-pagination--child--MarginRight
0.5rem

View source on Github