Live demo — this example is server-driven; run the showcase locally for the interactive version.

Pagination

Page-by-page navigation for long lists. PF's pagination is a container — you compose the total-items text and the navigation control buttons inside its slot.

Examples

Top

Alpine drives the per-page menu, the page input, and the nav controls; the range updates live.

of 523

Top sticky

pf-m-sticky pins the pagination while the container scrolls.

of 523

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

Row 7

Row 8

Row 9

Row 10

Row 11

Row 12

Indeterminate

Unknown total: shows "of many" with no input max, and the last-page control stays disabled.

of many

Bottom

pf-m-bottom for placement under tables: no total-items block and the per-page menu opens upward.

Bottom plain

pf-m-plain gives the bottom bar a transparent background.

Content above the pagination — the plain modifier removes the bottom bar's background so it blends with the page.

Bottom sticky

Sticks to the bottom edge of the scrolling container.

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

Row 7

Row 8

Row 9

Row 10

Row 11

Row 12

Top sticky with base and stuck

pf-m-sticky-base always; scrolling applies pf-m-sticky-stuck live. Covers the PF React Dynamic sticky top example.

of 523

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

Row 7

Row 8

Row 9

Row 10

Row 11

Row 12

Bottom sticky with base and stuck

Floating with pf-m-sticky-stuck until the container is scrolled to its end. Covers the PF React Dynamic sticky bottom example.

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

Row 7

Row 8

Row 9

Row 10

Row 11

Row 12

Bottom static

pf-m-static keeps the bottom bar in the normal document flow.

Content above the pagination — the static modifier keeps the bottom bar in the normal document flow.

Disabled

All controls disabled: menu toggle, page input, and nav buttons.

of 523

Compact

Prev/next only.

of 523

Top with display summary modifier

pf-m-display-summary forces the collapsed summary presentation.

of 523

Top with display full modifier

pf-m-display-full forces the full presentation at every width.

of 523

Responsive display summary and full

Summary by default, full on lg, summary on xl, full on 2xl.

of 523

Compact display full modifier

The compact variant forced to the full presentation.

of 523

Inset

Responsive insets: none by default, md padding on md, 2xl padding on lg and up.

of 523

No items

Zero state: 0 - 0 of 0, everything disables itself via the live state.

of 0

One page

All items fit one page; paging controls disabled, per-page menu still usable.

of 8

Offset

Starts mid-list (21 - 30 of 523), the PF React consumer-managed offset example.

of 523

Dynamic sticky

A checkbox toggles pf-m-sticky live.

Pagination is sticky

of 523

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

Row 7

Row 8

Row 9

Row 10

Row 11

Row 12

Documentation

Pagination props

Parameters accepted by {#include components/navigation/pagination ... /}. Model mode: pass pagination=<Pagination> built in Java instead — the Java tab on each example shows the builder. The internal structure (total items, nav buttons) goes in the slot.

* required
Name	Type	Description
`id`	String	Optional DOM id on the root.
`compact`	boolean	Adds `pf-m-compact`.
`bottom`	boolean	Adds `pf-m-bottom`.
`modifiers`	String	Extra `pf-m-*` classes on the root — insets, display-summary/full, sticky, plain, static.
slot `content`	Qute block	Pagination internals — total items text + nav control buttons.

Usage

HTMX-driven page changes. Wire each nav button with hx-get="/items?page=N" and hx-target to swap the table body. Server returns the next page's HTML.

Edit pagination.html on GitHub