Pagination

Live Examples

HTML Structure

<nav aria-label="Page navigation" class="pager">
  <ul>
    <li><a href="#" aria-label="Previous">Previous</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#" aria-current="page">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#" aria-label="Next">Next</a></li>
  </ul>
</nav>

Modifiers

• `span` - Plain text inside an `
• ` automatically centers and spaces correctly for status displays (e.g. "Showing 1 of 10").

Data Attributes

• `data-current="true"` - Marks current page link

ARIA Attributes

• `
• `aria-label` - Describes pagination purpose (e.g., "Page navigation")

Use Cases

• Search Results - Paginate through search results or listings
• Blog Archives - Navigate between blog post listings
• Product Listings - E-commerce product catalog pagination
• Data Tables - Paginate large datasets
• Document Galleries - Navigate through image or document collections

Accessibility

• Use semantic <nav> element with aria-label
• Active page indicator with .active class
• Consider adding aria-current="page" to active link
• All links must be keyboard focusable and operable
• Provide visual and semantic indication of current page

Responsive Behavior

This component automatically adapts to different screen sizes:

Mobile (< 768px)

On mobile devices:

• Optimized for small screens
• Touch-friendly spacing maintained (44px minimum)
• Text wraps naturally without overflow
• Content density optimized for readability

Desktop (1024px+)

On desktop displays:

• Enhanced visual features
• Hover states and transitions
• Full keyboard navigation support
• Optimal spacing and sizing

Framework Integration

Responsive behavior is automatic:

• Framework handles media queries
• No custom CSS required
• Mobile-first approach applied
• Accessibility maintained at all sizes

Best Practices

• Always show current page indicator
• Disable or hide Previous/Next buttons when at start/end
• Show page numbers for better navigation context
• Keep pagination controls consistent in placement
• Use clear labels like "Previous" and "Next"
• Consider showing total number of pages