Pagination

Pagination helps users navigate through large sets of content split across multiple pages. These patterns use semantic <nav> elements with proper ARIA attributes for accessibility.

Key features:

• Semantic HTML with aria-label for screen readers
• Current page indication via aria-current="page"
• Disabled states for first/last page boundaries
• Responsive design that works on all screen sizes
• Keyboard navigation support

A minimal pagination with just Previous and Next buttons. Best for sequential content like blog posts or articles where page numbers are less important.

Pagination with numbered page links for direct page access. Includes ellipsis for large page ranges. Best for search results, product listings, or any content where users may want to jump to specific pages.

Complete pagination bar with result count, page navigation, and page size selector. Best for data tables and admin interfaces where users need full control over data display.

When on the first or last page, disable the corresponding navigation button to indicate the boundary. Use a <button> element with the disabled attribute instead of a link.

The base pagination styles are included in the nav element styles. These provide consistent sizing, hover states, and current page highlighting:

The pagination bar styles for the full variant (info text, nav, and page size selector) are included in VB's stylesheet. The layout uses CSS Grid to keep the nav centered while info and selector fill the remaining space. A container query handles responsive stacking:

Accessibility

• Always wrap pagination in a <nav> element with aria-label="Pagination"
• Mark the current page with aria-current="page"
• Add aria-label to icon-only buttons (e.g., "Previous page", "Next page")
• Use the disabled attribute on buttons for first/last page states
• Add aria-live="polite" to the results count (.pagination-info) so screen readers announce updates when the page changes
• Add aria-label="Items per page" on the page-size <select> for a complete accessible name
• Ensure all interactive elements are keyboard accessible

When to Use Each Variant

• Simple: Blog posts, articles, tutorials - sequential content where page numbers matter less
• Numbered: Search results, product catalogs - when users need to jump to specific pages
• Full: Data tables, admin dashboards - when users need result counts and page size control

Implementation Tips

• For server-rendered pages, use <a> elements with proper URLs
• For SPAs, use <button> elements with click handlers
• Consider hiding page numbers on mobile and showing only prev/next
• For very large datasets, consider infinite scroll as an alternative