HTML

Pagination

ExamplesDocumentationCSS Variables

Examples

Pagination top

This Preview can only be accessed in full page mode.
Copied to clipboard

Pagination top expanded

This Preview can only be accessed in full page mode.
Copied to clipboard

Pagination bottom

This Preview can only be accessed in full page mode.
Copied to clipboard

Documentation

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

Accessibility

Attribute Applied To Outcome
aria-label .pf-c-pagination__nav Provides an accessible name for pagination navigation element. Required

Pagination nav input

Attribute Applied To Outcome
type="number" .pf-c-pagination > .pf-c-form-control Defines a field as a number. Required
value .pf-c-pagination__nav-page-select > .pf-c-form-control Provides initial integer value. Required
min .pf-c-pagination__nav-page-select > .pf-c-form-control Provides minimum integer value. Required
max .pf-c-pagination__nav-page-select > .pf-c-form-control Provides max integer value. Required

Usage

Class Applied To Outcome
.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-pagination Modifies for bottom/footer pagination component styles.

CSS Variables

--pf-c-pagination__menu-text--Colorc_pagination__menu_text_Color#72767b
--pf-c-pagination__menu-text--FontSizec_pagination__menu_text_FontSize0.875rem
--pf-c-pagination__menu-text--PaddingLeftc_pagination__menu_text_PaddingLeft0.25rem
--pf-c-pagination__nav--c-button--FontSizec_pagination__nav_c_button_FontSize1rem
--pf-c-pagination__nav--c-button--PaddingLeftc_pagination__nav_c_button_PaddingLeft0.5rem
--pf-c-pagination__nav--c-button--PaddingRightc_pagination__nav_c_button_PaddingRight0.5rem
--pf-c-pagination__nav-page-select--FontSizec_pagination__nav_page_select_FontSize0.875rem
--pf-c-pagination__nav-page-select--PaddingLeftc_pagination__nav_page_select_PaddingLeft1rem
--pf-c-pagination__nav-page-select--PaddingRightc_pagination__nav_page_select_PaddingRight1rem
--pf-c-pagination__nav-page-select--c-form-control--Widthc_pagination__nav_page_select_c_form_control_Width3rem
--pf-c-pagination__nav-page-select--child--MarginRightc_pagination__nav_page_select_child_MarginRight0.25rem
--pf-c-pagination--c-options-menu__toggle--FontSizec_pagination_c_options_menu__toggle_FontSize0.875rem
--pf-c-pagination--child--MarginRightc_pagination_child_MarginRight1.5rem