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