Pagination

Navigation between pages, collapsing long ranges. The current page is a span with aria-current, not a link — linking to where you already are is a dead control.

Interactive

Click a page: the URL changes and the marker follows.

page 14 of 20

@components.Pagination(components.PaginationProps{Current: page, Total: 20, BaseHref: "/components/pagination?page="})

At the edges

Each one starts at an edge and moves on its own, without touching the others. Move through the pages with ← → to watch the range collapse and reopen.

short — fits whole, never collapses · page 1 of 5

long, starting at the beginning · page 9 of 20

long, starting at the end · page 15 of 20

// Each example has its own parameter, and BaseHref carries the others along — without that, moving one resets the rest.