Collection

Overview

Collection components let you render navigation nodes and their children directly inside a page. Instead of manually listing links to child pages, you point a collection component at a navigation node and it automatically displays the children in a layout you choose.

Use collection components to:

• Build landing pages that showcase everything inside a group, tab, or dropdown
• Create hub pages for large sections so readers can scan and jump to the right topic
• Display a nested table of contents for an entire section as a collapsible tree
• Keep navigation-driven content in sync automatically as you add or remove pages

Documentation.AI provides two collection components:

• CollectionList – Displays direct children of a navigation node in one of four layouts: cards, accordion, list, or links.
• CollectionContent – Displays the full nested tree under a navigation node as a collapsible accordion structure.

You can add collection components in two ways:

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

Understanding the node attribute

Both CollectionList and CollectionContent require a node attribute that tells the component which navigation node's children 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 direct children (for CollectionList) or its full descendant tree (for CollectionContent).

CollectionList

CollectionList renders the direct children of a navigation node in one of four layouts.

Layouts

<CollectionList node="tabs:Guides" layout="cards" cols={2} />

<CollectionList node="tabs:Guides" layout="accordion" default-open={true} />

<CollectionList node="tabs:API" layout="list" />

<CollectionList node="groups:Resources" layout="links" />

Card variants

When using the cards layout, you can choose a card style with the card-variant attribute:

• default – Icon on the left, name and page count on the right.
• horizontal – Wider card with a horizontal layout.
• centered – Icon and text centered for a symmetrical look.

<CollectionList node="tabs:Guides" layout="cards" cols={3} card-variant="centered" />

Using with Web Editor

1. Place your cursor on a new line.
2. Type / and search for Collection List.
3. Select Collection List from the Dynamic category.
4. A navigation tree picker opens. Select the node whose children you want to display.
5. The component is inserted with default settings. Click the edit icon to adjust layout, columns, and card variant.

Using with Code Editor

A minimal example with only the required attribute:

<CollectionList node="tabs:Guides" layout="cards" />

A full example showing all optional attributes (some apply only to specific layouts):

<CollectionList
  node="tabs:Guides"
  layout="cards"
  cols={2}
  card-variant="default"
/>

Attribute reference

CollectionContent

CollectionContent renders the full nested tree under a navigation node as a recursive, collapsible accordion. It is useful for displaying the complete structure of a large section so readers can drill down through multiple levels.

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 CollectionList vs CollectionContent

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 CollectionList on landing pages Cards and accordion layouts work well as the primary content of a hub page that introduces a section and links readers to its children.

• 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 collection component on that content page to create a self-maintaining hub.