---
title: "Visual Guide to Navigation"
description: "Interactive visual representation of how the navigation hierarchy appears to users"
---

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:**

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

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

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

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

```typescript
{
    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" },
            ],
        },
    ],
}
```

---

## Breadcrumb Navigation

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:

- [Configuration Basics](/docs/configuration/basics/sidebar-structure)
- [Real-World Examples](/docs/navigation-system/hierarchy/real-world-examples)