→ Morgan
→ Pagination with Items Per Page Filter

Pagination with Items Per Page Filter

A responsive pagination component with an items per page dropdown filter, featuring previous and next navigation buttons optimized for mobile displays.

This Example is contributed by Morgan, on 26-Feb-2025. It is responsive.

Pagination Navigation Filter

Author Morgan

Fork Fullscreen

<div class="pagination-container">
  <div class="pagination-controls">
    <div class="items-per-page">
      <label for="itemsPerPage">Items per page:</label>
      <select id="itemsPerPage">
        <option value="5">5</option>
        <option value="10" selected>10</option>
        <option value="25">25</option>
        <option value="50">50</option>
      </select>
    </div>
    <div class="page-info">
      <span id="pageInfo">Showing 1-10 of 87 items</span>
    </div>
  </div>
  
  <div class="pagination-buttons">
    <button class="page-btn prev-btn" disabled>
      <span class="arrow">&laquo;</span>
      <span class="text">Previous</span>
    </button>
    
    <div class="page-numbers">
      <button class="page-btn number-btn active">1</button>
      <button class="page-btn number-btn">2</button>
      <button class="page-btn number-btn">3</button>
      <button class="page-btn number-btn">4</button>
      <button class="page-btn number-btn">5</button>
      <span class="ellipsis">...</span>
      <button class="page-btn number-btn">9</button>
    </div>
    
    <button class="page-btn next-btn">
      <span class="text">Next</span>
      <span class="arrow">&raquo;</span>
    </button>
  </div>
</div>

Related Examples

Responsive Pagination Component with Active State Indicator

Author:
Alex Morgan

1 month ago
Minimal Clean Pagination Component
A clean and minimal pagination component with smooth transitions, perfect for modern web applications and content-heavy websites.

Author:
Bishnu Thapa

1 month ago
Compact Pagination CSS component

Author:
Anonymous

4 weeks ago
Rounded Pagination Component with Previous and Next Navigation
A clean pagination component with rounded buttons for page navigation, featuring previous and next options along with numbered page indicators.

Author:
Marcus Hendricks

1 month ago
Circular Navigation Pagination with Round Buttons
Stylish circular pagination buttons with hover effects and active state indicators. Improves user experience for paginated content.

Author:
Morgan

2 months ago
Pagination Component

Author:
Anonymous

2 months ago
Simple Pagination Component
A simple and accessible pagination component built with HTML, CSS, and JavaScript. Easily navigate through multiple pages of content.

Author:
Dino Smith

2 months ago
Responsive Pagination Navigation

Author:
Anonymous

2 months ago
Pagination Component

Author:
Anonymous

2 months ago
Simple Pagination Component
A clean and simple pagination component for navigating through pages of content. Easy to integrate and customize.

Author:
Janna Pineda

2 months ago
CSS-Only Hover Dropdown Select Menu
A lightweight dropdown select menu that activates on hover without any JavaScript. Perfect for clean navigation menus and form selects.

Author:
Mert Yılmaz

1 month ago
Features list with icons

Author:
Jordan McKenzie

2 months ago

Didn't find component you were looking for?

Search from 500+ components