Bulma Pagination

Bulma Pagination component provides a clean and responsive way to navigate through multiple pages of content. It supports different sizes, styles, and can be easily customized.

Basic Pagination

Simple pagination with page numbers:

<nav class="pagination" role="navigation" aria-label="pagination">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next</a>
  
  <ul class="pagination-list">
    <li><a class="pagination-link">1</a></li>
    <li><a class="pagination-link is-current">2</a></li>
    <li><a class="pagination-link">3</a></li>
  </ul>
</nav>

Disabled States

Disable previous/next buttons when appropriate:

<nav class="pagination">
  <!-- Disabled previous button -->
  <a class="pagination-previous" disabled>Previous</a>
  
  <!-- Disabled next button -->
  <a class="pagination-next" disabled>Next</a>
  
  <ul class="pagination-list">
    <li><a class="pagination-link is-current">1</a></li>
    <li><a class="pagination-link">2</a></li>
    <li><a class="pagination-link">3</a></li>
  </ul>
</nav>

Pagination with Icons

<nav class="pagination">
  <a class="pagination-previous">
    <span class="icon">
      <i class="fas fa-chevron-left"></i>
    </span>
    <span>Previous</span>
  </a>
  
  <a class="pagination-next">
    <span>Next</span>
    <span class="icon">
      <i class="fas fa-chevron-right"></i>
    </span>
  </a>
  
  <ul class="pagination-list">
    <li><a class="pagination-link">1</a></li>
    <li><a class="pagination-link is-current">2</a></li>
    <li><a class="pagination-link">3</a></li>
  </ul>
</nav>

Pagination Sizes

Control the size of pagination elements:

<!-- Small -->
<nav class="pagination is-small">

<!-- Default -->
<nav class="pagination">

<!-- Medium -->
<nav class="pagination is-medium">

<!-- Large -->
<nav class="pagination is-large">

Rounded Pagination

<nav class="pagination is-rounded">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next</a>
  
  <ul class="pagination-list">
    <li><a class="pagination-link">1</a></li>
    <li><a class="pagination-link is-current">2</a></li>
    <li><a class="pagination-link">3</a></li>
  </ul>
</nav>

Pagination with Ellipsis

For large number of pages, use ellipsis:

<nav class="pagination">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next</a>
  
  <ul class="pagination-list">
    <li><a class="pagination-link">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link">45</a></li>
    <li><a class="pagination-link is-current">46</a></li>
    <li><a class="pagination-link">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link">86</a></li>
  </ul>
</nav>

Centered and Aligned Pagination

<!-- Centered -->
<nav class="pagination is-centered">

<!-- Right aligned -->
<nav class="pagination is-right">

Responsive Pagination

Hide page numbers on mobile, show on desktop:

<nav class="pagination">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next</a>
  
  <ul class="pagination-list is-hidden-mobile">
    <li><a class="pagination-link">1</a></li>
    <li><a class="pagination-link is-current">2</a></li>
    <li><a class="pagination-link">3</a></li>
  </ul>
</nav>

JavaScript Integration

Handle pagination clicks dynamically:

// Example: Dynamic pagination
let currentPage = 1;
const totalPages = 10;

function renderPagination() {
  const pagination = document.getElementById('pagination');
  let html = `
    <nav class="pagination" role="navigation" aria-label="pagination">
      <a class="pagination-previous" ${currentPage === 1 ? 'disabled' : ''}>
        Previous
      </a>
      <a class="pagination-next" ${currentPage === totalPages ? 'disabled' : ''}>
        Next
      </a>
      <ul class="pagination-list">
  `;
  
  // Always show first page
  html += `<li><a class="pagination-link ${currentPage === 1 ? 'is-current' : ''}" data-page="1">1</a></li>`;
  
  // Show ellipsis if needed
  if (currentPage > 3) {
    html += '<li><span class="pagination-ellipsis">&hellip;</span></li>';
  }
  
  // Show pages around current page
  for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) {
    html += `<li><a class="pagination-link ${currentPage === i ? 'is-current' : ''}" data-page="${i}">${i}</a></li>`;
  }
  
  // Show ellipsis if needed
  if (currentPage < totalPages - 2) {
    html += '<li><span class="pagination-ellipsis">&hellip;</span></li>';
  }
  
  // Always show last page
  if (totalPages > 1) {
    html += `<li><a class="pagination-link ${currentPage === totalPages ? 'is-current' : ''}" data-page="${totalPages}">${totalPages}</a></li>`;
  }
  
  html += '</ul></nav>';
  pagination.innerHTML = html;
  
  // Add event listeners
  pagination.querySelectorAll('.pagination-link').forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      currentPage = parseInt(e.target.dataset.page);
      renderPagination();
      loadPage(currentPage);
    });
  });
  
  pagination.querySelector('.pagination-previous').addEventListener('click', (e) => {
    if (currentPage > 1) {
      currentPage--;
      renderPagination();
      loadPage(currentPage);
    }
  });
  
  pagination.querySelector('.pagination-next').addEventListener('click', (e) => {
    if (currentPage < totalPages) {
      currentPage++;
      renderPagination();
      loadPage(currentPage);
    }
  });
}

function loadPage(page) {
  // Your logic to load page content
  console.log('Loading page:', page);
}

Practical Examples

Table Pagination

<div class="table-container">
  <table class="table is-fullwidth">
    <!-- Table content -->
  </table>
</div>

<nav class="pagination is-centered mt-4">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next</a>
  
  <ul class="pagination-list">
    <li><a class="pagination-link">1</a></li>
    <li><a class="pagination-link is-current">2</a></li>
    <li><a class="pagination-link">3</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link">10</a></li>
  </ul>
</nav>

Blog Pagination

<div class="columns is-multiline">
  <!-- Blog posts -->
</div>

<nav class="pagination is-centered mt-6">
  <a class="pagination-previous">
    <span class="icon"><i class="fas fa-arrow-left"></i></span>
    <span>Older Posts</span>
  </a>
  
  <a class="pagination-next">
    <span>Newer Posts</span>
    <span class="icon"><i class="fas fa-arrow-right"></i></span>
  </a>
  
  <ul class="pagination-list is-hidden-touch">
    <li><a class="pagination-link">1</a></li>
    <li><a class="pagination-link is-current">2</a></li>
    <li><a class="pagination-link">3</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link">8</a></li>
  </ul>
</nav>

E-commerce Product Pagination

<div class="level">
  <div class="level-left">
    <div class="level-item">
      <p class="has-text-grey">Showing 1-12 of 120 products</p>
    </div>
  </div>
  
  <div class="level-right">
    <div class="level-item">
      <nav class="pagination">
        <a class="pagination-previous">Previous</a>
        <a class="pagination-next">Next</a>
        
        <ul class="pagination-list">
          <li><a class="pagination-link">1</a></li>
          <li><a class="pagination-link is-current">2</a></li>
          <li><a class="pagination-link">3</a></li>
          <li><span class="pagination-ellipsis">&hellip;</span></li>
          <li><a class="pagination-link">10</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

Best Practices

• Always include ARIA labels for accessibility
• Disable previous button on first page and next button on last page
• Use ellipsis for large page ranges to maintain clean design
• Consider mobile users - hide page numbers on small screens if space is limited
• Highlight current page clearly with is-current class
• Provide clear navigation labels (Previous/Next)

Next: Bulma Panel Component