Sidebar Navigation Structure

The SIDEBAR_NAVIGATION object defines your documentation hierarchy. This is the most important configuration for your docs structure.

Basic Structure

export const SIDEBAR_NAVIGATION: SidebarNavigation = {
    collectionId: {
        defaultTab: { label, icon },
        groups: [
            /* group definitions */
        ],
    },
};

Parts of the Configuration

Default Tab

Every collection has a default tab where non-tabbed groups appear:

defaultTab: {
    label: "Learn",      // Display name
    icon: "📖",          // Emoji or SVG reference
}

Groups Array

List of all groups/tabs in this collection:

groups: [
    { id: "guides", label: "Guides", ... },
    { id: "api", label: "API", tab: true, ... },
    // more groups...
]

Group Properties

Essential Properties

{
    id: "my-group",           // Unique identifier (required)
    label: "My Group",        // Display name (required)
}

Optional Properties

{
    id: "guides",
    label: "Guides",
    icon: "📖",               // Emoji or SVG icon
    tab: false,               // Make this a top-level tab?
    autoGenerated: false,     // Auto-discover files?
    path: "custom/path",      // Override folder path (defaults to id)
    entries: [ /* ... */ ],   // Manual entries list
    groups: [ /* ... */ ],    // Nested subgroups
}

Minimal Configuration

export const SIDEBAR_NAVIGATION = {
    docs: {
        defaultTab: { label: "Docs" },
        groups: [
            {
                id: "guides",
                label: "Guides",
                autoGenerated: true, // That's it!
            },
        ],
    },
};

This single configuration:

Creates a collection called “docs”
Shows a “Guides” group in the sidebar
Auto-discovers all .md files in content/docs/guides/
Displays them alphabetically

Full Configuration Example

export const SIDEBAR_NAVIGATION: SidebarNavigation = {
    docs: {
        defaultTab: {
            label: "Learn",
            icon: "📖",
        },
        groups: [
            // Manual group - explicit entries
            {
                id: "getting-started",
                label: "Getting Started",
                icon: "🚀",
                entries: [
                    { slug: "getting-started/introduction" },
                    { slug: "getting-started/installation" },
                    { slug: "getting-started/quick-start" },
                ],
            },
            // Auto-generated group
            {
                id: "features",
                label: "Features",
                icon: "✨",
                autoGenerated: true, // Scan content/docs/features/
            },
            // Hybrid group
            {
                id: "guides",
                label: "Guides",
                icon: "📖",
                entries: [
                    { slug: "guides/overview" }, // Manual entries first
                    { slug: "guides/getting-started" },
                ],
                autoGenerated: true, // Then auto-discover rest
            },
            // Tab (separate navigation context)
            {
                id: "api",
                label: "API Reference",
                icon: "📡",
                tab: true, // Makes this a tab
                groups: [
                    {
                        id: "endpoints",
                        label: "Endpoints",
                        autoGenerated: true,
                    },
                    {
                        id: "authentication",
                        label: "Authentication",
                        entries: [{ slug: "api/auth/oauth" }, { slug: "api/auth/jwt" }],
                    },
                ],
            },
            // Group with subgroups (nested)
            {
                id: "configuration",
                label: "Configuration",
                icon: "⚙️",
                groups: [
                    {
                        id: "basics",
                        label: "Basics",
                        entries: [
                            { slug: "configuration/basics/overview" },
                            { slug: "configuration/basics/setup" },
                        ],
                    },
                    {
                        id: "advanced",
                        label: "Advanced",
                        autoGenerated: true,
                    },
                ],
            },
        ],
    },
};

Entry Configuration

Entries (pages) can be configured in the entries array:

Basic Entry

{
    slug: "guides/installation";
}

Entry with Label Override

{
    slug: "guides/installation",
    label: "Install Now",  // Override the page title
}

Entry with Icon

{
    slug: "guides/installation",
    icon: "⚡",  // Appears in sidebar
}

Full Entry Configuration

{
    slug: "guides/installation",
    label: "Installation Guide",
    icon: "⚡",
}

Collection-Specific Configuration

Each collection gets its own navigation config:

export const SIDEBAR_NAVIGATION: SidebarNavigation = {
    // Collection 1: docs
    docs: {
        defaultTab: { label: "Documentation", icon: "📖" },
        groups: [
            /* docs structure */
        ],
    },
    // Collection 2: api
    api: {
        defaultTab: { label: "API", icon: "📡" },
        groups: [
            /* api structure */
        ],
    },
    // Collection 3: guides
    guides: {
        defaultTab: { label: "Tutorials", icon: "🎓" },
        groups: [
            /* guides structure */
        ],
    },
};

TypeScript IntelliSense

With TypeScript types, you get autocomplete:

import type { SidebarNavigation } from "@/lib/docs/types";

export const SIDEBAR_NAVIGATION: SidebarNavigation = {
    docs: {
        // IDE suggests properties here ✨
        defaultTab: { label: "L" /* autocomplete shows: label, icon */ },
        groups: [
            {
                // IDE knows group properties
                id: "...",
                label: "...",
                // autocomplete suggests: icon, tab, autoGenerated, path, entries, groups
            },
        ],
    },
};

Common Patterns

Pattern 1: Simple Auto-Generated

groups: [{ id: "pages", label: "Pages", autoGenerated: true }];

Pattern 2: Multiple Curated Groups

groups: [
    {
        id: "getting-started",
        label: "Getting Started",
        entries: [{ slug: "gs/intro" }, { slug: "gs/install" }, { slug: "gs/first-app" }],
    },
    {
        id: "guides",
        label: "User Guides",
        entries: [{ slug: "guides/auth" }, { slug: "guides/deployment" }],
    },
];

Pattern 3: Hybrid (Manual + Auto)

groups: [
    {
        id: "guides",
        label: "Guides",
        entries: [
            { slug: "guides/overview" }, // Always first
            { slug: "guides/quickstart" }, // Always second
        ],
        autoGenerated: true, // Rest discovered alphabetically
    },
];

Pattern 4: Tabs

groups: [
    {
        id: "user-guide",
        label: "User Guide",
        tab: true,
        autoGenerated: true,
    },
    {
        id: "api",
        label: "API Reference",
        tab: true,
        autoGenerated: true,
    },
];

Pattern 5: Nested Groups

groups: [
    {
        id: "advanced",
        label: "Advanced",
        groups: [
            {
                id: "architecture",
                label: "Architecture",
                autoGenerated: true,
            },
            {
                id: "performance",
                label: "Performance",
                autoGenerated: true,
            },
        ],
    },
];

Next Steps

Learn to implement specific configurations:

Search Documentation