Tab Organization Patterns

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:

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:

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:

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:

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:

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:

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:

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:

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?

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
• Grouping Tabs
• Real-World Examples