Collection Content

Overview

CollectionContent renders the full nested tree under a navigation node as a recursive, collapsible accordion. Instead of showing only direct children, it displays the complete hierarchy at all levels so readers can drill down through multiple layers of your navigation.

Use CollectionContent to:

• Display a nested table of contents for an entire section as a collapsible tree
• Build reference or help center pages where readers need to see everything at a glance
• Keep navigation-driven content in sync automatically as you add or remove pages

You can add the component in two ways:

• Web Editor – Insert from the slash menu under the Dynamic category.
• Code Editor (MDX) – Use the <CollectionContent> component directly.

Understanding the node attribute

The node attribute tells the component which navigation node's full tree to display.

The node value is a path that walks your navigation tree using the format type:name, separated by / for each level. For example:

The component resolves the node at render time and displays its full descendant tree.

Using with Web Editor

1. Place your cursor on a new line.
2. Type / and search for Collection Content.
3. Select Collection Content from the Dynamic category.
4. A navigation tree picker opens. Select the target node.
5. The component is inserted. Click the edit icon to toggle the default expansion state.

Using with Code Editor

<CollectionContent node="tabs:Guides" default-expanded={false} />

Container nodes (groups, tabs, dropdowns) render as collapsible sections with a chevron. Leaf pages render as clickable links. The tree indents at each level for visual clarity.

Attribute reference

When to use CollectionContent vs CollectionList

Best practices

• Point to container nodes, not pages Collection components display children of a container (group, tab, dropdown). Pointing to a leaf page produces an empty result.

• Keep the target section well-organized Because collections mirror your navigation structure, a clean hierarchy of groups and pages produces a clean layout. Reorganize your navigation if the collection output looks cluttered.

• Use CollectionContent sparingly Full-tree rendering is most useful for reference sections or help centers where readers need to see everything at a glance. For most docs, CollectionList is the better default.

• Combine with content pages on containers If your groups or tabs have content pages attached, you can use a CollectionContent on that content page to create a self-maintaining hub.