Real-World Documentation Examples
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
���� TroubleshootingConfiguration:
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 ReferenceConfiguration:
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
���� WebhooksConfiguration:
// 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 featureThis is a working example of everything you’ve learned!