With the tree component, is there a way to ensure that all sub-menus open expanded when the tree is displayed?
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?
@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.
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 
@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.
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?
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.
1 Like
@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.
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.
1 Like
Here is what the final version of the vertical menu looks like using the tree component.
It looks good even without the icons at the second level.
Anyone that wants to try it out can find it here.
1 Like
Hey @handshaper, we’ve made some updates to the tree component in Elements 1.3.2. While it doesn’t include sub icons (yet), it does have more control over what’s displayed!
Hope you find it useful
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.
1 Like
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!
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.
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?
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.
“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!
It takes some getting used to
But I like that it shows up in the tree on the left for me…
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?
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.
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
1 Like
Got it! Now I understand how this would be utilized.