diff --git a/organize/navigation.mdx b/organize/navigation.mdx index 421b8a9ab..72a21e40c 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 { @@ -141,6 +141,84 @@ Use the `expanded` property to control the default state of a nested group in th } ``` +### Directory listing + +Use the `directory` property to automatically display a listing of child pages on a group's [root page](#root-page). When a visitor opens the root page, a directory of the group's children renders below the page content. + +The `directory` property accepts three values: + +| Value | Behavior | +|---|---| +| `"none"` | Default. No directory is shown. | +| `"accordion"` | Collapsible list-style directory grouped by section. | +| `"card"` | Horizontal card layout. | + + + The `directory` property requires the group to have a `root` page. Only root pages render the directory listing. + + +```json +{ + "navigation": { + "groups": [ + { + "group": "Help Center", + "root": "help/overview", + "directory": "accordion", + "pages": [ + { + "group": "Getting Started", + "root": "help/getting-started/overview", + "pages": [ + "help/getting-started/quickstart", + "help/getting-started/install" + ] + }, + { + "group": "Billing", + "root": "help/billing/overview", + "directory": "card", + "pages": [ + "help/billing/plans", + "help/billing/invoices" + ] + } + ] + } + ] + } +} +``` + +#### Inheritance + +The `directory` value inherits recursively through the navigation tree. Child groups inherit the value from their parent unless they specify their own. Set `directory` to `"none"` on a child group to opt out of an inherited directory style. + +You can also set `directory` at the top level of the `navigation` object to apply a default style across your entire site. + +```json +{ + "navigation": { + "directory": "accordion", + "groups": [ + { + "group": "Guides", + "root": "guides/overview", + "pages": ["guides/quickstart", "guides/deployment"] + }, + { + "group": "API Reference", + "root": "api/overview", + "directory": "none", + "pages": ["api/authentication", "api/endpoints"] + } + ] + } +} +``` + +In this example, the **Guides** group inherits the `"accordion"` style from the top-level `navigation`, while the **API Reference** group overrides it with `"none"`. + ## Tabs Tabs create distinct sections of your documentation with separate URL paths. Tabs create a horizontal navigation bar at the top of your documentation that lets users switch between sections. diff --git a/organize/settings-reference.mdx b/organize/settings-reference.mdx index 4671d91a9..5d5d74341 100644 --- a/organize/settings-reference.mdx +++ b/organize/settings-reference.mdx @@ -225,6 +225,12 @@ Groups for organizing content into labeled sections. **Type:** array of object +#### `navigation.directory` + +Directory listing style for group root pages. Inherits recursively through the navigation tree. + +**Type:** `"none"` | `"accordion"` | `"card"` — default `"none"` + #### `navigation.pages` Individual pages in your documentation. diff --git a/organize/settings-structure.mdx b/organize/settings-structure.mdx index 9a90d9703..288a28684 100644 --- a/organize/settings-structure.mdx +++ b/organize/settings-structure.mdx @@ -197,6 +197,10 @@ See [Navigation](/organize/navigation) for complete documentation on building yo [Groups](/organize/navigation#groups) for organizing content into sections. + + [Directory listing](/organize/navigation#directory-listing) style for group root pages. Inherits recursively through the navigation tree. Defaults to `"none"`. + + Individual [pages](/organize/navigation#pages) that make up your documentation.