Examples
Basic
A fixed-height, scrollable data-list. The sentinel fires once on load to fetch the first
page, then again each time it is scrolled back into view — appending rows from
/api/htmx/items until the list is exhausted.
Documentation
Sentinel props
Parameters accepted by
{#include components/htmx/infinite-scroll loadUrl="..." /}.
| Name | Type | Default | Description |
|---|---|---|---|
loadUrl
|
String (URL) | — (required) |
Endpoint HTMX hx-gets when the sentinel is revealed. The response must contain
the next batch of markup followed by a fresh sentinel pointing at the page after it, or an empty body once
there is nothing left to load.
|
id
|
String | — | DOM id on the sentinel element. Optional — set it only when something else needs to reference the sentinel (tests, scripting). |
The sentinel ships hx-trigger="revealed" and
hx-swap="afterend" baked in, so loaded rows land before the sentinel and the sentinel
moves down with them. A
htmx-indicator
spinner inside the sentinel shows while the request is in flight.
Usage
The server owns the paging. Each response carries the next sentinel with the incremented page baked
into its loadUrl. The client keeps no page counter — it just reveals sentinels and
swaps in whatever the server returns. End the chain by returning an empty body (or markup without a trailing
sentinel) when the data runs out.
Reveal, not scroll-position math.
hx-trigger="revealed" fires when the sentinel enters the viewport, so it works the same
whether the list lives in a fixed-height scroll container (as here) or flows down the whole page. For a scroll
container, give it an explicit max-height and
overflow-y: auto.
Accessibility. Wrap the list in a labelled role="region" with
tabindex="0" so keyboard users can scroll it, and give the in-flight spinner an
aria-label (e.g. "Loading more items"). Consider a "Load more" button fallback (see
click to load) for users who can't trigger reveal-on-scroll.
Not a PatternFly component. This is an HTMX interaction pattern, not a PF element — it composes a
plain data-list with a server-driven sentinel. PatternFly has no infinite-scroll
primitive of its own.