Pagination

Navigate between pages of content. Simple prev/next and ellipsis page-number variants, with optional HTMX wiring.

Usage Example

@pagination.Pagination(pagination.Config{
    Variant:     pagination.Simple,
    CurrentPage: 3,
    TotalPages:  10,
    BaseURL:     "/items",
})

Simple — First Page

The Previous control auto-disables on the first page (and Next on the last).

Simple — First Page

@pagination.Pagination(pagination.Config{
    Variant:     pagination.Simple,
    CurrentPage: 1,
    TotalPages:  10,
    BaseURL:     "/items",
})

With Ellipsis — Beginning

Variant: pagination.WithEllipsis shows page numbers, collapsing large ranges with an ellipsis.

With Ellipsis — Beginning

@pagination.Pagination(pagination.Config{
    Variant:     pagination.WithEllipsis,
    CurrentPage: 2,
    TotalPages:  30,
    BaseURL:     "/items",
})

With Ellipsis — Middle

A current page in the middle collapses both sides with ellipses.

With Ellipsis — Middle

@pagination.Pagination(pagination.Config{
    Variant:     pagination.WithEllipsis,
    CurrentPage: 15,
    TotalPages:  30,
    BaseURL:     "/items",
})

With Ellipsis — End

Near the end, only the leading range collapses.

With Ellipsis — End

@pagination.Pagination(pagination.Config{
    Variant:     pagination.WithEllipsis,
    CurrentPage: 29,
    TotalPages:  30,
    BaseURL:     "/items",
})

Small Page Count

With 7 or fewer pages, every page number is shown (no ellipsis). Add HTMX.Target + HTMX.Swap to swap content in place instead of navigating.

Small Page Count

@pagination.Pagination(pagination.Config{
    Variant:     pagination.WithEllipsis,
    CurrentPage: 5,
    TotalPages:  30,
    BaseURL:     "/api/items",
    HTMX: &pagination.HTMXConfig{Target: "#items-tbody", Swap: "innerHTML"},
})

API Reference

Prop	Type	Default	Description
`Variant`	`Variant`	`WithEllipsis`	Style: "simple" (prev/next only) or "ellipsis" (page numbers).
`CurrentPage`	`int`	`1`	The active page (1-indexed).
`TotalPages`	`int`	`1`	Total number of pages.
`BaseURL`	`string`	`""`	Base href for page links (page appended as a query/path).
`HTMX`	`*HTMXConfig`	`nil`	In-place HTMX navigation (Target, Swap).
`ID`	`string`	`""`	Optional element id on the nav.
`NavClass`	`string`	`""`	Extra classes on the nav.

Navbar Sidebar