diff --git a/organize/navigation.mdx b/organize/navigation.mdx index 421b8a9ab..22eee7656 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,74 @@ Use the `root` property to designate a main page for a group. When a group has a } ``` +### Directory listings + +Use the `directory` property to automatically display a directory of child pages below the content of a group's root page. This is useful for hub pages or landing pages that serve as entry points to a section. + +Set `directory` on any navigation node—including the top-level `navigation` object, groups, tabs, anchors, dropdowns, products, versions, or languages. The value inherits recursively through descendant nodes, so you can set it once at a high level and override it deeper in the tree. + +| Value | Behavior | +|---|---| +| `"none"` | Default. No directory UI is rendered. | +| `"accordion"` | Displays child pages in a grouped, collapsible list below the root page content. | +| `"card"` | Displays child pages as horizontal cards below the root page content. | + + + The `directory` property only affects groups that have a `root` page. Groups without a root page are not affected. + + +```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": "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** inherits `"accordion"` from its parent. +- **API Reference** overrides with `"none"`, so its root page does not show a directory. + +You can also set `directory` at the top level of the `navigation` object to apply a default across your entire site: + +```json +{ + "navigation": { + "directory": "card", + "groups": [ + { + "group": "Guides", + "root": "guides/index", + "pages": ["guides/quickstart", "guides/deployment"] + } + ] + } +} +``` + ### 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..618d145b9 100644 --- a/organize/settings-reference.mdx +++ b/organize/settings-reference.mdx @@ -41,6 +41,7 @@ For context on what each group of settings does, see the topic pages: | `footer.links` | array | No | None | | `banner.content` | string | No | None | | `banner.dismissible` | boolean | No | `false` | +| `navigation.directory` | `"none"` \| `"accordion"` \| `"card"` | No | `"none"` | | `interaction.drilldown` | boolean | No | Theme default | | `contextual.options` | array | No | None | | `contextual.display` | `"header"` \| `"toc"` | No | `"header"` | @@ -219,6 +220,13 @@ Product switcher. **Type:** array of object—see `navigation.global.products` for shape. +#### `navigation.directory` + +Default directory listing style for group root pages. Inherits recursively through descendant navigation nodes. Descendants can override with their own `directory` value. See [Directory listings](/organize/navigation#directory-listings). + +**Type:** `"none"` | `"accordion"` | `"card"` +**Default:** `"none"` + #### `navigation.groups` Groups for organizing content into labeled sections. diff --git a/organize/settings-structure.mdx b/organize/settings-structure.mdx index 9a90d9703..aadcd0d57 100644 --- a/organize/settings-structure.mdx +++ b/organize/settings-structure.mdx @@ -193,6 +193,10 @@ See [Navigation](/organize/navigation) for complete documentation on building yo Product switcher for sites with multiple [products](/organize/navigation#products). + + Default [directory listing](/organize/navigation#directory-listings) style for group root pages. When set, all descendant navigation nodes inherit this value unless they specify their own `directory`. Defaults to `"none"`. + + [Groups](/organize/navigation#groups) for organizing content into sections.