---
title: "Real-World Documentation Examples"
description: "See how real documentation projects use PID^TOO|| navigation hierarchy"
---

Here are three realistic documentation setups using different PID^TOO|| strategies.

## Example 1: Simple Library Documentation

**Project:** A JavaScript library with modest documentation

```
File Structure:
content/my-lib/
��� introduction.md
��� installation.md
��� getting-started/
�   ��� first-steps.md
�   ��� configuration.md
�   ���� examples.md
��� api/
�   ��� overview.md
�   ��� core-functions.md
�   ��� utilities.md
�   ���� types.md
���� troubleshooting.md

Navigation (Single Group, Auto-Generated):
[� Learn]
��� � API
�   ��� Overview
�   ��� Core Functions
�   ��� Utilities
�   ���� Types
���  Getting Started
�   ��� Configuration
�   ��� Examples
�   ���� First Steps
���� �� Help
    ���� Troubleshooting
```

**Configuration:**

```typescript
export const SIDEBAR_NAVIGATION = {
    "my-lib": {
        defaultTab: { label: "Docs", icon: "�" },
        groups: [
            { id: "api", label: "API", autoGenerated: true },
            { id: "getting-started", label: "Getting Started", autoGenerated: true },
            { id: "help", label: "Help", autoGenerated: true },
        ],
    },
};
```

**Why this works:**

-  Simple structure matches project complexity
-  Auto-generation requires zero maintenance
-  Alphabetical ordering is intuitive for API docs
-  Easy to add new pages

---

## Example 2: Complex Product Documentation (Multi-Tab)

**Project:** A SaaS platform with user docs and API reference

```
Navigation Structure:
[Getting Started] [User Guide] [API Reference] [Help]
        �
When "User Guide" tab active:
��� � Basics
�   ��� Dashboard Overview
�   ��� Profile Setup
�   ���� Account Settings
���  Features
�   ��� Projects & Teams
�   ��� Collaboration
�   ��� Automations
�   ���� Integrations
����  Advanced
    ��� Advanced Search
    ��� Custom Workflows
    ���� API Integration

When "API Reference" tab active:
��� �� Authentication
�   ��� API Keys
�   ��� OAuth 2.0
�   ���� JWT Tokens
���  REST API
�   ��� Users
�   ��� Projects
�   ��� Tasks
�   ���� Comments
���� � Webhooks
    ��� Event Types
    ���� Payload Reference
```

**Configuration:**

```typescript
export const SIDEBAR_NAVIGATION = {
    platform: {
        defaultTab: { label: "Getting Started", icon: "" },
        groups: [
            // Default tab items
            {
                id: "getting-started-overview",
                label: "Overview",
                entries: [{ slug: "getting-started" }, { slug: "quick-tour" }],
            },
            // User Guide Tab
            {
                id: "user-guide",
                label: "User Guide",
                tab: true,
                groups: [
                    {
                        id: "basics",
                        label: "Basics",
                        autoGenerated: true,
                    },
                    {
                        id: "features",
                        label: "Features",
                        autoGenerated: true,
                    },
                    {
                        id: "advanced",
                        label: "Advanced",
                        autoGenerated: true,
                    },
                ],
            },
            // API Reference Tab
            {
                id: "api",
                label: "API Reference",
                tab: true,
                groups: [
                    {
                        id: "authentication",
                        label: "Authentication",
                        autoGenerated: true,
                    },
                    {
                        id: "rest-api",
                        label: "REST API",
                        groups: [
                            { id: "users", label: "Users", autoGenerated: true },
                            { id: "projects", label: "Projects", autoGenerated: true },
                            { id: "tasks", label: "Tasks", autoGenerated: true },
                            { id: "comments", label: "Comments", autoGenerated: true },
                        ],
                    },
                    {
                        id: "webhooks",
                        label: "Webhooks",
                        autoGenerated: true,
                    },
                ],
            },
            // Help Tab
            {
                id: "help",
                label: "Help",
                tab: true,
                groups: [
                    {
                        id: "faq",
                        label: "FAQ",
                        entries: [{ slug: "help/faq" }],
                    },
                    {
                        id: "troubleshooting",
                        label: "Troubleshooting",
                        autoGenerated: true,
                    },
                ],
            },
        ],
    },
};
```

**Why this works:**

-  Tabs separate user guide from API docs
-  Nested groups for API resources
-  Hybrid approach: manual structure + auto-generation
-  Each section can grow independently

---

## Example 3: Enterprise Framework (Deep Nesting + Multiple Collections)

**Project:** Multi-product documentation ecosystem

```
Collection 1: "docs" (General Documentation)
[Learn] [Patterns] [Help]
    �
���  Getting Started
�   ��� Installation
�   ��� Configuration
�   ���� First Application
���  Core Concepts
�   ��� Architecture Overview
�   ��� Components
�   �   ��� View Layer
�   �   ��� State Management
�   �   ���� Routing
�   ��� Services
�   �   ��� HTTP Client
�   �   ��� Authentication
�   �   ���� Data Services
�   ���� Advanced
�       ��� Performance Optimization
�       ��� Testing
�       ���� Deployment

Collection 2: "api" (API Reference)
[v1 Legacy] [v2 Current] [v3 Beta]
    � (when v2 selected)
��� �� Authentication
���  Resources
�   ��� Users
�   ��� Organizations
�   ���� Data Models
���� � Advanced
    ��� Rate Limiting
    ��� Error Handling
    ���� Webhooks
```

**Configuration:**

```typescript
// Two separate collections
export const CONTENT: ContentConfig = {
    systems: [
        {
            id: "docs",
            dir: "content/docs",
            route: "/docs",
            defaultDocRedirect: "/docs/getting-started",
        },
        {
            id: "api",
            dir: "content/api",
            route: "/api",
            defaultDocRedirect: "/api/v2/overview",
        },
    ],
};

export const SIDEBAR_NAVIGATION = {
    docs: {
        defaultTab: { label: "Learn", icon: "�" },
        groups: [
            {
                id: "getting-started",
                label: "Getting Started",
                tab: true,
                entries: [
                    { slug: "getting-started/installation" },
                    { slug: "getting-started/configuration" },
                    { slug: "getting-started/first-app" },
                ],
            },
            {
                id: "concepts",
                label: "Core Concepts",
                tab: true,
                groups: [
                    {
                        id: "architecture",
                        label: "Architecture Overview",
                        entries: [{ slug: "concepts/architecture" }],
                    },
                    {
                        id: "components",
                        label: "Components",
                        groups: [
                            { id: "view-layer", label: "View Layer", autoGenerated: true },
                            { id: "state-mgmt", label: "State Management", autoGenerated: true },
                            { id: "routing", label: "Routing", autoGenerated: true },
                        ],
                    },
                    {
                        id: "services",
                        label: "Services",
                        groups: [
                            { id: "http", label: "HTTP Client", autoGenerated: true },
                            { id: "auth", label: "Authentication", autoGenerated: true },
                            { id: "data", label: "Data Services", autoGenerated: true },
                        ],
                    },
                    {
                        id: "advanced",
                        label: "Advanced",
                        autoGenerated: true,
                    },
                ],
            },
        ],
    },
    api: {
        defaultTab: { label: "v2 Current", icon: "" },
        groups: [
            {
                id: "v1",
                label: "v1 Legacy",
                tab: true,
                groups: [{ id: "resources", label: "Resources", autoGenerated: true }],
            },
            {
                id: "v2",
                label: "v2 Current",
                tab: true,
                groups: [
                    { id: "auth", label: "Authentication", autoGenerated: true },
                    {
                        id: "resources",
                        label: "Resources",
                        groups: [
                            { id: "users", label: "Users", autoGenerated: true },
                            { id: "orgs", label: "Organizations", autoGenerated: true },
                        ],
                    },
                    {
                        id: "advanced",
                        label: "Advanced",
                        autoGenerated: true,
                    },
                ],
            },
            {
                id: "v3",
                label: "v3 Beta",
                tab: true,
                groups: [{ id: "beta-features", label: "Beta Features", autoGenerated: true }],
            },
        ],
    },
};
```

**Why this works:**

-  Multiple collections for different products
-  Deep nesting for complex concepts
-  Tabs for version management
-  Hybrid approach scales to 1000+ pages
-  Each section independent but same codebase

---

## Choosing Your Structure

**Use Simple (Example 1) when:**

- Documentation is small (< 50 pages)
- Content doesn't have major sections
- Auto-generation ordering works

**Use Multi-Tab (Example 2) when:**

- Multiple audiences (users vs. developers)
- Separate concerns (guides vs. API)
- Medium documentation (100-500 pages)

**Use Enterprise (Example 3) when:**

- Multiple products or versions
- Deep hierarchies needed
- Large documentation (500+ pages)
- Complex organization

---

## This Site as Example

This documentation site demonstrates all concepts through its own structure:

```
[Overview] [Getting Started] [Navigation System] [Configuration]
           [Generation Strategies] [Content] [Advanced Topics]

Each tab contains:
- Nested groups (Core Concepts > Entries, Groups, Nested Groups)
- Auto-generated sections (patterns, help)
- Hybrid approach (pinned important pages)
- Multiple pages demonstrating the feature
```

This is a working example of everything you've learned!