Pagination

Basic Pagination (5 pages)

Simple pagination with all pages visible. Current page is highlighted in purple.

<nav class="elv-pagination" role="navigation" aria-label="Pagination">
  <button class="elv-pagination__btn elv-pagination__btn--nav" aria-label="Previous page" disabled>
    <span class="material-symbols-outlined">chevron_left</span>
  </button>
  <button class="elv-pagination__btn elv-pagination__btn--current" aria-label="Page 1" aria-current="page">1</button>
  <button class="elv-pagination__btn" aria-label="Go to page 2">2</button>
  <button class="elv-pagination__btn" aria-label="Go to page 3">3</button>
  <button class="elv-pagination__btn" aria-label="Go to page 4">4</button>
  <button class="elv-pagination__btn" aria-label="Go to page 5">5</button>
  <button class="elv-pagination__btn elv-pagination__btn--nav" aria-label="Next page">
    <span class="material-symbols-outlined">chevron_right</span>
  </button>
</nav>

Many Pages with Truncation

For many pages, show truncation with ellipsis. Always show first, last, current, and adjacent pages.

<nav class="elv-pagination" role="navigation" aria-label="Pagination">
  <button class="elv-pagination__btn elv-pagination__btn--nav" aria-label="Previous page">
    <span class="material-symbols-outlined">chevron_left</span>
  </button>
  <button class="elv-pagination__btn" aria-label="Go to page 1">1</button>
  <span class="elv-pagination__ellipsis" aria-hidden="true">…</span>
  <button class="elv-pagination__btn" aria-label="Go to page 8">8</button>
  <button class="elv-pagination__btn elv-pagination__btn--current" aria-label="Page 9" aria-current="page">9</button>
  <button class="elv-pagination__btn" aria-label="Go to page 10">10</button>
  <span class="elv-pagination__ellipsis" aria-hidden="true">…</span>
  <button class="elv-pagination__btn" aria-label="Go to page 50">50</button>
  <button class="elv-pagination__btn elv-pagination__btn--nav" aria-label="Next page">
    <span class="material-symbols-outlined">chevron_right</span>
  </button>
</nav>

Edge Cases

First and last pages with disabled navigation buttons.

Interactive Demo

Click pages or use arrow keys when focused. Open console to see page changes.

Usage Notes

• Keyboard Navigation: Arrow keys navigate between pages when pagination is focused, Enter/Space activates
• ARIA Labels: Always include descriptive aria-label attributes for screen readers
• Current Page: Use aria-current="page" and elv-pagination__btn--current class
• Disabled State: Use disabled attribute for Previous/Next when at first/last page
• Truncation: Show first, last, current, and 1-2 adjacent pages. Use ellipsis (…) for gaps
• Ellipsis: Use aria-hidden="true" on ellipsis spans (not interactive)
• Mobile: On mobile (<640px), only show nav buttons, current, first, and last pages
• Links vs Buttons: Use <button> for JavaScript navigation, <a> for server-side pagination with href
• URL Updates: For SPA/client-side routing, update URL with pushState or hash on page change

Resources

• DESIGN.md — Elevate button and navigation specifications
• Elevate Lookbook — Visual component reference