---
title: "Sidebar Navigation Structure"
description: "Learn the configuration structure for building navigation hierarchies"
---

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

## Basic Structure

```typescript
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:

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

### Groups Array

List of all groups/tabs in this collection:

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

## Group Properties

### Essential Properties

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

### Optional Properties

```typescript
{
    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

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

This single configuration:

1. Creates a collection called "docs"
2. Shows a "Guides" group in the sidebar
3. Auto-discovers all `.md` files in `content/docs/guides/`
4. Displays them alphabetically

## Full Configuration Example

```typescript
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

```typescript
{
    slug: "guides/installation";
}
```

### Entry with Label Override

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

### Entry with Icon

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

### Full Entry Configuration

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

## Collection-Specific Configuration

Each collection gets its own navigation config:

```typescript
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:

```typescript
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

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

### Pattern 2: Multiple Curated Groups

```typescript
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)

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

### Pattern 4: Tabs

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

### Pattern 5: Nested Groups

```typescript
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:

- [Auto-Generation](/docs/generation-strategies/auto-generation/how-it-works)
- [Manual Creation](/docs/generation-strategies/manual-creation/explicit-control)
- [Nested Setup](/docs/configuration/advanced/nested-setup/single-level)