Basic Pagination

A simple pagination with 10 pages, currently on page 3.

Large Range with Ellipsis

Pagination with 100 pages demonstrating ellipsis functionality and smart page range calculation.

First/Last Navigation

Pagination with first and last page buttons for quick navigation to boundaries.

Keyboard Navigation Demo

Try focusing on the pagination below and using keyboard navigation:

• Arrow Left/Right: Navigate to previous/next page
• Home/End: Jump to first/last page
• Tab: Move focus between pagination buttons
• Enter/Space: Activate the focused button

Programmatic Control

Control pagination programmatically using JavaScript API methods.

Compact Pagination

A smaller pagination where all pages are visible without ellipsis.

Boundary States

Demonstration of first and last page states with disabled navigation buttons.

Custom Theme Example

Pagination with custom colorset theming for different visual styles.

HTML Structure

Basic HTML structure for implementing pagination navigation:

<nav class="nav-pagination flex row gap items-center"
     data-total-pages="10"
     data-current-page="3"
     data-max-visible="5"
     data-show-first-last="true"
     aria-label="Pagination">
  <!-- Dynamically generated pagination buttons -->
</nav>

JavaScript Integration

Initialize pagination and handle events:

import { NavPagination } from '@/nav-pagination/scripts/services/nav-pagination.js'

// Initialize with HTML attributes
const pagination = new NavPagination(document.querySelector('.nav-pagination'))

// Or initialize with custom configuration
const paginationWithConfig = new NavPagination(element, {
  totalPages: 50,
  currentPage: 10,
  maxVisible: 5,
  showFirstLast: true,
  keyboardNavigation: true
})

// Listen for page changes
pagination.on('afterPageChange', ({ currentPage, totalPages }) => {
  console.log(`Navigated to page ${currentPage} of ${totalPages}`)
  // Update your data/content here
})

// Programmatic navigation
pagination.goToPage(7)
pagination.updateTotalPages(100)

Event Logging

Open your browser's developer console to see pagination events in real-time as you interact with the examples above.

Accessibility Features

The pagination component includes comprehensive accessibility support: