Pagination

A pagination component allows users to navigate through large content views that have been split across multiple pages.

Examples

Top

1 - 20 of 523

Bottom

Indeterminate

By not passing itemCount and passing toggleTemplate you can customize the toggle with text.

1 - 20 of many

Disabled

1 - 20 of 523

No items

0 - 0 of 0

One page

1 - 15 of 15

Compact

1 - 20 of 523

Offset

1 - 20 of 523

Sticky

Inset

1 - 20 of 523

Props

Pagination

The main pagination component.
*required
Name	Type	Default	Description
children	React.ReactNode		What should be rendered inside the pagination.
className	string	''	Additional classes for the pagination container.
dropDirection	'up' \| 'down'		Direction of dropdown context menu.
firstPage	number	1	Page to start at.
inset	{ default?: 'insetNone' \| 'insetSm' \| 'insetMd' \| 'insetLg' \| 'insetXl' \| 'inset2xl'; sm?: 'insetNone' \| 'insetSm' \| 'insetMd' \| 'insetLg' \| 'insetXl' \| 'inset2xl'; md?: 'insetNone' \| 'insetSm' \| 'insetMd' \| 'insetLg' \| 'insetXl' \| 'inset2xl'; lg?: 'insetNone' \| 'insetSm' \| 'insetMd' \| 'insetLg' \| 'insetXl' \| 'inset2xl'; xl?: 'insetNone' \| 'insetSm' \| 'insetMd' \| 'insetLg' \| 'insetXl' \| 'inset2xl'; '2xl'?: 'insetNone' \| 'insetSm' \| 'insetMd' \| 'insetLg' \| 'insetXl' \| 'inset2xl'; }		Insets at various breakpoints.
isCompact	boolean	false	Flag indicating if pagination is compact.
isDisabled	boolean	false	Flag indicating if pagination is disabled.
isLastFullPageShown	boolean	false	Indicate whether to show last full page of results when user selects perPage value greater than remaining rows.
isStatic	boolean	false	Flag indicating if pagination should not be sticky on mobile.
isSticky	boolean	false	Flag indicating if pagination should stick to its position (based on variant).
itemCount	number		Total number of items.
itemsEnd	number	null	Last index of items on current page.
itemsStart	number	null	First index of items on current page.
menuAppendTo Beta	HTMLElement \| (() => HTMLElement) \| 'inline'		The container to append the pagination options menu to.
offset	number	null	Start index of rows to display, used in place of providing page.
onFirstClick	(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void	() => undefined	Function called when user clicks on navigate to first page.
onLastClick	(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void	() => undefined	Function called when user clicks on navigate to last page.
onNextClick	(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void	() => undefined	Function called when user clicks on navigate to next page.
onPageInput	(event: React.KeyboardEvent<HTMLInputElement>, page: number) => void	() => undefined	Function called when user inputs page number.
onPerPageSelect	( event: React.MouseEvent \| React.KeyboardEvent \| MouseEvent, newPerPage: number, newPage: number, startIdx?: number, endIdx?: number ) => void	() => undefined	Function called when user selects number of items per page.
onPreviousClick	(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void	() => undefined	Function called when user clicks on navigate to previous page.
onSetPage	( event: React.MouseEvent \| React.KeyboardEvent \| MouseEvent, newPage: number, perPage?: number, startIdx?: number, endIdx?: number ) => void	() => undefined	Function called when user sets page.
ouiaId	number \| string		Value to overwrite the randomly generated data-ouia-component-id.
ouiaSafe	boolean	true	Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.
page	number	1	Current page number.
perPage	number	defaultPerPageOptions[0].value	Number of items per page.
perPageOptions	PerPageOptions[]	[ { title: '10', value: 10 }, { title: '20', value: 20 }, { title: '50', value: 50 }, { title: '100', value: 100 } ]	Array of the number of items per page options.
titles	PaginationTitles	{ items: '', page: '', pages: '', itemsPerPage: 'Items per page', perPageSuffix: 'per page', toFirstPageAriaLabel: 'Go to first page', toPreviousPageAriaLabel: 'Go to previous page', toLastPageAriaLabel: 'Go to last page', toNextPageAriaLabel: 'Go to next page', optionsToggleAriaLabel: '', currPageAriaLabel: 'Current page', paginationAriaLabel: 'Pagination', ofWord: 'of' }	Object with titles to display in pagination.
toggleTemplate	((props: PaginationToggleTemplateProps) => React.ReactElement) \| string		This will be shown in pagination toggle span. You can use firstIndex, lastIndex, itemCount, itemsTitle, and/or ofWord props.
usePageInsets	boolean		Flag indicating that pagination should use page insets.
variant	'top' \| 'bottom' \| PaginationVariant	PaginationVariant.top	Position where pagination is rendered.
widgetId	string	'options-menu'	Id to ideintify widget on page.

PaginationTitles

Properties to customize various pagination titles. The following properties should be passed into the pagination component's title property.
*required
Name	Type	Description
currPageAriaLabel	string	Accessible label for the input displaying the current page.
items	string	The type or title of the items being paginated.
itemsPerPage	string	The title of the pagination options menu.
ofWord	string	Label for the English word "of".
optionsToggleAriaLabel	string	Accessible label for the options toggle.
page	string	The title of a page displayed beside the page number.
pages	string	The title of a page displayed beside the page number (plural form).
paginationAriaLabel	string	Accessible label for the pagination component.
perPageSuffix	string	The suffix to be displayed after each option on the options menu dropdown.
toFirstPageAriaLabel	string	Accessible label for the button which moves to the first page.
toLastPageAriaLabel	string	Accessible label for the button which moves to the last page.
toNextPageAriaLabel	string	Accessible label for the button which moves to the next page.
toPreviousPageAriaLabel	string	Accessible label for the button which moves to the previous page.

PerPageOptions

Properties to customize the content and behavior of the pagination dropdown options. These properties should be passed into the pagination component's perPageOptions property.
*required
Name	Type	Default	Description
title	string		The text title of the option, which is rendered inside the pagination dropdown menu.
value	number		The value of the option, which determines how many items are displayed per page.

PaginationToggleTemplateProps

Allows more customization of the pagination dropdown toggle. The following properties should be passed into the pagination component's toggleTemplate property.
*required
Name	Type	Description
firstIndex	number	The first index of the items being paginated
itemCount	number	The total number of items being paginated
itemsTitle	string	The type or title of the items being paginated
lastIndex	number	The last index of the items being paginated
ofWord	React.ReactNode	The word that joins the index and itemCount/itemsTitle

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-pagination	--pf-v6-c-pagination--inset	0
	.pf-v6-c-pagination	--pf-v6-c-pagination--ColumnGap	1.5rem
--pf-v6-c-pagination--ColumnGap --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-page-insets--inset	1.5rem
--pf-v6-c-pagination--m-page-insets--inset --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-pagination	--pf-v6-c-pagination__nav--Display	none
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-display-summary__nav--Display	none
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-display-full__nav--Display	inline-flex
	.pf-v6-c-pagination	--pf-v6-c-pagination__nav--ColumnGap	0.5rem
--pf-v6-c-pagination__nav--ColumnGap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-pagination	--pf-v6-c-pagination__nav-page-select--FontSize	0.875rem
--pf-v6-c-pagination__nav-page-select--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-pagination	--pf-v6-c-pagination__nav-page-select--ColumnGap	0.5rem
--pf-v6-c-pagination__nav-page-select--ColumnGap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-pagination	--pf-v6-c-pagination__nav-page-select--c-form-control--width-base	calc(1rem + 1rem + 1px * 2)
--pf-v6-c-pagination__nav-page-select--c-form-control--width-base calc(--pf-t--global--spacer--control--horizontal--default + --pf-t--global--spacer--control--horizontal--default + --pf-t--global--border--width--control--default * 2) calc(--pf-t--global--spacer--md + --pf-t--global--spacer--md + --pf-t--global--border--width--100 * 2) calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--300 + 1px * 2) calc(1rem + 1rem + 1px * 2)
	.pf-v6-c-pagination	--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars	2
	.pf-v6-c-pagination	--pf-v6-c-pagination__nav-page-select--c-form-control--Width	calc(calc(1rem + 1rem + 1px * 2) + (2 * 1ch))
--pf-v6-c-pagination__nav-page-select--c-form-control--Width calc(--pf-v6-c-pagination__nav-page-select--c-form-control--width-base + (--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars * 1ch)) calc(calc(--pf-t--global--spacer--control--horizontal--default + --pf-t--global--spacer--control--horizontal--default + --pf-t--global--border--width--control--default * 2) + (2 * 1ch)) calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--md + --pf-t--global--border--width--100 * 2) + (2 * 1ch)) calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--300 + 1px * 2) + (2 * 1ch)) calc(calc(1rem + 1rem + 1px * 2) + (2 * 1ch))
	.pf-v6-c-pagination	--pf-v6-c-pagination__total-items--Display	block
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-display-summary__total-items--Display	block
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-display-full__total-items--Display	none
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-sticky--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-pagination--m-sticky--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-sticky--BoxShadow	0px 4px 4px -4px rgba(41, 41, 41, 0.2000)
--pf-v6-c-pagination--m-sticky--BoxShadow --pf-t--global--box-shadow--sm--bottom --pf-t--global--box-shadow--X--sm--bottom --pf-t--global--box-shadow--Y--sm--bottom --pf-t--global--box-shadow--blur--sm --pf-t--global--box-shadow--spread--sm--directional --pf-t--global--box-shadow--color--sm--directional --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--600 --pf-t--global--box-shadow--blur--100 --pf-t--global--box-shadow--spread--200 --pf-t--global--box-shadow--color--200 0px 4px 4px -4px rgba(41, 41, 41, 0.2000)
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-sticky--PaddingBlockStart	1rem
--pf-v6-c-pagination--m-sticky--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-sticky--PaddingBlockEnd	1rem
--pf-v6-c-pagination--m-sticky--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-sticky--PaddingInlineStart	1.5rem
--pf-v6-c-pagination--m-sticky--PaddingInlineStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-sticky--PaddingInlineEnd	1.5rem
--pf-v6-c-pagination--m-sticky--PaddingInlineEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-sticky--ZIndex	100
--pf-v6-c-pagination--m-sticky--ZIndex --pf-t--global--z-index--xs --pf-t--global--z-index--100 100
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-sticky--InsetBlockStart	0
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-bottom--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-pagination--m-bottom--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-bottom--BoxShadow	0px -4px 4px -4px rgba(41, 41, 41, 0.2000)
--pf-v6-c-pagination--m-bottom--BoxShadow --pf-t--global--box-shadow--sm--top --pf-t--global--box-shadow--X--sm--top --pf-t--global--box-shadow--Y--sm--top --pf-t--global--box-shadow--blur--sm --pf-t--global--box-shadow--spread--sm--directional --pf-t--global--box-shadow--color--sm--directional --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--200 --pf-t--global--box-shadow--blur--100 --pf-t--global--box-shadow--spread--200 --pf-t--global--box-shadow--color--200 0px -4px 4px -4px rgba(41, 41, 41, 0.2000)
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow	0px -4px 4px -4px rgba(41, 41, 41, 0.2000)
--pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow --pf-t--global--box-shadow--sm--top --pf-t--global--box-shadow--X--sm--top --pf-t--global--box-shadow--Y--sm--top --pf-t--global--box-shadow--blur--sm --pf-t--global--box-shadow--spread--sm--directional --pf-t--global--box-shadow--color--sm--directional --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--200 --pf-t--global--box-shadow--blur--100 --pf-t--global--box-shadow--spread--200 --pf-t--global--box-shadow--color--200 0px -4px 4px -4px rgba(41, 41, 41, 0.2000)
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-bottom--InsetBlockEnd	0
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart	0.5rem
--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd	0.5rem
--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart	0.5rem
--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd	0.5rem
--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart	0.5rem
--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart --pf-t--global--spacer--gap--group--vertical --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd	0
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart	0.5rem
--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd	0.5rem
--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-pagination	--pf-v6-c-pagination__page-menu--Display--base	block
	.pf-v6-c-pagination	--pf-v6-c-pagination__page-menu--Display	none
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-display-summary__page-menu--Display	none
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-display-full__page-menu--Display	block
--pf-v6-c-pagination--m-display-full__page-menu--Display --pf-v6-c-pagination__page-menu--Display--base block
	.pf-v6-c-pagination	--pf-v6-c-pagination--m-bottom__page-menu--Display	block
--pf-v6-c-pagination--m-bottom__page-menu--Display --pf-v6-c-pagination__page-menu--Display--base block
	.pf-v6-c-pagination	--pf-v6-c-pagination__page-menu--md--Display	block
--pf-v6-c-pagination__page-menu--md--Display --pf-v6-c-pagination__page-menu--Display--base block
	.pf-v6-c-pagination.pf-m-bottom	--pf-v6-c-pagination--m-sticky--BoxShadow	0px -4px 4px -4px rgba(41, 41, 41, 0.2000)
--pf-v6-c-pagination--m-sticky--BoxShadow --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow --pf-t--global--box-shadow--sm--top --pf-t--global--box-shadow--X--sm--top --pf-t--global--box-shadow--Y--sm--top --pf-t--global--box-shadow--blur--sm --pf-t--global--box-shadow--spread--sm--directional --pf-t--global--box-shadow--color--sm--directional --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--200 --pf-t--global--box-shadow--blur--100 --pf-t--global--box-shadow--spread--200 --pf-t--global--box-shadow--color--200 0px -4px 4px -4px rgba(41, 41, 41, 0.2000)
	.pf-v6-c-pagination.pf-m-bottom	--pf-v6-c-pagination--m-sticky--InsetBlockStart	auto
	.pf-v6-c-pagination.pf-m-sticky	--pf-v6-c-pagination--m-bottom--InsetBlockEnd	0
	.pf-v6-c-pagination.pf-m-page-insets	--pf-v6-c-pagination--inset	1.5rem
--pf-v6-c-pagination--inset --pf-v6-c-pagination--m-page-insets--inset --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-pagination.pf-m-display-summary	--pf-v6-c-pagination__nav--Display	none
--pf-v6-c-pagination__nav--Display --pf-v6-c-pagination--m-display-summary__nav--Display none
	.pf-v6-c-pagination.pf-m-display-summary	--pf-v6-c-pagination__page-menu--Display	none
--pf-v6-c-pagination__page-menu--Display --pf-v6-c-pagination--m-display-summary__page-menu--Display none
	.pf-v6-c-pagination.pf-m-display-summary	--pf-v6-c-pagination__total-items--Display	block
--pf-v6-c-pagination__total-items--Display --pf-v6-c-pagination--m-display-summary__total-items--Display block
	.pf-v6-c-pagination.pf-m-display-full	--pf-v6-c-pagination__nav--Display	inline-flex
--pf-v6-c-pagination__nav--Display --pf-v6-c-pagination--m-display-full__nav--Display inline-flex
	.pf-v6-c-pagination.pf-m-display-full	--pf-v6-c-pagination__page-menu--Display	block
--pf-v6-c-pagination__page-menu--Display --pf-v6-c-pagination--m-display-full__page-menu--Display --pf-v6-c-pagination__page-menu--Display--base block
	.pf-v6-c-pagination.pf-m-display-full	--pf-v6-c-pagination__total-items--Display	none
--pf-v6-c-pagination__total-items--Display --pf-v6-c-pagination--m-display-full__total-items--Display none
	.pf-v6-c-pagination.pf-m-inset-none	--pf-v6-c-pagination--inset	0
	.pf-v6-c-pagination.pf-m-inset-sm	--pf-v6-c-pagination--inset	0.5rem
--pf-v6-c-pagination--inset --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-pagination.pf-m-inset-md	--pf-v6-c-pagination--inset	1rem
--pf-v6-c-pagination--inset --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-pagination.pf-m-inset-lg	--pf-v6-c-pagination--inset	1.5rem
--pf-v6-c-pagination--inset --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-pagination.pf-m-inset-xl	--pf-v6-c-pagination--inset	2rem
--pf-v6-c-pagination--inset --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-pagination.pf-m-inset-2xl	--pf-v6-c-pagination--inset	3rem
--pf-v6-c-pagination--inset --pf-t--global--spacer--2xl --pf-t--global--spacer--600 3rem

View source on GitHub