Numbered

With disabled prev

As anchors

Interactive — small range

Five pages of ten items each. All page numbers fit, so no ellipsis is rendered.

<nav class="brut-pagination" data-brut="pagination"
     data-total="50" data-page-size="10" data-page="1"></nav>

Interactive — large range with ellipsis

Twenty-five pages with the current page mid-stream; outer pages collapse into ellipsis gaps.

Interactive — wider sibling window

Same dataset as above but with data-sibling-count="2", exposing more neighbours around the current page.

Interactive — with page-size selector

Adding data-page-sizes="10,25,50,100" renders a native .brut-select picker. Changing it resets to page 1 and dispatches brut:change.

<nav class="brut-pagination" data-brut="pagination"
     data-total="500" data-page-size="25" data-page="1"
     data-page-sizes="10,25,50,100"></nav>

Interactive — localized page-size label

Use data-brut-label-page-size to override the default “Per page:” label.