Floating Pagination
A pagination bar that hovers above the content with soft elevation. Stays visible while readers scroll through long articles, feeds, or paginated galleries.
A pagination bar that hovers above the content with soft elevation. Stays visible while readers scroll through long articles, feeds, or paginated galleries.
Search blocks by description or jump to a page.
Floating Pagination sits inside a scrollable container and sticks to the bottom of the visible area as the user scrolls through content. The pagination bar itself is a pill-shaped surface with a card background, a border, and a drop shadow that lifts it clear of the content beneath it. Inside the pill sit rounded previous and next controls, individual page number buttons, an ellipsis to skip the middle range, and a jump to the last visible page number.
The page numbers, ellipsis, and the total page count are all independent. You can adjust how many numbered items appear, move the ellipsis, or change which page is marked active without touching the container or the sticky positioning. The surrounding content area is also entirely separate, so the block drops into any scrollable feed, list, or result set you already have.
Use this block when your paginated content lives inside a bounded scrollable region and you want the navigation always in reach without a fixed header or footer claiming space. It suits a developer tools product well: a docs search results panel, a package listing, or an API reference feed where engineers scroll through entries and need to jump pages without losing their place in the viewport.
A natural flow around it on a Components page:
Before
After
The pill bar is the composable unit. Swap its contents to match your result set:
Tip: keep the visible page numbers to four or five at most so the pill stays narrow and readable on smaller viewports.