Pagination

Pagination wrappers for previous/next links, list items, and ellipsis.

Bulma Pattern

This wrapper follows Bulma's Components markup. Compare class behavior with the official Bulma docs.

Supported tags

<pagination><pagination-previous><pagination-next><pagination-list><pagination-link><pagination-ellipsis>

Example

<pagination centered rounded ariaLabel="pagination">
  <pagination-previous href="/page/1">Previous</pagination-previous>
  <pagination-next href="/page/3">Next page</pagination-next>
  <pagination-list>
    <li><pagination-link page="1" href="/page/1">1</pagination-link></li>
    <li><pagination-ellipsis></pagination-ellipsis></li>
    <li><pagination-link current page="2" href="/page/2">2</pagination-link></li>
  </pagination-list>
</pagination>

Usage Notes

  • Alignment and size modifiers are available on `<pagination>`.
  • `<pagination-link current>` sets current page semantics.
  • Pass `page` for an automatic `aria-label`, or `ariaLabel` to write your own.
  • Previous/next tags handle disabled and safe href states.
Back to Components

Maintained by aldi

The source code is licensed under MIT.

Available on GitHub and npm.