Pagination

Controls to navigate through paged content or lists

What is it?

Pagination breaks large datasets into pages and provides controls to move between them. Common UI includes previous/next buttons, page numbers, and quick-jump controls.

Mockdown

```
‹ Prev   1  2  3  4  5   Next ›
```

Characteristics:
- Works with server or client paging
- Show current page state and disabled states
- Offer accessible labels for screen readers

Layouts Using This Pattern

┌───────────────────────────────────────────────┐
│  Blog        Categories  About  Subscribe     │
├───────────────────────────────────────────────┤
│                                               │
│  ┌───────────────────────────────────────┐    │
│  │  📝 Article Title Goes Here           │    │
│  │  By Author · Feb 20, 2026 · 8 min    │    │
│  └───────────────────────────────────────┘    │
│                                               │
│  ┌────────────────────────────────┐ ┌────┐   │
│  │                                │ │Tags│   │
│  │  Lorem ipsum dolor sit amet,  │ │────│   │
│  │  consectetur adipiscing elit. │ │#css│   │
│  │  Sed do eiusmod tempor...     │ │#dev│   │
│  │                                │ │#web│   │
│  │  ## Subheading                │ │    │   │
│  │                                │ │ TOC│   │
│  │  More content here with       │ │ ── │   │
│  │  inline code and links...     │ │ §1 │   │
│  │                                │ │ §2 │   │
│  └────────────────────────────────┘ └────┘   │
│                                               │
│  ← Previous          Next →                  │
└───────────────────────────────────────────────┘

Blog Layout

Editorial Blog Article Layout

A long-form editorial article layout with a hero image, table of contents, reading progress bar, author bio, social share, and related posts — great for technical and marketing blogs.

--blog--article--editorial

Medium

Use these prompts to generate layouts built with this pattern.

--pagination --pager --navigation --pages

Ready to build?

Use this pattern as inspiration when creating UI layouts with AI tools.

Try the Editor Browse Layout Prompts