> For the complete documentation index, see [llms.txt](https://docs.realmacsoftware.com/elements-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.realmacsoftware.com/elements-docs/using-elements/components/data-and-organisation/tree.md).

# Tree

The Tree component builds hierarchical navigation from your site structure. It is ideal for documentation sidebars, large section menus, and any nested navigation where visitors need to expand and collapse page groups.

### How to Use Tree

You’ll find Tree under **Navigation** in the Components list.

1. Drag **Tree** onto the page or into a sidebar.
2. Choose All, Active Page, or Selected Page as the source.
3. Set automatic or manual depth.
4. Select the submenu SVG and configure its placement.
5. Style top-level, second-level, and deeper menu items.
6. Preview submenus while editing, then test the complete tree in a browser.

### Component Settings

#### General

**Preview Sub Menus** displays all nested items in Edit mode. It is off by default.

**Use**

* **All** — Builds from the complete site hierarchy. This is the default.
* **Active Page** — Builds from children of the active page.
* **Selected Page** — Builds from children of the selected Page link.

**Depth** can be Auto or Manual. Auto is the default. Manual reveals **Show**, which defaults to 1 level.

**Duration** controls opening and closing in milliseconds and defaults to 200.

#### SVG Icon

**Icon** selects the submenu indicator SVG.

**Size** defaults to theme spacing 4.

**Placement** positions the icon at Start or End and defaults to End.

#### Top Level Pages

**Page Icon Display** is off by default. When enabled, Size defaults to theme spacing 5 and Spacing to 2.

Layout controls include item **Padding** and **Gap**; the gap defaults to theme spacing 2.

Font controls include Font, Size, Weight, Letter Spacing, and Line Height. Font defaults to Body and Size to Base.

**Radius** defaults to 0. Use **State** to edit Normal and Hover Text, Background, and background Opacity independently.

#### Second Level Menus

**Indent** defaults to theme spacing 3 and **Item Spacing** to 2.

Border controls set Size, Color, and Opacity. The default border width is 0, colour is Surface 200, and opacity is 100%.

#### Second Level Items

Set Padding, Font, Size, Weight, Letter Spacing, Line Height, and Radius. Use State to edit Normal and Hover Text, Background, and Opacity.

Normal background opacity defaults to 0%, keeping the background transparent.

#### Third+ Level Menus

**Indent** and **Item Spacing** both default to theme spacing 3. Border Size defaults to 0, Color to Surface 200, and Opacity to 100%.

#### Third+ Level Items

These repeat the second-level item controls for deeper pages: Padding, typography, Radius, and separate Normal and Hover Text, Background, and Opacity.

### Accessibility

Keep page names concise and make expanded, collapsed, active, hover, and keyboard focus states visually distinct. Use a familiar submenu icon and test every level with a keyboard.

### Tips and Best Practices

* **Limit visible depth:** Very deep trees can overwhelm visitors; show only the levels needed for the current section.
* **Use Preview for styling:** Turn it on while working, then test real expansion in a browser.
* **Differentiate hierarchy:** Use indentation, spacing, or text weight consistently between levels.

### Related Components

* [Menu](/elements-docs/using-elements/components/navigation-and-interaction/navigation-standard.md) — Provides primary responsive site navigation.
* [Breadcrumbs](/elements-docs/using-elements/components/navigation-and-interaction/breadcrumbs.md) — Shows the path to the current page.
* [Top Pages](/elements-docs/using-elements/components/data-and-organisation/top-pages.md) — Displays a flat list of top-level pages or folder contents.

| Common Control                                                                                                     | Description                                                             |
| ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- |
| [Link](/elements-docs/using-elements/components/common-controls/link.md)                                           | Link to a page, resource, anchor, email address, or website.            |
| [Layout](/elements-docs/using-elements/components/common-controls/layout.md)                                       | Control positioning, stacking, visibility, overflow, and isolation.     |
| [Sizing](/elements-docs/using-elements/components/common-controls/sizing.md)                                       | Set width, height, and responsive size constraints.                     |
| [Spacing](/elements-docs/using-elements/components/common-controls/spacing.md)                                     | Add responsive margin and padding.                                      |
| [Typography & Text Styles](/elements-docs/using-elements/components/common-controls/typography-and-text-styles.md) | Control fonts, text spacing, decoration, colour, and semantic wrappers. |
| [Backgrounds](/elements-docs/using-elements/components/common-controls/backgrounds.md)                             | Apply colour, image, gradient, SVG, video, and hover backgrounds.       |
| [Transitions](/elements-docs/using-elements/components/common-controls/transitions.md)                             | Choose what animates and set its timing curve, duration, and delay.     |
| [Effects](/elements-docs/using-elements/components/common-controls/effects.md)                                     | Apply shadows, opacity, and hover effects.                              |
| [Filters](/elements-docs/using-elements/components/common-controls/filters.md)                                     | Apply blur, brightness, saturation, shadow, and backdrop effects.       |
| [Transforms](/elements-docs/using-elements/components/common-controls/transforms.md)                               | Scale, rotate, move, and skew components.                               |
| [Borders](/elements-docs/using-elements/components/common-controls/borders.md)                                     | Set border style, colour, opacity, width, radius, and hover states.     |
| [Advanced](/elements-docs/using-elements/components/common-controls/advanced.md)                                   | Add CSS classes and IDs, or change supported HTML tags.                 |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.realmacsoftware.com/elements-docs/using-elements/components/data-and-organisation/tree.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.