Search Documentation

Search for pages and headings in the documentation

Visual Guide to Navigation

This page shows how the navigation hierarchy appears in the browser, with real examples.

Basic Structure

Minimal Setup (Single Group)

[📖 Learn]
├── Guides
│   ├── Getting Started
│   ├── Installation
│   └── Quick Start

Configuration:

export const SIDEBAR_NAVIGATION = {
    docs: {
        defaultTab: { label: "Learn", icon: "📖" },
        groups: [
            {
                id: "guides",
                label: "Guides",
                autoGenerated: true,
            },
        ],
    },
};

Multiple Groups

Two Groups (No Tabs)

[📖 Learn]
├── Getting Started
│   ├── Introduction
│   ├── Installation
│   └── Quick Start
├── Features
│   ├── Auto-Generation
│   ├── Breadcrumbs
│   └── Icons
└── Help
    ├── FAQ
    └── Troubleshooting

Configuration:

groups: [
    {
        id: "getting-started",
        label: "Getting Started",
        entries: [
            { slug: "getting-started/introduction" },
            { slug: "getting-started/installation" },
            { slug: "getting-started/quick-start" },
        ],
    },
    {
        id: "features",
        label: "Features",
        autoGenerated: true,
    },
    {
        id: "help",
        label: "Help",
        autoGenerated: true,
    },
];

Tabs Navigation

Two Tabs

[Learn] [API Reference]
    ↓
When "Learn" tab is active:
├── Getting Started
│   ├── Introduction
│   └── Installation
└── Features

When "API Reference" tab is active:
├── Endpoints
└── Authentication

Configuration:

groups: [
    // Non-tabbed groups go in default tab
    {
        id: "getting-started",
        label: "Getting Started",
        entries: [
            { slug: "getting-started/introduction" },
            { slug: "getting-started/installation" },
        ],
    },
    // This becomes a separate tab
    {
        id: "api",
        label: "API Reference",
        tab: true,
        groups: [
            {
                id: "endpoints",
                label: "Endpoints",
                autoGenerated: true,
            },
            {
                id: "authentication",
                label: "Authentication",
                entries: [{ slug: "api/authentication/oauth" }, { slug: "api/authentication/jwt" }],
            },
        ],
    },
];

Three+ Tabs

Documentation Ecosystem

[Getting Started] [User Guide] [API Reference] [Patterns]
      ↓
When "User Guide" tab is active:
├── Basics
│   ├── Installation
│   ├── Configuration
│   └── First Steps
├── Intermediate
│   ├── Advanced Setup
│   └── Customization
└── Advanced
    ├── Performance
    └── Security

Nested Groups (No Tabs)

Single Group with Subgroups

[📖 Learn]
└── Configuration
    ├── Basics
    │   ├── Overview
    │   ├── Site Metadata
    │   └── Sidebar Structure
    └── Advanced
        ├── Nested Groups
        ├── Tab Management
        └── Custom Styling

Configuration:

groups: [
    {
        id: "configuration",
        label: "Configuration",
        groups: [
            {
                id: "basics",
                label: "Basics",
                entries: [
                    { slug: "configuration/basics/overview" },
                    { slug: "configuration/basics/site-metadata" },
                    { slug: "configuration/basics/sidebar-structure" },
                ],
            },
            {
                id: "advanced",
                label: "Advanced",
                entries: [
                    { slug: "configuration/advanced/nested-groups" },
                    { slug: "configuration/advanced/tab-management" },
                    { slug: "configuration/advanced/custom-styling" },
                ],
            },
        ],
    },
];

Complex: Tabs + Nested Groups

Realistic Documentation

[Learn] [API Reference] [Patterns] [Help]
    ↓
When "API Reference" tab is active:

📚 API Reference
├── Getting Started
│   ├── Authentication
│   ├── Rate Limiting
│   └── Errors
├── Endpoints
│   └── (auto-generated subgroups per resource)
│       ├── Users
│       │   ├── List Users
│       │   ├── Get User
│       │   └── Create User
│       ├── Posts
│       │   ├── List Posts
│       │   └── Create Post
│       └── Comments
└── Advanced
    ├── Webhooks
    ├── Pagination
    └── Filtering

Configuration:

{
    id: "api",
    label: "API Reference",
    tab: true,
    groups: [
        {
            id: "getting-started",
            label: "Getting Started",
            entries: [
                { slug: "api/getting-started/authentication" },
                { slug: "api/getting-started/rate-limiting" },
                { slug: "api/getting-started/errors" },
            ],
        },
        {
            id: "endpoints",
            label: "Endpoints",
            groups: [
                {
                    id: "users",
                    label: "Users",
                    autoGenerated: true,
                },
                {
                    id: "posts",
                    label: "Posts",
                    autoGenerated: true,
                },
                {
                    id: "comments",
                    label: "Comments",
                    autoGenerated: true,
                },
            ],
        },
        {
            id: "advanced",
            label: "Advanced",
            entries: [
                { slug: "api/advanced/webhooks" },
                { slug: "api/advanced/pagination" },
                { slug: "api/advanced/filtering" },
            ],
        },
    ],
}

Each page shows breadcrumbs indicating where you are:

Home > Docs > Getting Started > Installation

All except the current page are clickable:

  • Home -> /docs/
  • Docs -> /docs/
  • Getting Started -> /docs/getting-started/
  • Installation -> (current page, not clickable)

Table of Contents

Right sidebar shows page structure:

On page: "Advanced Configuration"

📑 On This Page
├── Overview
├── File Structure
│   ├── CSS Files
│   ├── TypeScript Files
│   └── Configuration Files
├── Best Practices
└── Troubleshooting

Mobile View

On small screens:

  • Sidebar becomes a hamburger menu (≡)
  • TOC moves to bottom or is hidden
  • Tabs remain clickable at top
  • Navigation stays fully functional
≡ | 🌙 | 🔗

Content Area
(Sidebar hidden by default)

Next Steps

Learn to build these structures: