# Tree Component Question?

**URL:** <https://forums.realmacsoftware.com/t/tree-component-question/51106>\
**Category:** Elements\
**Created:** [September 17, 2025, 6:46pm UTC](https://forums.realmacsoftware.com/t/tree-component-question/51106 "2025-09-17T18:46:35Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [September 17, 2025, 6:46pm UTC](https://forums.realmacsoftware.com/t/tree-component-question/51106/1 "2025-09-17T18:46:35Z")

</div>

With the tree component, is there a way to ensure that all sub-menus open expanded when the tree is displayed?

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [September 18, 2025, 6:34am UTC](https://forums.realmacsoftware.com/t/tree-component-question/51106/2 "2025-09-18T06:34:18Z")

</div>

There isn’t, and I’m wondering why you would want to do that? What would be the use case to have all menu items open on page load?

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [September 18, 2025, 7:14pm UTC](https://forums.realmacsoftware.com/t/tree-component-question/51106/3 "2025-09-18T19:14:44Z")

</div>

@ben For me, the beauty of the Tree component is that it reveals so much more than a typical navbar can. I use several anchor links for each page to make it easy to navigate to different sections within the page. I want the user to see these links the minute they open the tree, so they can immediately see what is available.

Relying on the user to disclose these links is dubious, mainly because, unlike in the navbar, they are not exposed when the user hovers over the page.

Plus, there is the fact that the user can click on the title of the page, and they will go to that page, so they might not click on the disclosure control and see all the options.

I prefer to make things as discoverable as possible, which is one of the reasons I wanted to use something like the tree component in the first place.

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [September 19, 2025, 7:09am UTC](https://forums.realmacsoftware.com/t/tree-component-question/51106/4 "2025-09-19T07:09:08Z")

</div>

I see what you’re saying, but at the same time I’m struggling to think of a site that has this tree style navigation where all links are expanded by default.

I think I might have seen it where the top level folders are expanded, showing the second level.

However, as always, if this options is important for a lot of users then we’ll definitely add it 🙂

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [September 19, 2025, 4:07pm UTC](https://forums.realmacsoftware.com/t/tree-component-question/51106/5 "2025-09-19T16:07:44Z")

</div>

@ben I would only want this to work to show the second level, as my feeling is that further levels down are of less relevance. But exposing the second level would be important because those are the in-page links I care about.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [September 19, 2025, 4:53pm UTC](https://forums.realmacsoftware.com/t/tree-component-question/51106/6 "2025-09-19T16:53:25Z")

</div>

You could use the top pages component, that allows you to specify a sub-folder, and they can be laid out in a vertical layout (with icons). Maybe that would work?

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [September 19, 2025, 5:46pm UTC](https://forums.realmacsoftware.com/t/tree-component-question/51106/7 "2025-09-19T17:46:31Z")

</div>

Yes, I already have a working version of this that I had done some time back, but it is complicated by the fact that the Top Pages component does not support sub-menus. So to get something like the tree it would take a little more work as there would need to be a top pages for each level and then I would have to manage the indentation.

But this approach is certainly doable, but more work then using the tree.

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [September 19, 2025, 9:37pm UTC](https://forums.realmacsoftware.com/t/tree-component-question/51106/8 "2025-09-19T21:37:32Z")

</div>

@dan I went ahead and did a build-out of a vertical menu using the Top Pages component. It is doable, but due to the lack of styling options, there is no way to make it as nice-looking as can be achieved with the Tree component. You can get icons with the sub-menus, so that is one plus with this approach. It is also painful to create all of the link folders and links to use this approach.

 ![CleanShot 2025-09-19 at 11.31.23@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/0/2/02ef969e7a4625722c40bd1ba4b218070b4824a8.jpeg)

I’m still convinced the tree is the better option; it just needs to add support for icons at different levels and possibly control over the initial state of a sub-menu—expanded or not.

I’m going to go back to the tree for this site and will live with the deficiencies, for now.

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [September 20, 2025, 5:00am UTC](https://forums.realmacsoftware.com/t/tree-component-question/51106/9 "2025-09-20T05:00:22Z")

</div>

Here is what the final version of the vertical menu looks like using the tree component.

 ![CleanShot 2025-09-19 at 18.58.14@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/1/b/1bcc3030a9409ac4765ca31d7b088fd54233d945.png)

It looks good even without the icons at the second level.

Anyone that wants to try it out can find it here.

[GB24 Fin System](https://gb24-box.com/)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [September 23, 2025, 3:46pm UTC](https://forums.realmacsoftware.com/t/tree-component-question/51106/10 "2025-09-23T15:46:12Z")

</div>

Hey @handshaper, we’ve made some updates to the tree component in [Elements 1.3.2](https://forums.realmacsoftware.com/t/elements-1-3-2-23869/51233). While it doesn’t include sub icons (yet), it does have more control over what’s displayed!

Hope you find it useful 🙂

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [September 23, 2025, 4:07pm UTC](https://forums.realmacsoftware.com/t/tree-component-question/51106/11 "2025-09-23T16:07:27Z")

</div>

@dan

I’ve just started playing with it, but I haven’t figured out enough to report on yet. I did notice that one thing changed, which is a negative. You can no longer click on the disclosure SVG and have it expand a sub-menu without the modal automatically closing. This is a significant step back for me, as it negates the ability to easily support in-page navigation with the tree.

However, I may not have fully grasped how to utilize the new changes correctly.

I think this is happening because any click anywhere in the modal will close it, without taking you to any other part of the site.

Before I could go to the links in my sub-menus and click on them to move around within the page, WITHOUT the modal closing, this defeats how I had been using the tree/modal.

For me, this is a step back.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [September 23, 2025, 4:41pm UTC](https://forums.realmacsoftware.com/t/tree-component-question/51106/12 "2025-09-23T16:41:52Z")

</div>

Ah, sorry! That appears to be an unwanted side effect of “fixing” the modal close issue.

We’ll need to re-look at the modal and get that fixed up, sorry for the inconvenience. We’ll hopefully have a new build out tomorrow!

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [September 23, 2025, 5:02pm UTC](https://forums.realmacsoftware.com/t/tree-component-question/51106/13 "2025-09-23T17:02:35Z")

</div>

Phew, glad to hear it, that had me worried.

I’m still trying to understand what the use case is for the “Selected” and “Active” page options. I tried them out, but I must be missing something. Maybe we need a more detailed video on how to leverage these options.

BTW, I love the new text hover option. I can now remove a number of Tailwind classes I added to style a text block.

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [September 23, 2025, 6:44pm UTC](https://forums.realmacsoftware.com/t/tree-component-question/51106/14 "2025-09-23T18:44:10Z")

</div>

> [@handshaper](#):
>
> trying to understand what the use case is for the “Selected” and “Active” page options

Active allows you to display only the pages that are children of the currently active page. Use case would be a sub menu for the current page you’re viewing.

Selected allows you to manually select a page from your project and display only the children of that page. Use case would be if you wanted a certain set of pages to always be displayed.

Does that make sense?

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [September 23, 2025, 6:48pm UTC](https://forums.realmacsoftware.com/t/tree-component-question/51106/15 "2025-09-23T18:48:41Z")

</div>

Let me see if I understand this correctly.

Would these be used in conjunction with a standard menu, or would the tree menu update accordingly depending on either the selected or active page?

Trying to come to grips with how these settings could be leveraged if I were already using a tree menu, but on certain pages, I needed to expose additional menu items.

I still don’t understand it somehow.

I’ll have to create a site to use for experimenting with these new options, maybe then I’ll get it.

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [September 23, 2025, 6:55pm UTC](https://forums.realmacsoftware.com/t/tree-component-question/51106/16 "2025-09-23T18:55:37Z")

</div>

“Active Page” dynamically uses the child pages of the page you place the Tree component on — you can use this setting to show only the children of the current page.

“Selected Page” allows you to select a page and display only the children of that selected page.

Not sure how else to explain it 😅 Have a play with the settings and see how you get on!

---

<div class="post-metadata">

**Author:** ![MichaelDroste](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/michaeldroste/32/37212_2.png) [@MichaelDroste](https://forums.realmacsoftware.com/u/MichaelDroste)\
**Post date:** [September 23, 2025, 7:53pm UTC](https://forums.realmacsoftware.com/t/tree-component-question/51106/17 "2025-09-23T19:53:48Z")

</div>

It takes some getting used to 🙂

But I like that it shows up in the tree on the left for me…

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [September 24, 2025, 1:45am UTC](https://forums.realmacsoftware.com/t/tree-component-question/51106/18 "2025-09-24T01:45:08Z")

</div>

I think a small sample project and video would help understand this, as I still don’t get it. Maybe I’m just being dense.

I can see how it could be used on an active page, but how would you get to that page? Would it be used in conjunction with a regular menu? Additionally, once you reach the page and it only displays the items for that page, how do you navigate to somewhere else? Once again, would it be from the menubar?

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [September 24, 2025, 8:01am UTC](https://forums.realmacsoftware.com/t/tree-component-question/51106/19 "2025-09-24T08:01:33Z")

</div>

> [@handshaper](#):
>
> I can see how it could be used on an active page, but how would you get to that page?

An example:

You might have the Top Pages component at the top of the page in a header area.

The Tree component could then be further down the page, perhaps in a sidebar.

This would give you “top level” navigation in the header of the page, and then sub-page navigation on the page.

> [@handshaper](#):
>
> once you reach the page and it only displays the items for that page, how do you navigate to somewhere else?

You could use both Top Pages and Tree to create a custom navigation system for each page. You don’t need to use one or the other, combine them 🙂

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [September 24, 2025, 6:21pm UTC](https://forums.realmacsoftware.com/t/tree-component-question/51106/20 "2025-09-24T18:21:12Z")

</div>

Got it! Now I understand how this would be utilized.
