---
title: "Tab Organization Patterns"
description: "Explore proven patterns for organizing tabs across different documentation types"
---

Tab organization varies by project type and audience. Here are real-world patterns that work well.

## Pattern 1: Simple Linear Journey

Used by: Getting started guides, onboarding docs

```
[Step 1] [Step 2] [Step 3] [Step 4] [Reference]
```

**Configuration:**

```typescript
groups: [
    { id: "step1", label: "Installation", tab: true, entries: [...] },
    { id: "step2", label: "Configuration", tab: true, entries: [...] },
    { id: "step3", label: "First Project", tab: true, entries: [...] },
    { id: "step4", label: "Deployment", tab: true, entries: [...] },
    { id: "reference", label: "Reference", tab: true, autoGenerated: true },
]
```

**Use when:**

- Clear sequence users follow
- Each tab builds on previous
- Goal is to guide, not reference

## Pattern 2: Hub and Spoke

Used by: Enterprise platforms, complex products

```
Center Hub (Default):
[Getting Started] <- Default landing

Spoke 1: [Product A] [Features] [API]
Spoke 2: [Product B] [Features] [API]
Spoke 3: [Product C] [Features] [API]
```

**Configuration:**

```typescript
tabGroups: [
    {
        id: "onboarding",
        label: "Getting Started",
        tabs: [
            { id: "intro", label: "Introduction", ... },
            { id: "setup", label: "Setup", ... },
        ],
    },
    {
        id: "product-a",
        label: "Product A",
        tabs: [
            { id: "pa-features", label: "Features", ... },
            { id: "pa-api", label: "API", ... },
            { id: "pa-guide", label: "Guide", ... },
        ],
    },
    {
        id: "product-b",
        label: "Product B",
        tabs: [
            { id: "pb-features", label: "Features", ... },
            { id: "pb-api", label: "API", ... },
            { id: "pb-guide", label: "Guide", ... },
        ],
    },
]
```

**Use when:**

- Multiple products/services
- Each has own documentation
- Central entry point matters

## Pattern 3: Layered Approach

Used by: Technical documentation, complex systems

```
Group 1: Fundamentals
�� [Concepts]
�� [Getting Started]
��� [Examples]

Group 2: Reference
�� [API]
�� [CLI]
��� [Configuration]

Group 3: Advanced
�� [Architecture]
�� [Performance]
��� [Security]
```

**Configuration:**

```typescript
tabGroups: [
    {
        id: "fundamentals",
        label: "Fundamentals",
        tabs: [
            { id: "concepts", label: "Concepts", ... },
            { id: "getting-started", label: "Getting Started", ... },
            { id: "examples", label: "Examples", ... },
        ],
    },
    {
        id: "reference",
        label: "Reference",
        tabs: [
            { id: "api", label: "API", ... },
            { id: "cli", label: "CLI", ... },
            { id: "config", label: "Configuration", ... },
        ],
    },
    {
        id: "advanced",
        label: "Advanced",
        tabs: [
            { id: "architecture", label: "Architecture", ... },
            { id: "performance", label: "Performance", ... },
            { id: "security", label: "Security", ... },
        ],
    },
]
```

**Use when:**

- Documentation spans skill levels
- Clear progression: basic -> intermediate -> advanced
- Audience skips sections based on expertise

## Pattern 4: Audience-Centric

Used by: SaaS products, platforms

```
Group 1: Users
�� [Getting Started]
�� [How-To]
��� [FAQ]

Group 2: Developers
�� [API]
�� [SDKs]
��� [Webhooks]

Group 3: DevOps
�� [Installation]
�� [Scaling]
��� [Monitoring]
```

**Configuration:**

```typescript
tabGroups: [
    {
        id: "for-users",
        label: "For Users",
        tabs: [
            { id: "user-start", label: "Getting Started", ... },
            { id: "user-how-to", label: "How-To Guides", ... },
            { id: "user-faq", label: "FAQ", ... },
        ],
    },
    {
        id: "for-developers",
        label: "For Developers",
        tabs: [
            { id: "dev-api", label: "API Reference", ... },
            { id: "dev-sdks", label: "SDKs", ... },
            { id: "dev-webhooks", label: "Webhooks", ... },
        ],
    },
    {
        id: "for-devops",
        label: "For DevOps",
        tabs: [
            { id: "ops-install", label: "Installation", ... },
            { id: "ops-scale", label: "Scaling", ... },
            { id: "ops-monitor", label: "Monitoring", ... },
        ],
    },
]
```

**Use when:**

- Different docs for different roles
- Clear audience boundaries
- Audiences have different needs

## Pattern 5: Versioned Documentation

Used by: Libraries, frameworks, SDKs

```
Current Release:
�� [v3.0 Latest]
��� [v3.1 Features]

Long-Term Support:
�� [v2.0 LTS]
��� [v2.5 Updates]

Legacy:
��� [v1.0 Deprecated]

Experimental:
��� [v4.0 Beta]
```

**Configuration:**

```typescript
tabGroups: [
    {
        id: "current",
        label: "Current Release",
        tabs: [
            { id: "v3-latest", label: "v3.0 (Latest)", ... },
            { id: "v3-features", label: "v3.1 (Features)", ... },
        ],
    },
    {
        id: "lts",
        label: "Long-Term Support",
        tabs: [
            { id: "v2-lts", label: "v2.0 (LTS)", ... },
            { id: "v2-updates", label: "v2.5 (Updates)", ... },
        ],
    },
    {
        id: "legacy",
        label: "Legacy",
        tabs: [
            { id: "v1-deprecated", label: "v1.0 (Deprecated)", ... },
        ],
    },
    {
        id: "experimental",
        label: "Experimental",
        tabs: [
            { id: "v4-beta", label: "v4.0 (Beta)", ... },
        ],
    },
]
```

**Use when:**

- Supporting multiple versions
- Need clear version organization
- Users choose their version immediately

## Pattern 6: Feature + Support

Used by: Product documentation, services

```
Features:
�� [Core]
�� [Premium]
��� [Enterprise]

Support:
�� [FAQ]
�� [Troubleshooting]
��� [Community]

Resources:
�� [Examples]
�� [Blog]
��� [API Reference]
```

**Configuration:**

```typescript
tabGroups: [
    {
        id: "features",
        label: "Features",
        tabs: [
            { id: "core", label: "Core", ... },
            { id: "premium", label: "Premium", ... },
            { id: "enterprise", label: "Enterprise", ... },
        ],
    },
    {
        id: "support",
        label: "Support",
        tabs: [
            { id: "faq", label: "FAQ", ... },
            { id: "troubleshooting", label: "Troubleshooting", ... },
            { id: "community", label: "Community", ... },
        ],
    },
    {
        id: "resources",
        label: "Resources",
        tabs: [
            { id: "examples", label: "Examples", ... },
            { id: "blog", label: "Blog", ... },
            { id: "api", label: "API Reference", ... },
        ],
    },
]
```

**Use when:**

- Mixed feature documentation and support
- Clear separation of concerns
- Multiple resource types

## Pattern 7: Geographic/Regional

Used by: Global platforms, multi-region deployments

```
Regions:
�� [US East]
�� [US West]
�� [EU]
��� [Asia Pacific]

Setup:
�� [Getting Started]
��� [Configuration]

Reference:
�� [API]
��� [CLI]
```

**Configuration:**

```typescript
tabGroups: [
    {
        id: "regions",
        label: "Regions",
        tabs: [
            { id: "us-east", label: "US East", ... },
            { id: "us-west", label: "US West", ... },
            { id: "eu", label: "EU", ... },
            { id: "asia-pacific", label: "Asia Pacific", ... },
        ],
    },
    {
        id: "setup",
        label: "Setup",
        tabs: [
            { id: "getting-started", label: "Getting Started", ... },
            { id: "configuration", label: "Configuration", ... },
        ],
    },
    {
        id: "reference",
        label: "Reference",
        tabs: [
            { id: "api", label: "API", ... },
            { id: "cli", label: "CLI", ... },
        ],
    },
]
```

**Use when:**

- Global deployment
- Region-specific differences
- Users need to select region early

## Pattern 8: API Documentation

Used by: REST APIs, GraphQL, SDKs

```
Getting Started:
�� [Authentication]
�� [Quick Start]
��� [Rate Limits]

API Versions:
�� [v3 Current]
�� [v2 Legacy]
��� [v1 Deprecated]

Resources:
�� [Users]
�� [Posts]
�� [Comments]
��� [Media]

Tools:
�� [cURL]
�� [JavaScript]
�� [Python]
��� [Go]
```

**Configuration:**

```typescript
tabGroups: [
    {
        id: "getting-started",
        label: "Getting Started",
        tabs: [
            { id: "auth", label: "Authentication", ... },
            { id: "quickstart", label: "Quick Start", ... },
            { id: "limits", label: "Rate Limits", ... },
        ],
    },
    {
        id: "versions",
        label: "API Versions",
        tabs: [
            { id: "v3", label: "v3 (Current)", ... },
            { id: "v2", label: "v2 (Legacy)", ... },
            { id: "v1", label: "v1 (Deprecated)", ... },
        ],
    },
    {
        id: "resources",
        label: "Resources",
        tabs: [
            { id: "users", label: "Users", ... },
            { id: "posts", label: "Posts", ... },
            { id: "comments", label: "Comments", ... },
            { id: "media", label: "Media", ... },
        ],
    },
    {
        id: "tools",
        label: "Client Libraries",
        tabs: [
            { id: "curl", label: "cURL", ... },
            { id: "js", label: "JavaScript", ... },
            { id: "python", label: "Python", ... },
            { id: "go", label: "Go", ... },
        ],
    },
]
```

**Use when:**

- API documentation
- Multiple SDKs/languages
- Multiple versions
- Clear resource grouping

## Choosing Your Pattern

**Ask yourself:**

1. What are the main sections?
2. Do they need grouping?
3. How do users navigate?
4. What's the natural flow?

| Pattern           | Use Case       | Complexity | Tabs |
| ----------------- | -------------- | ---------- | ---- |
| Linear            | Onboarding     | Simple     | 4-7  |
| Hub & Spoke       | Multi-product  | Medium     | 6-12 |
| Layered           | Technical docs | Medium     | 9-15 |
| Audience          | Multi-role     | Medium     | 9-15 |
| Versioned         | Libraries      | Medium     | 5-10 |
| Feature + Support | SaaS           | Complex    | 9-15 |
| Geographic        | Global         | Complex    | 6-10 |
| API               | APIs           | Complex    | 15+  |

## Responsive Tab Organization

Patterns should work on mobile:

**Desktop (7 tabs):**

```
[Getting Started] [API] [CLI] [Config] [Examples] [Support] [Blog]
```

**Mobile (same tabs, responsive):**

```
Getting Started ��
(dropdown shows all tabs)
```

Or collapsible groups on mobile:

```
�� Learning
  [Getting Started] [Guides] [FAQ]

�� Reference (collapsed on mobile)
```

## Next Steps

- [Creating Tabs](/docs/configuration/advanced/tab-management/creating-tabs)
- [Grouping Tabs](/docs/configuration/advanced/tab-management/grouping-tabs)
- [Real-World Examples](/docs/navigation-system/hierarchy/real-world-examples)