HTML

Pagination

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-footer.
.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-page-select<div>Initiates pagination nav page select.
.pf-c-pagination__menu-text<span>Indicates text in menu dropdown.
.pf-m-footer.pf-c-paginationModifies for bottom/footer pagination component styles.
.pf-m-compact.pf-c-paginationModifies for compact pagination component styles.

CSS Variables

--pf-c-pagination__menu-text--Colorc_pagination__menu_text_Color
#737679
--pf-c-pagination__menu-text--FontSizec_pagination__menu_text_FontSize
0.875rem
--pf-c-pagination__menu-text--PaddingLeftc_pagination__menu_text_PaddingLeft
0.25rem
--pf-c-pagination__nav--c-button--FontSizec_pagination__nav_c_button_FontSize
1rem
--pf-c-pagination__nav--c-button--PaddingLeftc_pagination__nav_c_button_PaddingLeft
0.5rem
--pf-c-pagination__nav--c-button--PaddingRightc_pagination__nav_c_button_PaddingRight
0.5rem
--pf-c-pagination__nav-page-select--c-form-control--Widthc_pagination__nav_page_select_c_form_control_Width
3rem
--pf-c-pagination__nav-page-select--child--MarginRightc_pagination__nav_page_select_child_MarginRight
0.25rem
--pf-c-pagination__nav-page-select--FontSizec_pagination__nav_page_select_FontSize
0.875rem
--pf-c-pagination__nav-page-select--PaddingLeftc_pagination__nav_page_select_PaddingLeft
1rem
--pf-c-pagination__nav-page-select--PaddingRightc_pagination__nav_page_select_PaddingRight
1rem
--pf-c-pagination--c-options-menu__toggle--FontSizec_pagination_c_options_menu__toggle_FontSize
0.875rem
--pf-c-pagination--child--MarginRightc_pagination_child_MarginRight
0.5rem
--pf-c-pagination--m-compact__nav--c-button--MarginLeftc_pagination_m_compact__nav_c_button_MarginLeft
1rem
--pf-c-pagination--m-compact--child--MarginRightc_pagination_m_compact_child_MarginRight
0.5rem