--- title: "Real-World Documentation Examples" description: "See how real documentation projects use CelestialDocs navigation hierarchy" --- Here are three realistic documentation setups using different CelestialDocs 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!