Skip to Content
Patternfly Logo

Pagination

The pagination component is used to navigate pages in lists, tables, and other content views. Related design guidelines: Lists and tables

ExamplesDocumentationPagination nav inputCSS Variables

Examples

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-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--MarginRightc_pagination_child_MarginRight
1.5rem
.pf-c-pagination--pf-c-pagination--m-bottom--child--MarginRightc_pagination_m_bottom_child_MarginRight
0
.pf-c-pagination--pf-c-pagination--m-bottom--child--md--MarginRightc_pagination_m_bottom_child_md_MarginRight
1.5rem
.pf-c-pagination--pf-c-pagination--m-compact--child--MarginRightc_pagination_m_compact_child_MarginRight
0.5rem
.pf-c-pagination--pf-c-pagination--c-options-menu__toggle--FontSizec_pagination_c_options_menu__toggle_FontSize
0.875rem
.pf-c-pagination--pf-c-pagination__nav-control--c-button--PaddingRightc_pagination__nav_control_c_button_PaddingRight
0.5rem
.pf-c-pagination--pf-c-pagination__nav-control--c-button--PaddingLeftc_pagination__nav_control_c_button_PaddingLeft
0.5rem
.pf-c-pagination--pf-c-pagination__nav-control--c-button--FontSizec_pagination__nav_control_c_button_FontSize
1rem
.pf-c-pagination--pf-c-pagination--m-bottom__nav-control--c-button--OutlineOffsetc_pagination_m_bottom__nav_control_c_button_OutlineOffset
calc(0.25rem * -1)
.pf-c-pagination--pf-c-pagination--m-bottom__nav-control--c-button--PaddingTopc_pagination_m_bottom__nav_control_c_button_PaddingTop
1rem
.pf-c-pagination--pf-c-pagination--m-bottom__nav-control--c-button--PaddingBottomc_pagination_m_bottom__nav_control_c_button_PaddingBottom
1rem
.pf-c-pagination--pf-c-pagination--m-bottom__nav-control--c-button--PaddingRightc_pagination_m_bottom__nav_control_c_button_PaddingRight
1rem
.pf-c-pagination--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingTopc_pagination_m_bottom__nav_control_c_button_md_PaddingTop
0.375rem
.pf-c-pagination--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingRightc_pagination_m_bottom__nav_control_c_button_md_PaddingRight
0.5rem
.pf-c-pagination--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottomc_pagination_m_bottom__nav_control_c_button_md_PaddingBottom
0.375rem
.pf-c-pagination--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeftc_pagination_m_bottom__nav_control_c_button_md_PaddingLeft
0.5rem
.pf-c-pagination--pf-c-pagination--m-compact__nav-control--nav-control--MarginLeftc_pagination_m_compact__nav_control_nav_control_MarginLeft
1rem
.pf-c-pagination--pf-c-pagination__nav-page-select--FontSizec_pagination__nav_page_select_FontSize
0.875rem
.pf-c-pagination--pf-c-pagination__nav-page-select--PaddingLeftc_pagination__nav_page_select_PaddingLeft
1rem
.pf-c-pagination--pf-c-pagination__nav-page-select--PaddingRightc_pagination__nav_page_select_PaddingRight
1rem
.pf-c-pagination--pf-c-pagination__nav-page-select--child--MarginRightc_pagination__nav_page_select_child_MarginRight
0.25rem
.pf-c-pagination--pf-c-pagination__nav-page-select--c-form-control--width-basec_pagination__nav_page_select_c_form_control_width_base
3.5ch
.pf-c-pagination--pf-c-pagination__nav-page-select--c-form-control--width-charsc_pagination__nav_page_select_c_form_control_width_chars
2
.pf-c-pagination--pf-c-pagination__nav-page-select--c-form-control--Widthc_pagination__nav_page_select_c_form_control_Width
calc(3.5ch + (2 * 1ch))
.pf-c-pagination--pf-c-pagination--m-bottom--BackgroundColorc_pagination_m_bottom_BackgroundColor
#fff
.pf-c-pagination--pf-c-pagination--m-bottom--BoxShadowc_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--PaddingTopc_pagination_m_bottom_md_PaddingTop
1rem
.pf-c-pagination--pf-c-pagination--m-bottom--md--PaddingRightc_pagination_m_bottom_md_PaddingRight
1rem
.pf-c-pagination--pf-c-pagination--m-bottom--md--PaddingBottomc_pagination_m_bottom_md_PaddingBottom
1rem
.pf-c-pagination--pf-c-pagination--m-bottom--md--PaddingLeftc_pagination_m_bottom_md_PaddingLeft
1rem
.pf-c-pagination--pf-c-pagination--m-bottom--xl--PaddingRightc_pagination_m_bottom_xl_PaddingRight
1.5rem
.pf-c-pagination--pf-c-pagination--m-bottom--xl--PaddingLeftc_pagination_m_bottom_xl_PaddingLeft
1.5rem
.pf-c-pagination.pf-m-bottom--pf-c-pagination--child--MarginRightc_pagination_child_MarginRight
0
.pf-c-pagination.pf-m-bottom--pf-c-pagination__nav-control--c-button--PaddingRightc_pagination__nav_control_c_button_PaddingRight
1rem
.pf-c-pagination.pf-m-bottom--pf-c-pagination__nav-control--c-button--PaddingLeftc_pagination__nav_control_c_button_PaddingLeft
1rem
.pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control .pf-c-button--pf-c-button--PaddingTopc_button_PaddingTop
1rem
.pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control .pf-c-button--pf-c-button--PaddingBottomc_button_PaddingBottom
1rem
.pf-c-pagination.pf-m-bottom.pf-m-static--pf-c-pagination--m-bottom--MarginTopc_pagination_m_bottom_MarginTop
0
.pf-c-pagination.pf-m-bottom.pf-m-static--pf-c-pagination--m-bottom--BorderTopWidthc_pagination_m_bottom_BorderTopWidth
0
.pf-c-pagination.pf-m-compact--pf-c-pagination--child--MarginRightc_pagination_child_MarginRight
0.5rem