Skip to content
Patternfly Logo

Pagination

A pagination component gives users more navigational capability on pages with content views.

Examples

Top

1 - 10 of  36

Top expanded

1 - 10 of  36

Top sticky

1 - 10 of  36
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.

Indeterminate (item count is not known)

1 - 10 of  many

Bottom

Bottom sticky

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.

Top disabled

1 - 10 of  36

Compact

1 - 10 of  36

Top with display summary modifier

1 - 10 of  36

Top with display full modifier

1 - 10 of  36

Top with responsive display summary and display full modifiers

1 - 10 of  36

Compact display full modifier

1 - 10 of  36

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-bottom.
.pf-c-pagination__total-items
<div>
Initiates element to replace the options menu on summary.
.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-display-summary{-on-[breakpoint]}
.pf-c-pagination
Modifies for summary display pagination component styles at optional breakpoint.
.pf-m-display-full{-on-[breakpoint]}
.pf-c-pagination
Modifies for full display pagination component styles at optional breakpoint.
.pf-m-bottom
.pf-c-pagination
Modifies for bottom pagination component styles.
.pf-m-compact
.pf-c-pagination
Modifies for compact pagination component styles.
.pf-m-static
.pf-c-pagination.pf-m-bottom
Modifies bottom pagination to not be positioned sticky on summary.
.pf-m-sticky
.pf-c-pagination
Modifies 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-control
Indicates the control is for the first page button.
.pf-m-prev
.pf-c-pagination__nav-control
Indicates the control is for the previous page button.
.pf-m-next
.pf-c-pagination__nav-control
Indicates the control is for the next page button.
.pf-m-last
.pf-c-pagination__nav-control
Indicates 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--Display
none
.pf-c-pagination--pf-c-pagination__nav--Visibility
hidden
.pf-c-pagination--pf-c-pagination--m-display-summary__nav--Display
none
.pf-c-pagination--pf-c-pagination--m-display-summary__nav--Visibility
hidden
.pf-c-pagination--pf-c-pagination--m-display-full__nav--Display
inline-flex
.pf-c-pagination--pf-c-pagination--m-display-full__nav--Visibility
visible
.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
calc(0.5rem * 2 + 1px * 2)
.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(calc(0.5rem * 2 + 1px * 2) + (2 * 1ch))
.pf-c-pagination--pf-c-pagination__total-items--Display
block
.pf-c-pagination--pf-c-pagination__total-items--Visibility
visible
.pf-c-pagination--pf-c-pagination--m-display-summary__total-items--Display
block
.pf-c-pagination--pf-c-pagination--m-display-summary__total-items--Visibility
visible
.pf-c-pagination--pf-c-pagination--m-display-full__total-items--Display
none
.pf-c-pagination--pf-c-pagination--m-display-full__total-items--Visibility
hidden
.pf-c-pagination--pf-c-pagination--m-sticky--BackgroundColor
#fff
.pf-c-pagination--pf-c-pagination--m-sticky--BoxShadow
0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-pagination--pf-c-pagination--m-sticky--md--PaddingTop
1rem
.pf-c-pagination--pf-c-pagination--m-sticky--md--PaddingRight
1rem
.pf-c-pagination--pf-c-pagination--m-sticky--md--PaddingBottom
1rem
.pf-c-pagination--pf-c-pagination--m-sticky--md--PaddingLeft
1rem
.pf-c-pagination--pf-c-pagination--m-sticky--ZIndex
100
.pf-c-pagination--pf-c-pagination--m-sticky--Top
0
.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--Bottom
0
.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-c-pagination--m-bottom--m-sticky--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-pagination--pf-c-pagination--c-options-menu--Display
none
.pf-c-pagination--pf-c-pagination--c-options-menu--Visibility
hidden
.pf-c-pagination--pf-c-pagination--m-display-summary--c-options-menu--Display
none
.pf-c-pagination--pf-c-pagination--m-display-summary--c-options-menu--Visibility
hidden
.pf-c-pagination--pf-c-pagination--m-display-full--c-options-menu--Display
inline-flex
.pf-c-pagination--pf-c-pagination--m-display-full--c-options-menu--Visibility
visible
.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--m-sticky--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-pagination.pf-m-bottom--pf-c-pagination--m-sticky--Top
auto
.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-sticky--pf-c-pagination--m-bottom--Bottom
0
.pf-c-pagination.pf-m-compact--pf-c-pagination--child--MarginRight
0.5rem
.pf-c-pagination.pf-m-display-summary--pf-c-pagination__nav--Display
none
.pf-c-pagination.pf-m-display-summary--pf-c-pagination__nav--Visibility
hidden
.pf-c-pagination.pf-m-display-summary--pf-c-pagination--c-options-menu--Display
none
.pf-c-pagination.pf-m-display-summary--pf-c-pagination--c-options-menu--Visibility
hidden
.pf-c-pagination.pf-m-display-summary--pf-c-pagination__total-items--Display
block
.pf-c-pagination.pf-m-display-summary--pf-c-pagination__total-items--Visibility
visible
.pf-c-pagination.pf-m-display-full--pf-c-pagination__nav--Display
inline-flex
.pf-c-pagination.pf-m-display-full--pf-c-pagination__nav--Visibility
visible
.pf-c-pagination.pf-m-display-full--pf-c-pagination--c-options-menu--Display
inline-flex
.pf-c-pagination.pf-m-display-full--pf-c-pagination--c-options-menu--Visibility
visible
.pf-c-pagination.pf-m-display-full--pf-c-pagination__total-items--Display
none
.pf-c-pagination.pf-m-display-full--pf-c-pagination__total-items--Visibility
hidden

View source on GitHub