From e7f78967d3b9f045c648f488a8bb8b228677c7ac Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Fri, 31 Oct 2025 14:23:15 -0400 Subject: [PATCH 1/5] docs(pagination): Content updates for accuracy and relevance. --- .../components/pagination/pagination.md | 41 ++++++++++--------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/components/pagination/pagination.md b/packages/documentation-site/patternfly-docs/content/components/pagination/pagination.md index c2df88f7d8..3864ac99b9 100644 --- a/packages/documentation-site/patternfly-docs/content/components/pagination/pagination.md +++ b/packages/documentation-site/patternfly-docs/content/components/pagination/pagination.md @@ -6,24 +6,27 @@ section: components import '../components.css'; ## Usage -Add pagination above and below content views so that users can easily navigate as they read through listed items on a page. +Pagination allows users to conveniently navigate through content-dense components or page elements.
![a full page demo with a table and a pagination component within a toolbar.](./img/pagination-elements.svg)
-1. **Top pagination:** Always right-align pagination in the top toolbar, above content views. +1. **Top pagination:** Placed above the component it controls and right-aligned. + +2. **Bottom pagination:** Placed below the component it controls. Right-aligned for desktop views and center-aligned for mobile. If you want the bottom pagination to be sticky so it does not move out of view as users scroll through long content, place it directly after the component it controls and refer to the [React sticky pagination](/components/pagination#sticky) or [HTML bottom sticky pagination](/components/pagination/html#bottom-sticky) examples for further implementation guidance. -2. **Bottom pagination:** Right-align pagination below content views, too. If you want the bottom pagination to be sticky so it does not scroll off the page when the content is taller that the viewport, place the pagination in a footer page section and apply the `pf-m-sticky-bottom` modifier section to -create a sticky page footer. ## Variations -### Full pagination -Use full pagination unless you're restricted to a narrow workspace, then use compact pagination. Full pagination occupies more toolbar territory, so you'll have limited room for other items like bulk selectors, buttons, filters, or input fields. +- [Full pagination](#full-pagination) +- [Compact pagination](#compact-pagination) +- [Indeterminate pagination](#indeterminate-pagination) + +### Full pagination -[Overflow menus](/components/toolbar/design-guidelines#overflow-menu) allow you to incorporate these toolbar actions using less horizontal space. Toolbar actions automatically form into an overflow menu at specific breaking points. Learn how to customize these breakpoints in our [Toolbar](/components/toolbar/design-guidelines) documentation. +A default "full pagination" component contains multiple controls for navigating the related component. Use a full pagination unless you're restricted to a narrow workspace, in which can you should use a [compact pagination](#compact-pagination) instead. -Desktop and mobile views connect with the same breakpoint specifications. On mobile, full pagination condenses to an item count. As a toolbar item, you can add and keep the item count in two ways: in both desktop and mobile views, or just in mobile view. +When using full pagination a toolbar, you'll have limited room for other items like bulk selectors, buttons, filters, or input fields. You can still incorporate these additional actions with an [overflow menu](/components/toolbar/design-guidelines#overflow-menu), which will automatically form when those additional items need to collapse at specific breaking points. On mobile, full pagination will also collapse to a pagination summary with an item count. Learn how to customize overflow menu breakpoints in our [toolbar design guidelines](/components/toolbar/design-guidelines). #### Desktop full pagination in toolbar @@ -31,9 +34,9 @@ Desktop and mobile views connect with the same breakpoint specifications. On mob ![an example of a desktop pagination component within a toolbar.](./img/toolbar-pagination.svg) -1. **Items in view:** Allows the user to select the item count (number of listed items) per page. +1. **Displayed items selector:** Allows users to choose the number of items shown at once. -2. **Full pager:** Supplies all necessary pagination options including page-back and page-forward, page-first and page-last, and a manual option to type in a desired page number. +2. **Full pagination:** Supplies pagination controls, including page-back and page-forward, page-first and page-last, and a manual option to type in a desired page number. #### Mobile full pagination in toolbar @@ -41,13 +44,15 @@ Desktop and mobile views connect with the same breakpoint specifications. On mob ![Example of pagination on mobile table view.](./img/mobile-pagination.svg) -1. **Items in view:** At this screen size, the top toolbar only shows the item count to indicate items currently in view. It hides all other pagination controls. +1. **Pagination summary:** At this screen size, the top toolbar only shows the item count to summarize the number of items currently in view. It hides all other pagination controls. -2. **Full pager:** Supplies the same pagination options as the desktop full pager, but in the bottom toolbar. +2. **Full pagination:** Supplies pagination controls, including page-back, page-forward, and a displayed items selector, which allows users to choose the number of items shown at once. + +The default recommendation for using pagination in mobile views is to place a pagination summary above the component it controls and a full pagination below the component, as shown in this example. If you can't use bottom pagination, or if you can't use the fall pager in the bottom toolbar for some reason, only then you can place the full pagination in the top toolbar. **Do not** use a full pagination in both the top and bottom toolbars. ### Compact pagination -Compact pagination fits more actions into top toolbars with limited space. Choose this compact variation when your top toolbar contains many items or looks overcrowded. As with full pagination, the compact variation condenses to an item count for mobile views. +Compact pagination saves space for additional actions in limited spaces, like toolbars, and can help reduce visual crowding. Like with full pagination, compact pagination condenses to a pagination summary for mobile views. #### Desktop compact pagination in toolbar @@ -55,16 +60,14 @@ Compact pagination fits more actions into top toolbars with limited space. Choos ![Example of a compact pagination.](./img/compact-pagination.svg) -1. **Items in view:** Allows the user to select the item count (number of listed items) per page, as seen in full pagination. +1. **Displayed items selector:** Allows users to choose the number of items shown at once. -2. **Compact pager:** Supplies the user with page-back and page-next controls only. +2. **Compact pagination:** Supplies pagination controls, including page-back and page-next controls. ### Indeterminate pagination -Use indeterminate pagination if it’s difficult to calculate the total number of items or page count upfront. In these cases, you may use “many” instead of the usual page count that would appear. +Use indeterminate pagination if it’s difficult to calculate the total number of items or page count upfront. In these cases, you use “many” instead of a specific page count that would otherwise appear. Users can still select this control to choose the number of items shown at once.
![Example of a indeterminate pagination.](./img/indeterminate-pagination.svg) -
- -The text indicator provides the user with a control that displays indeterminate page count or items. + \ No newline at end of file From 7e1602f32bdb193281825c0d57453c26aaebb9c1 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Tue, 4 Nov 2025 17:02:44 -0500 Subject: [PATCH 2/5] Finalizes content to open pr. --- .../components/pagination/pagination.md | 76 ++++++++++++------- 1 file changed, 47 insertions(+), 29 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/components/pagination/pagination.md b/packages/documentation-site/patternfly-docs/content/components/pagination/pagination.md index 3864ac99b9..bd40092d24 100644 --- a/packages/documentation-site/patternfly-docs/content/components/pagination/pagination.md +++ b/packages/documentation-site/patternfly-docs/content/components/pagination/pagination.md @@ -12,62 +12,80 @@ Pagination allows users to conveniently navigate through content-dense component ![a full page demo with a table and a pagination component within a toolbar.](./img/pagination-elements.svg) -1. **Top pagination:** Placed above the component it controls and right-aligned. +1. **Top pagination:** Placed above the component it controls and aligned to the right. -2. **Bottom pagination:** Placed below the component it controls. Right-aligned for desktop views and center-aligned for mobile. If you want the bottom pagination to be sticky so it does not move out of view as users scroll through long content, place it directly after the component it controls and refer to the [React sticky pagination](/components/pagination#sticky) or [HTML bottom sticky pagination](/components/pagination/html#bottom-sticky) examples for further implementation guidance. +2. **Bottom pagination:** Placed below the component it controls. Right-aligned for desktop views and center-aligned for mobile. If you want bottom pagination to be sticky so that it remains in view as users scroll through long content, place it directly after the component it controls and refer to the [React sticky pagination](/components/pagination#sticky) or [HTML sticky pagination](/components/pagination/html#bottom-sticky) examples for implementation guidance. ## Variations -- [Full pagination](#full-pagination) -- [Compact pagination](#compact-pagination) -- [Indeterminate pagination](#indeterminate-pagination) +There are 3 pagination variations you can choose from, depending on your use case: +- [Full pagination:](#full-pagination) The default component to use for most desktop views when space is not a major constraint. +- [Compact pagination:](#compact-pagination) Used for narrow spaces or as the primary control for mobile views. +- [Indeterminate pagination:](#indeterminate-pagination) Used when the total number of items is unknown. ### Full pagination -A default "full pagination" component contains multiple controls for navigating the related component. Use a full pagination unless you're restricted to a narrow workspace, in which can you should use a [compact pagination](#compact-pagination) instead. - -When using full pagination a toolbar, you'll have limited room for other items like bulk selectors, buttons, filters, or input fields. You can still incorporate these additional actions with an [overflow menu](/components/toolbar/design-guidelines#overflow-menu), which will automatically form when those additional items need to collapse at specific breaking points. On mobile, full pagination will also collapse to a pagination summary with an item count. Learn how to customize overflow menu breakpoints in our [toolbar design guidelines](/components/toolbar/design-guidelines). - -#### Desktop full pagination in toolbar -
-![an example of a desktop pagination component within a toolbar.](./img/toolbar-pagination.svg) +![Annotations for each element of a full pagination.](./img/full-pagination.svg)
-1. **Displayed items selector:** Allows users to choose the number of items shown at once. +1. **Per-page selector:** Used to choose the number of items displayed on a single page at once. +2. **First page/last page:** Used to jump to the first or last page of content. +3. **Previous page/next page:** Used to navigate back or forward one page of content at a time. +4. **Current page (interactive):** Displays the current location and the total number of pages of content. Users can also manually type in a page number to jump to a desired location. -2. **Full pagination:** Supplies pagination controls, including page-back and page-forward, page-first and page-last, and a manual option to type in a desired page number. +Full pagination contains a variety of controls that can be used to navigate the linked component, like a table or card view. This is the default recommendation, unless you're restricted in space or for use on mobile devices, in which case you should use [compact pagination](#compact-pagination) instead. -#### Mobile full pagination in toolbar +### Compact pagination
-![Example of pagination on mobile table view.](./img/mobile-pagination.svg) +![Example of a compact pagination.](./img/compact-pagination.svg)
-1. **Pagination summary:** At this screen size, the top toolbar only shows the item count to summarize the number of items currently in view. It hides all other pagination controls. +1. **Per-page selector:** Used to choose the number of items displayed on a single page at once. +2. **Previous page/next page:** Used to navigate back or forward one page of content at a time. -2. **Full pagination:** Supplies pagination controls, including page-back, page-forward, and a displayed items selector, which allows users to choose the number of items shown at once. +Compact pagination reduces visual crowding and saves space for additional actions in limited spaces, like toolbars. -The default recommendation for using pagination in mobile views is to place a pagination summary above the component it controls and a full pagination below the component, as shown in this example. If you can't use bottom pagination, or if you can't use the fall pager in the bottom toolbar for some reason, only then you can place the full pagination in the top toolbar. **Do not** use a full pagination in both the top and bottom toolbars. +### Indeterminate pagination -### Compact pagination +When it's difficult to calculate the total number of items or page count upfront, you can use an indeterminate pagination, which replaces the total page number in the per-page selector with a general label of “many”. Users can still choose the number of items shown at once, and the indeterminate label can be used within both full and compact pagination components. + +
+![Example of a indeterminate pagination.](./img/indeterminate-pagination.svg) +
-Compact pagination saves space for additional actions in limited spaces, like toolbars, and can help reduce visual crowding. Like with full pagination, compact pagination condenses to a pagination summary for mobile views. +## Placement -#### Desktop compact pagination in toolbar +### Desktop + +For desktop views, place a full pagination component above the content it controls, typically within a toolbar.
-![Example of a compact pagination.](./img/compact-pagination.svg) +![an example of a desktop pagination component within a toolbar.](./img/toolbar-pagination.svg)
-1. **Displayed items selector:** Allows users to choose the number of items shown at once. +1. **Per-page selector:** Used to choose the number of items displayed on a single page at once. -2. **Compact pagination:** Supplies pagination controls, including page-back and page-next controls. +2. **Full pagination:** Supplies data navigation controls, including previous page and next page, first page and last page, and a manual option to type in a desired page number. -### Indeterminate pagination +When used in a toolbar, pagination may leave limited room for other items like filters or bulk selectors. These additional items will automatically move into an [overflow menu](/components/toolbar/design-guidelines#overflow-menu) as needed. + +For components with long, scrolling content (like a table), you can add a second full pagination component below the content to ensure that users can navigate without having to scroll back to the top. + +### Mobile -Use indeterminate pagination if it’s difficult to calculate the total number of items or page count upfront. In these cases, you use “many” instead of a specific page count that would otherwise appear. Users can still select this control to choose the number of items shown at once. +Mobile pagination is formatted differently in order to conserve space. On mobile, full pagination will collapse to a pagination summary with an item count. [Learn how to customize overflow menu breakpoints in our toolbar design guidelines](/components/toolbar/design-guidelines).
-![Example of a indeterminate pagination.](./img/indeterminate-pagination.svg) -
\ No newline at end of file +![Example of pagination on mobile table view.](./img/mobile-pagination.svg) + + +1. **Pagination summary:** A non-interactive count of items currently displayed. + +2. **Mobile pagination:** A type of compact pagination, with a previous page, next page, and a per-page selector, which allows users to choose the number of items shown at once. Mobile views use compact styling, which removes the first page and last page controls. + +When using pagination in mobile views, follow these best practices: +- As shown in this example, place a pagination summary above the component it controls and a mobile pagination below the component. +- Do not use full pagination in both the top and bottom toolbars. +- If you can't use bottom pagination, or if you can't use the compact pagination in the bottom toolbar for some reason, only then you can place the compact pagination in the top toolbar. \ No newline at end of file From ae0de10141f5c09a77af2a0ed976d4198ad295c9 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Tue, 25 Nov 2025 10:27:47 -0500 Subject: [PATCH 3/5] iss4795 --- .../pagination/img/full-pagination.svg | 56 +++++++++++ .../img/indeterminate-pagination.svg | 13 ++- .../pagination/img/mobile-pagination.svg | 23 +++++ .../pagination/img/toolbar-pagination.svg | 99 ++++++++++++------- .../components/pagination/pagination.md | 26 +++-- 5 files changed, 158 insertions(+), 59 deletions(-) create mode 100644 packages/documentation-site/patternfly-docs/content/components/pagination/img/full-pagination.svg diff --git a/packages/documentation-site/patternfly-docs/content/components/pagination/img/full-pagination.svg b/packages/documentation-site/patternfly-docs/content/components/pagination/img/full-pagination.svg new file mode 100644 index 0000000000..54ff0a2ec0 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/pagination/img/full-pagination.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/pagination/img/indeterminate-pagination.svg b/packages/documentation-site/patternfly-docs/content/components/pagination/img/indeterminate-pagination.svg index 5dc4822544..88a1ec5d68 100644 --- a/packages/documentation-site/patternfly-docs/content/components/pagination/img/indeterminate-pagination.svg +++ b/packages/documentation-site/patternfly-docs/content/components/pagination/img/indeterminate-pagination.svg @@ -1,18 +1,17 @@ - - + + - - + + - - - + + diff --git a/packages/documentation-site/patternfly-docs/content/components/pagination/img/mobile-pagination.svg b/packages/documentation-site/patternfly-docs/content/components/pagination/img/mobile-pagination.svg index 85fec1afe5..1268e08d4a 100644 --- a/packages/documentation-site/patternfly-docs/content/components/pagination/img/mobile-pagination.svg +++ b/packages/documentation-site/patternfly-docs/content/components/pagination/img/mobile-pagination.svg @@ -97,17 +97,40 @@ +<<<<<<< HEAD +======= + + + + + + + + + +>>>>>>> 08a7d255c (iss4795) + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/pagination/img/toolbar-pagination.svg b/packages/documentation-site/patternfly-docs/content/components/pagination/img/toolbar-pagination.svg index ccef717a7a..adf564a1cc 100644 --- a/packages/documentation-site/patternfly-docs/content/components/pagination/img/toolbar-pagination.svg +++ b/packages/documentation-site/patternfly-docs/content/components/pagination/img/toolbar-pagination.svg @@ -1,63 +1,80 @@ + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - + + - - + + + + - + - - - - - - - - + + + + + + + + + - - - - - - + + + + + + - + - - - - - - - - - - - - - - - + @@ -68,5 +85,11 @@ + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/pagination/pagination.md b/packages/documentation-site/patternfly-docs/content/components/pagination/pagination.md index bd40092d24..5788b91b25 100644 --- a/packages/documentation-site/patternfly-docs/content/components/pagination/pagination.md +++ b/packages/documentation-site/patternfly-docs/content/components/pagination/pagination.md @@ -14,7 +14,9 @@ Pagination allows users to conveniently navigate through content-dense component 1. **Top pagination:** Placed above the component it controls and aligned to the right. -2. **Bottom pagination:** Placed below the component it controls. Right-aligned for desktop views and center-aligned for mobile. If you want bottom pagination to be sticky so that it remains in view as users scroll through long content, place it directly after the component it controls and refer to the [React sticky pagination](/components/pagination#sticky) or [HTML sticky pagination](/components/pagination/html#bottom-sticky) examples for implementation guidance. +2. **Bottom pagination:** Placed directly after the component it controls. On desktop, bottom pagination is right-aligned by default. On mobile, bottom pagination is center-aligned and sticky by default. + +To make either top or bottom pagination sticky, so that it remains in view as users scroll through long content, refer to the [React sticky pagination](/components/pagination#sticky) or [HTML sticky pagination](/components/pagination/html#bottom-sticky) examples for implementation guidance. ## Variations @@ -49,29 +51,25 @@ Compact pagination reduces visual crowding and saves space for additional action ### Indeterminate pagination -When it's difficult to calculate the total number of items or page count upfront, you can use an indeterminate pagination, which replaces the total page number in the per-page selector with a general label of “many”. Users can still choose the number of items shown at once, and the indeterminate label can be used within both full and compact pagination components. +When it's difficult to calculate the total number of items or page count upfront, you can use an indeterminate pagination, which replaces the total page number in the per-page selector with a general label of “many”. Users can still choose the number of items shown at once, and the indeterminate label can be used within both full and compact pagination.
-![Example of a indeterminate pagination.](./img/indeterminate-pagination.svg) +![Example of an indeterminate pagination.](./img/indeterminate-pagination.svg)
## Placement ### Desktop -For desktop views, place a full pagination component above the content it controls, typically within a toolbar. +For desktop views, place [full pagination](#full-pagination) above the content it controls, typically within a toolbar.
![an example of a desktop pagination component within a toolbar.](./img/toolbar-pagination.svg)
-1. **Per-page selector:** Used to choose the number of items displayed on a single page at once. - -2. **Full pagination:** Supplies data navigation controls, including previous page and next page, first page and last page, and a manual option to type in a desired page number. - -When used in a toolbar, pagination may leave limited room for other items like filters or bulk selectors. These additional items will automatically move into an [overflow menu](/components/toolbar/design-guidelines#overflow-menu) as needed. +When used in a toolbar, pagination may leave limited room for other items like filters or bulk selectors. These additional items should automatically move into an [overflow menu](/components/toolbar/design-guidelines#overflow-menu) as needed. -For components with long, scrolling content (like a table), you can add a second full pagination component below the content to ensure that users can navigate without having to scroll back to the top. +For components with long, scrolling content (like a table), you can add a second full pagination component below the content to ensure that users can navigate without scrolling back to the top. ### Mobile @@ -83,9 +81,9 @@ Mobile pagination is formatted differently in order to conserve space. On mobile 1. **Pagination summary:** A non-interactive count of items currently displayed. -2. **Mobile pagination:** A type of compact pagination, with a previous page, next page, and a per-page selector, which allows users to choose the number of items shown at once. Mobile views use compact styling, which removes the first page and last page controls. +2. **Bottom pagination:** When bottom pagination shrinks in size for mobile, it becomes more compact, with a previous page, next page, and a per-page selector that allows users to choose the number of items shown at once. There are no first-page and last-page controls for bottom pagination on mobile. When using pagination in mobile views, follow these best practices: -- As shown in this example, place a pagination summary above the component it controls and a mobile pagination below the component. -- Do not use full pagination in both the top and bottom toolbars. -- If you can't use bottom pagination, or if you can't use the compact pagination in the bottom toolbar for some reason, only then you can place the compact pagination in the top toolbar. \ No newline at end of file +- Use a top-pagination summary and bottom pagination. +- Only use full pagination for top navigation on mobile when you can't use bottom pagination, or when you can only use the bottom-pagination summary (instead of a full bottom pagination). +- Never use full pagination for both the top and bottom pagination on mobile. \ No newline at end of file From bfd0dc5be719249f474884b692445bafdd345ffd Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Mon, 1 Dec 2025 10:22:21 -0500 Subject: [PATCH 4/5] Tweak desktop/mobile sections --- .../pagination/img/bottom-pagination.svg | 64 +++++++++++++++++++ .../pagination/img/mobile-pagination.svg | 56 +++++++--------- .../components/pagination/pagination.md | 12 +++- 3 files changed, 95 insertions(+), 37 deletions(-) create mode 100644 packages/documentation-site/patternfly-docs/content/components/pagination/img/bottom-pagination.svg diff --git a/packages/documentation-site/patternfly-docs/content/components/pagination/img/bottom-pagination.svg b/packages/documentation-site/patternfly-docs/content/components/pagination/img/bottom-pagination.svg new file mode 100644 index 0000000000..f17fdf1c84 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/components/pagination/img/bottom-pagination.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/components/pagination/img/mobile-pagination.svg b/packages/documentation-site/patternfly-docs/content/components/pagination/img/mobile-pagination.svg index 1268e08d4a..41a5503b9f 100644 --- a/packages/documentation-site/patternfly-docs/content/components/pagination/img/mobile-pagination.svg +++ b/packages/documentation-site/patternfly-docs/content/components/pagination/img/mobile-pagination.svg @@ -2,7 +2,7 @@ - + @@ -11,10 +11,10 @@ - + - + @@ -30,20 +30,17 @@ - - - - - - - + + + + - + - + @@ -52,16 +49,16 @@ - + - - + + - + @@ -70,16 +67,16 @@ - + - - + + - + @@ -88,23 +85,15 @@ - + - - - - + + + + -<<<<<<< HEAD - - - - - - -======= @@ -114,7 +103,6 @@ ->>>>>>> 08a7d255c (iss4795) diff --git a/packages/documentation-site/patternfly-docs/content/components/pagination/pagination.md b/packages/documentation-site/patternfly-docs/content/components/pagination/pagination.md index 5788b91b25..3354a759f3 100644 --- a/packages/documentation-site/patternfly-docs/content/components/pagination/pagination.md +++ b/packages/documentation-site/patternfly-docs/content/components/pagination/pagination.md @@ -61,7 +61,7 @@ When it's difficult to calculate the total number of items or page count upfront ### Desktop -For desktop views, place [full pagination](#full-pagination) above the content it controls, typically within a toolbar. +For desktop views, place [full pagination](#full-pagination) above the content it controls ("top pagination"), typically within a toolbar.
![an example of a desktop pagination component within a toolbar.](./img/toolbar-pagination.svg) @@ -69,11 +69,17 @@ For desktop views, place [full pagination](#full-pagination) above the content i When used in a toolbar, pagination may leave limited room for other items like filters or bulk selectors. These additional items should automatically move into an [overflow menu](/components/toolbar/design-guidelines#overflow-menu) as needed. -For components with long, scrolling content (like a table), you can add a second full pagination component below the content to ensure that users can navigate without scrolling back to the top. +Also place full pagination below the component it controls ("bottom pagination"). + +
+![an example of a bottom pagination component placed after a table.](./img/bottom-pagination.svg) +
+ +Bottom pagination lets users easily navigate lengthy datasets without scrolling back to the top, while ensuring that pagination adapts appropriately when switching from desktop to mobile. ### Mobile -Mobile pagination is formatted differently in order to conserve space. On mobile, full pagination will collapse to a pagination summary with an item count. [Learn how to customize overflow menu breakpoints in our toolbar design guidelines](/components/toolbar/design-guidelines). +On mobile, pagination adapts in order to better conserve space. When switching from desktop to mobile, top pagination will collapse to a pagination summary with an item count and bottom pagination will adapt to a more compact design. [Learn how to customize overflow menu breakpoints in our toolbar design guidelines](/components/toolbar/design-guidelines).
![Example of pagination on mobile table view.](./img/mobile-pagination.svg) From d25d5ffde2619b61b7189b7bd5494872682879a1 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Tue, 9 Dec 2025 08:50:42 -0500 Subject: [PATCH 5/5] Remove link within mobile section. --- .../patternfly-docs/content/components/pagination/pagination.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/components/pagination/pagination.md b/packages/documentation-site/patternfly-docs/content/components/pagination/pagination.md index 3354a759f3..3ae622bf7b 100644 --- a/packages/documentation-site/patternfly-docs/content/components/pagination/pagination.md +++ b/packages/documentation-site/patternfly-docs/content/components/pagination/pagination.md @@ -79,7 +79,7 @@ Bottom pagination lets users easily navigate lengthy datasets without scrolling ### Mobile -On mobile, pagination adapts in order to better conserve space. When switching from desktop to mobile, top pagination will collapse to a pagination summary with an item count and bottom pagination will adapt to a more compact design. [Learn how to customize overflow menu breakpoints in our toolbar design guidelines](/components/toolbar/design-guidelines). +On mobile, pagination adapts in order to better conserve space. When switching from desktop to mobile, top pagination will collapse to a pagination summary with an item count and bottom pagination will adapt to a more compact design.
![Example of pagination on mobile table view.](./img/mobile-pagination.svg)