Navigation Setup

The navigation system is how users browse your documentation. This guide explains how to set it up in config.json.

Understanding Navigation Structure

Your navigation has three levels:

Tabs (top bar)
└── Groups (sidebar sections)
    └── Pages (individual documents)

Think of it like organizing books:

• Tabs are like different bookcases ("Documentation", "API", "Guides")
• Groups are like shelves in a bookcase ("Getting Started", "Advanced Topics")
• Pages are like individual books on a shelf

Basic Navigation Example

Here's a simple navigation setup explained line by line:

What this creates:

1. A tab called "Documentation" in the top navigation
2. A group called "Getting Started" in the sidebar (with a rocket icon)
3. Two pages in that group: Introduction and Installation

Step-by-Step: Adding Pages

/docs
  /guides
    my-guide.mdx

{
  "pages": [
    "guides/my-guide"
  ]
}

Navigation Properties

Tabs

Tabs appear in the top navigation bar. Each tab can have its own set of groups and pages.

{
  "tab": "Documentation"
}

{
  "tab": "GitHub",
  "href": "https://github.com/your-repo"
}

Example with multiple tabs:

Groups

Groups organize pages into sections in the sidebar.

{
  "group": "Getting Started"
}

{
  "group": "Getting Started",
  "icon": "rocket"
}

{
  "group": "Getting Started",
  "icon": "rocket",
  "pages": [
    "guides/introduction",
    "guides/installation",
    "guides/quick-start"
  ]
}

Pages

Pages are the file paths to your MDX documents.

Path format:

Content file:     /docs/guides/my-guide.mdx
Navigation path:  "guides/my-guide"
URL:              /guides/my-guide/

Complete Example

Here's a realistic navigation setup with multiple tabs and groups:

Global Anchors

Global anchors appear above all tabs in the sidebar. Use them for external links like GitHub, Discord, or community resources.

{
  "navigation": {
    "global": {
      "anchors": [
        {
          "anchor": "GitHub",
          "href": "https://github.com/your-repo",
          "icon": "github"
        }
      ]
    }
  }
}

Common Patterns

Documentation + Components

A common setup for documentation sites with component examples:

API Documentation

For API documentation with versioning:

Page Ordering

Pages appear in the sidebar in the order you list them in the pages array:

{
  "pages": [
    "guides/step-1",  // Appears first
    "guides/step-2",  // Appears second
    "guides/step-3"   // Appears third
  ]
}

To reorder: Just rearrange the items in the array.

Troubleshooting

Best Practices

Next Steps