Design Pattern

Pagination

Pagination is a navigation that splits content across multiple pages and supports prev/next movement as well as direct jumps. The basics are nav with a list structure and aria-current to mark the current page.

Difficulty: Beginner Category: Navigation

When to use / not use

Use it when

  • When displaying many items across multiple pages, such as search results or article lists
  • When users need to jump directly to a specific page
  • When cramming everything into one page hurts performance or scannability

Don't use it when

  • When items are few and fit on a single page
  • When infinite scrolling fits the context better
  • When splitting into pages would hurt reading flow or comparison

Anatomy

1 Navigation container (nav element)
2 Previous / next buttons
3 Page-number links
4 Current page (marked with aria-current)
5 Ellipsis (omission indicator for many pages)
  1. nav — The landmark wrapping the pagination. Use aria-label to describe its purpose
  2. Prev / next — Navigation to the immediately previous/next page
  3. Page numbers — Links that jump directly to individual pages
  4. Current page — Marked with aria-current="page"
  5. Ellipsis — A decorative element that indicates an omitted range when there are many pages

HTML Structure

Key points

  • State the pagination's purpose with <nav> and aria-label
  • Structure the list of links with <ul> / <li>
  • Mark the current page with aria-current="page"
  • Give meaningful labels to prev/next and icon-only buttons

CSS Implementation

Styling points

  • Use Flexbox with gap for even spacing
  • Clearly differentiate the current page with background, bold weight, and borders
  • Align min-width and height so tap targets stay consistent across digit counts
  • Make keyboard focus visible with :focus-visible

Accessibility

WCAG 2.4.8 Location

With aria-current, screen reader users can also grasp the current page.

WCAG 2.1.1 Keyboard

All prev/next and number links must be reachable by keyboard and their state must be distinguishable.

Keyboard operation

  • Use Tab to move between prev/next and page links
  • Press Enter to navigate
  • The current page is announced to screen readers with additional context

Live Demo

Basic pagination

A standard layout with prev/next and numbered links.

PreviewFullscreen

With ellipsis

A pattern that omits middle pages when there are many.

PreviewFullscreen

Compact

A mobile-friendly variation with less information.

PreviewFullscreen

Common mistakes

Missing nav landmark

Wrapping only with div makes the in-page navigation harder to find.

No aria-current

The current page isn't conveyed to assistive technology, creating a visual-only UI.

Ambiguous link meanings

Prev/next and icon-only buttons need understandable labels.

Removing disabled buttons entirely

On first/last pages, it's more stable to show the buttons in a disabled state than to remove them.