Tabs

Tabbed navigation for switching between related content panels

What is it?

Tabs present multiple panels where only one panel is visible at a time. Tabs are useful for grouping related content (details, settings, history) while conserving vertical space.

Mockdown

```
[Overview] [Details] [History] [Settings]
────────────────────────────────────────
Panel content for the currently active tab goes here.
```

Characteristics:
- Keyboard accessible (arrow keys to navigate)
- Each tab controls an associated panel (aria-controls)
- Visually distinct active indicator

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.

--tabs --panels --navigation --segmented-control

Ready to build?

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

Try the Editor Browse Layout Prompts