Understanding Groups
Groups are collections of related entries. A group is a sidebar section that can contain multiple pages.
What is a Group?
A group organizes entries into a logical category:
Group: "Getting Started"
��� Entry: Introduction
��� Entry: Installation
���� Entry: First Steps
When rendered in the sidebar, a group becomes a collapsible section. Users can expand/collapse the group to see or hide its entries.
Group Properties
Every group must have:
Required Properties
ID (unique identifier)
{ id: "getting-started", ... }
Label (display name in sidebar)
{ label: "Getting Started", ... }
Optional Properties
Icon (emoji or SVG reference)
{ icon: "", ... } // Shows next to group label
Path (folder to scan, defaults to ID)
{ path: "my-custom-path", ... } // If different from ID
AutoGenerated (auto-discover entries)
{ autoGenerated: true, ... } // Scan folder for files
Creating Groups
Configuration Location
Groups are configured in data/config.ts under SIDEBAR_NAVIGATION:
export const SIDEBAR_NAVIGATION = {
"my-docs": {
defaultTab: { label: "Docs", icon: "�" },
groups: [
// Your groups go here
],
},
};
Basic Group Example
{
id: "guides",
label: "User Guides",
icon: "�",
entries: [
{ slug: "guides/getting-started" },
{ slug: "guides/installation" },
{ slug: "guides/configuration" },
],
}
Creates sidebar:
� User Guides
��� Getting Started
��� Installation
���� Configuration
Group Types
Type 1: Manual Groups
Explicitly list every entry in order:
{
id: "getting-started",
label: "Getting Started",
entries: [
{ slug: "getting-started/introduction" },
{ slug: "getting-started/installation" },
{ slug: "getting-started/quick-start" },
],
}
Advantages: Full control, precise ordering, curated selection Disadvantages: Must maintain list, new files won’t auto-appear
Type 2: Auto-Generated Groups
Files are discovered automatically from folder:
{
id: "features",
label: "Features",
autoGenerated: true,
}
Discovers all .md/.mdx files in content/my-docs/features/ folder, sorted alphabetically.
Advantages: Convenient, no maintenance, grow naturally Disadvantages: Order is alphabetical, less control
Type 3: Hybrid Groups
Pin important entries first, rest auto-discover:
{
id: "guides",
label: "Guides",
entries: [
{ slug: "guides/overview" }, // Always first
{ slug: "guides/quick-start" }, // Always second
],
autoGenerated: true, // Rest discovered alphabetically
}
Creates sidebar:
Guides
��� Overview (manual, position 1)
��� Quick Start (manual, position 2)
��� API Reference (auto-discovered)
��� Configuration (auto-discovered)
���� Troubleshooting (auto-discovered)
Group in File System
Groups are typically organized by folder, but folder structure is separate from navigation configuration:
File System:
��� content/my-docs/
� ��� getting-started/
� � ��� intro.md
� � ���� install.md
� ��� features/
� � ��� auth.md
� � ���� payments.md
� ���� troubleshooting.md
Navigation Config (data/config.ts):
groups: [
{
id: "getting-started",
label: "Getting Started",
autoGenerated: true, // Scans content/my-docs/getting-started/
},
{
id: "features",
label: "Features",
autoGenerated: true, // Scans content/my-docs/features/
},
]
The folder and group ID match, but they’re independent concepts.
Next Steps
Learn about:
- Nested Groups - Groups within groups
- Tabs - Top-level navigation contexts
- Configuration Guide