Skip to content

added interactive nesting component #6821

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RoyceWilliams510 wants to merge 5 commits into
base: main
Choose a base branch
from
+651 −216
Open

added interactive nesting component #6821

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d90d662
added interactive nesting component
RoyceWilliams510 Jul 30, 2026
8953cc7
add nav builder
ethanpalm Jul 31, 2026
c8121c7
combine preview and JSON copy block
ethanpalm Jul 31, 2026
4741150
show accurate previews
ethanpalm Jul 31, 2026
0631ebe
remove default groups
ethanpalm Jul 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
220 changes: 4 additions & 216 deletions organize/navigation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
boost: 3
---

import { NavigationBuilder } from "/snippets/navigation-builder.jsx";

The [navigation](/organize/settings-structure#navigation) property in `docs.json` controls the structure and information hierarchy of your documentation.

With proper navigation configuration, you can organize your content so that users can find exactly what they're looking for.
Expand Down Expand Up @@ -870,223 +872,9 @@

Each navigation element can contain one type of child element at each level of your navigation hierarchy. For example, a tab can contain anchors that contain groups, but a tab cannot contain both anchors and groups at the same level.

<CodeGroup>

```json Tabs containing anchors
{
"navigation": {
"tabs": [
{
"tab": "Documentation",
"anchors": [
{
"anchor": "Guides",
"icon": "book-open",
"pages": ["quickstart", "tutorial"]
},
{
"anchor": "API Reference",
"icon": "code",
"pages": ["api/overview", "api/endpoints"]
}
]
},
{
"tab": "Resources",
"groups": [
{
"group": "Help",
"pages": ["support", "faq"]
}
]
}
]
}
}
```

```json Anchors containing tabs
{
"navigation": {
"anchors": [
{
"anchor": "Documentation",
"icon": "book-open",
"tabs": [
{
"tab": "Guides",
"pages": ["quickstart", "tutorial"]
},
{
"tab": "API",
"pages": ["api/overview", "api/endpoints"]
}
]
},
{
"anchor": "Community",
"icon": "users",
"href": "https://community.example.com"
}
]
}
}
```

```json Products containing tabs
{
"navigation": {
"products": [
{
"product": "Platform",
"icon": "server",
"tabs": [
{
"tab": "Documentation",
"groups": [
{
"group": "Getting started",
"pages": ["platform/quickstart"]
}
]
},
{
"tab": "API Reference",
"pages": ["platform/api"]
}
]
},
{
"product": "Mobile SDK",
"icon": "mobile",
"pages": ["mobile/overview"]
}
]
}
}
```

```json Multi-product SaaS with tabs and menu
{
"navigation": {
"products": [
{
"product": "Platform",
"icon": "cloud",
"tabs": [
{
"tab": "Documentation",
"menu": [
{
"item": "Getting Started",
"icon": "rocket",
"groups": [
{
"group": "Setup",
"pages": ["platform/install", "platform/config"]
},
{
"group": "Core Concepts",
"pages": ["platform/concepts/auth", "platform/concepts/data"]
}
]
},
{
"item": "Guides",
"icon": "book",
"pages": ["platform/guides/deployment", "platform/guides/scaling"]
}
]
},
{
"tab": "API Reference",
"groups": [
{
"group": "REST API",
"pages": ["platform/api/users", "platform/api/projects"]
},
{
"group": "GraphQL",
"pages": ["platform/api/graphql/queries", "platform/api/graphql/mutations"]
}
]
}
]
},
{
"product": "Analytics",
"icon": "chart-bar",
"tabs": [
{
"tab": "Documentation",
"groups": [
{
"group": "Getting Started",
"pages": ["analytics/quickstart", "analytics/setup"]
}
]
},
{
"tab": "API",
"pages": ["analytics/api/events", "analytics/api/reports"]
}
]
}
]
}
}
```

```json Versioned docs with tabs
{
"navigation": {
"versions": [
{
"version": "v2.0",
"tabs": [
{
"tab": "Documentation",
"groups": [
{
"group": "Getting Started",
"pages": ["v2/quickstart", "v2/migration-from-v1"]
},
{
"group": "Features",
"pages": ["v2/features/auth", "v2/features/api"]
}
]
},
{
"tab": "API Reference",
"pages": ["v2/api/overview", "v2/api/endpoints"]
}
]
},
{
"version": "v1.0",
"tabs": [
{
"tab": "Documentation",
"groups": [
{
"group": "Getting Started",
"pages": ["v1/quickstart"]
}
]
},
{
"tab": "API Reference",
"pages": ["v1/api/overview"]
}
]
}
]
}
}
```
Use this builder to assemble a hierarchy and generate the matching `docs.json` structure. Choose a root pattern, add and nest as many elements as you need at each level, rename them, then copy the result. The preview shows how each element renders and lets you click between tabs, anchors, dropdowns, and other switchers to see how visitors move through them.

Check warning on line 875 in organize/navigation.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

organize/navigation.mdx#L875 

Use the Oxford comma in 'Choose a root pattern, add and'.

</CodeGroup>
<NavigationBuilder />

## Breadcrumbs

Expand Down
Loading