Pagination — Vanilla

Pagination with vanilla HTML. Same BEM and structure as Astro/Svelte. Ensure Rizzo CSS is loaded.

Pagination

Accessible pagination with Previous/Next, optional First/Last, page numbers, and ellipsis for long ranges. Same structure as Astro and Svelte.

Basic usage

Click any page; URL hash and current page stay in sync (syncHash).

Live example

With First / Last

Live example

Without First / Last

Live example

Many pages (ellipsis)

When totalPages exceeds maxVisible, ellipsis is shown.

Live example

First and last page

Previous/Next and First/Last are disabled on boundaries.

Live example (page 1 of 5)

BEM structure

nav.pagination → ul.pagination__list → li.pagination__item. Each item contains either:

  • a.pagination__link or span.pagination__link for First/Previous/Next/Last (add pagination__link--prev / pagination__link--next; use span + pagination__link--disabled when disabled)
  • a.pagination__link for page numbers, or span.pagination__link.pagination__link--current for current page (aria-current="page")
  • span.pagination__ellipsis for â€Ļ

HTML – full (with First/Last)

html html 
<nav class="pagination" aria-label="Pagination">
  <ul class="pagination__list">
    <!-- Optional: First (omit if showFirstLast false) -->
    <li class="pagination__item">
      <a class="pagination__link pagination__link--prev" href="?page=1" aria-label="First page">First</a>
    </li>
    <li class="pagination__item">
      <a class="pagination__link pagination__link--prev" href="?page=1" aria-label="Previous page">Previous</a>
    </li>
    <li class="pagination__item">
      <span class="pagination__link pagination__link--current" aria-current="page">1</span>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="?page=2" aria-label="Page 2">2</a>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="?page=3" aria-label="Page 3">3</a>
    </li>
    <li class="pagination__item">
      <a class="pagination__link pagination__link--next" href="?page=2" aria-label="Next page">Next</a>
    </li>
    <li class="pagination__item">
      <a class="pagination__link pagination__link--next" href="?page=3" aria-label="Last page">Last</a>
    </li>
  </ul>
</nav>

HTML – without First/Last, page 1 (Previous disabled)

html html 
<nav class="pagination" aria-label="Pagination">
  <ul class="pagination__list">
    <li class="pagination__item">
      <span class="pagination__link pagination__link--prev pagination__link--disabled" aria-disabled="true">Previous</span>
    </li>
    <li class="pagination__item">
      <span class="pagination__link pagination__link--current" aria-current="page">1</span>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="?page=2" aria-label="Page 2">2</a>
    </li>
    <li class="pagination__item">
      <a class="pagination__link pagination__link--next" href="?page=2" aria-label="Next page">Next</a>
    </li>
  </ul>
</nav>

HTML – many pages with ellipsis

html html 
<nav class="pagination" aria-label="Pagination">
  <ul class="pagination__list">
    <li class="pagination__item"><a class="pagination__link pagination__link--prev" href="?page=1" aria-label="First page">First</a></li>
    <li class="pagination__item"><a class="pagination__link pagination__link--prev" href="?page=6" aria-label="Previous page">Previous</a></li>
    <li class="pagination__item"><a class="pagination__link" href="?page=1" aria-label="Page 1">1</a></li>
    <li class="pagination__item"><span class="pagination__ellipsis" aria-hidden="true">â€Ļ</span></li>
    <li class="pagination__item"><a class="pagination__link" href="?page=5" aria-label="Page 5">5</a></li>
    <li class="pagination__item"><a class="pagination__link" href="?page=6" aria-label="Page 6">6</a></li>
    <li class="pagination__item"><span class="pagination__link pagination__link--current" aria-current="page">7</span></li>
    <li class="pagination__item"><a class="pagination__link" href="?page=8" aria-label="Page 8">8</a></li>
    <li class="pagination__item"><span class="pagination__ellipsis" aria-hidden="true">â€Ļ</span></li>
    <li class="pagination__item"><a class="pagination__link" href="?page=20" aria-label="Page 20">20</a></li>
    <li class="pagination__item"><a class="pagination__link pagination__link--next" href="?page=8" aria-label="Next page">Next</a></li>
    <li class="pagination__item"><a class="pagination__link pagination__link--next" href="?page=20" aria-label="Last page">Last</a></li>
  </ul>
</nav>

Astro / Svelte: Astro ¡ Svelte