diff --git a/organize/navigation.mdx b/organize/navigation.mdx index 421b8a9ab..55f5c3d3b 100644 --- a/organize/navigation.mdx +++ b/organize/navigation.mdx @@ -58,7 +58,7 @@ Use groups to organize your sidebar navigation into sections. You can nest group alt="Decorative graphic of groups." /> -In the `navigation` object, `groups` is an array where each entry is an object that requires a `group` field and a `pages` field. The `icon`, `tag`, `root`, and `expanded` fields are optional. +In the `navigation` object, `groups` is an array where each entry is an object that requires a `group` field and a `pages` field. The `icon`, `tag`, `root`, `expanded`, and `directory` fields are optional. ```json { @@ -116,6 +116,73 @@ Use the `root` property to designate a main page for a group. When a group has a } ``` +### Directory + +Use the `directory` property on a group to automatically render a listing of its child pages below the root page content. This is useful for help centers, knowledge bases, or any section where you want users to browse all available pages from a single entry point. + +The `directory` property accepts the following values: + +| Value | Behavior | +|---|---| +| `"none"` | Default. No directory listing is rendered. | +| `"accordion"` | Renders child pages as a grouped, expandable list. | +| `"card"` | Renders child pages as a horizontal card layout. | + +The `directory` value inherits recursively through nested groups. Set `directory` on a parent group and all nested groups inherit the same value unless they explicitly override it. + + + The `directory` property requires the group to have a `root` page. The directory listing appears on the root page, below its content. + + +```json +{ + "navigation": { + "groups": [ + { + "group": "Help Center", + "root": "help/index", + "directory": "accordion", + "pages": [ + { + "group": "Getting Started", + "root": "help/getting-started/index", + "pages": [ + "help/getting-started/quickstart", + "help/getting-started/install" + ] + }, + { + "group": "Billing", + "root": "help/billing/index", + "directory": "card", + "pages": [ + "help/billing/plans", + "help/billing/invoices" + ] + }, + { + "group": "API Reference", + "root": "help/api/index", + "directory": "none", + "pages": [ + "help/api/overview", + "help/api/endpoints" + ] + } + ] + } + ] + } +} +``` + +In this example: + +- **Help Center** uses `"accordion"` (set explicitly). +- **Getting Started** uses `"accordion"` (inherited from Help Center). +- **Billing** uses `"card"` (overrides the inherited value). +- **API Reference** uses `"none"` (opts out of directory listings). + ### Default expanded state Use the `expanded` property to control the default state of a nested group in the navigation sidebar. diff --git a/organize/settings-reference.mdx b/organize/settings-reference.mdx index 4671d91a9..cd826ba89 100644 --- a/organize/settings-reference.mdx +++ b/organize/settings-reference.mdx @@ -223,7 +223,9 @@ Product switcher. Groups for organizing content into labeled sections. -**Type:** array of object +**Type:** array of object—each with: `group` (string, required), `pages` (array, required), `root` (string), `directory` (`"none"` | `"accordion"` | `"card"`), `expanded` (boolean), `icon` (string), `iconType` (string), `tag` (string) + +The `directory` field renders a listing of child pages on the group's root page. Values inherit recursively through nested groups. Set to `"none"` to opt out. See [Directory](/organize/navigation#directory). #### `navigation.pages` diff --git a/organize/settings-structure.mdx b/organize/settings-structure.mdx index 9a90d9703..179fb22b2 100644 --- a/organize/settings-structure.mdx +++ b/organize/settings-structure.mdx @@ -195,6 +195,28 @@ See [Navigation](/organize/navigation) for complete documentation on building yo [Groups](/organize/navigation#groups) for organizing content into sections. + + + + Display name of the group. + + + Pages and nested groups within this group. + + + Path to the root page for this group. When set, clicking the group title navigates to this page. See [Root page](/organize/navigation#root-page). + + + Renders a directory listing of child pages on the group's root page. Inherits recursively through nested groups. Set to `"none"` to opt out. See [Directory](/organize/navigation#directory). + + + Whether a nested group is expanded by default. Only applies to groups nested inside other groups. + + + + Badge label displayed next to the group name. + +