# Dev Diary 99 - New Tree Navigation Component **URL:** \ **Category:** Elements\ **Created:** [September 12, 2025, 5:16pm UTC](https://forums.realmacsoftware.com/t/dev-diary-99-new-tree-navigation-component/50970 "2025-09-12T17:16:58Z")\ **Posts on this page:** 20\ **Page:** 1
**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 12, 2025, 5:16pm UTC](https://forums.realmacsoftware.com/t/dev-diary-99-new-tree-navigation-component/50970/1 "2025-09-12T17:16:58Z")
Hey all, We’ve just about finished another component that has been requested for quite some time now, yup, it’s the Vertical (or Tree) Navigation Component 🎉 Watch today’s video to learn more about this new component, and hear me go on a slight ramble talking about issues with Forms, CMS, Markdown, and Typography. The TL;DR is we’re aware and will get round to this and more 🙂 Have a great weekend and we’ll be back next week with a fresh new build of Elements containing the new nav component and form fixes! [![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/1/2/12ff685fe076fdbce508c7f74ce26b3c3744f2cc.jpeg "Dev Dairy 99 - New Tree Navigation Component!") ](https://www.youtube.com/watch?v=ymbrmdx9iN4) ## Buy [Elements](https://elementsapp.io/) Today Now that Elements has hit the v1 milestone, now is a great time to jump in and start building your next website. Visit [elementsapp.io](https://elementsapp.io/) to pick up your copy today. ## Try the Elements Demo The new trial mode in Elements lets you explore the full app and build up to three pages, giving you a feel for the design workflow and features. While export and publishing are disabled in the trial, everything else is fully functional, so you can see exactly how Elements works before committing. It’s the best way to experience the speed and simplicity of a modern website builder. You can now [Download Elements](http://realmacsoftware.com/download/elements/) with the **new trial mode**. ## 💬 Thanks for Your Feedback The [Elements](https://elementsapp.io/) app evolves directly from your suggestions, and as always, we’d love to hear what you think so far. Your feedback truly makes all the difference 😊 Thanks again! See you soon, Dan @ Team Realmac ---
**Author:** ![sbchasin](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/sbchasin/32/26943_2.png) [@sbchasin](https://forums.realmacsoftware.com/u/sbchasin)\ **Post date:** [September 12, 2025, 5:28pm UTC](https://forums.realmacsoftware.com/t/dev-diary-99-new-tree-navigation-component/50970/2 "2025-09-12T17:28:00Z")
Looks great. However… I didn’t see an area in the properties inspector where one can drop in a folder of pages that one wants to be in the menu. It looks like it uses all the pages from the pages inspector. Is there a way to specify which pages will appear?? ---
**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 12, 2025, 5:33pm UTC](https://forums.realmacsoftware.com/t/dev-diary-99-new-tree-navigation-component/50970/3 "2025-09-12T17:33:20Z")
The New Tree Nav will use all pages from the site, if you want to hide any pages from the menu you can do so using the “eye” icon next to each page. If you want something more specific, you might want to consider building a custom component for your needs… ---
**Author:** ![sbchasin](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/sbchasin/32/26943_2.png) [@sbchasin](https://forums.realmacsoftware.com/u/sbchasin)\ **Post date:** [September 12, 2025, 5:36pm UTC](https://forums.realmacsoftware.com/t/dev-diary-99-new-tree-navigation-component/50970/4 "2025-09-12T17:36:24Z")
Won’t work, as there are three different sections on a page where I need three different sets of links in the ‘drop down’. That is why I was asking for a Top Pages component that does multi-level links. The top pages component essentially does exactly what I need **EXCEPT** for the multi-level handling 😭 ---
**Author:** ![sbchasin](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/sbchasin/32/26943_2.png) [@sbchasin](https://forums.realmacsoftware.com/u/sbchasin)\ **Post date:** [September 12, 2025, 5:37pm UTC](https://forums.realmacsoftware.com/t/dev-diary-99-new-tree-navigation-component/50970/5 "2025-09-12T17:37:11Z")
> [@dan](#): > > If you want something more specific, you might want to consider building a custom component for your needs… Working on it but unsuccessful to date. ---
**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 12, 2025, 5:39pm UTC](https://forums.realmacsoftware.com/t/dev-diary-99-new-tree-navigation-component/50970/6 "2025-09-12T17:39:47Z")
Hmmm… Can you show me a screenshot of what you’re trying to do? an existing site or sketch will do! ---
**Author:** ![sbchasin](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/sbchasin/32/26943_2.png) [@sbchasin](https://forums.realmacsoftware.com/u/sbchasin)\ **Post date:** [September 12, 2025, 5:43pm UTC](https://forums.realmacsoftware.com/t/dev-diary-99-new-tree-navigation-component/50970/7 "2025-09-12T17:43:15Z")
> **[US Special Forces, Special Operations Forces and Airborne Units](https://military-insignia.us/Pages/SpecOpsForcesInsignia.html)** Top of the page, Beret Flashes, Parachute Wing Backgrounds, SSI & Pocket Patches All of those pages are in folders already in Elements. To manually do it with the dropdown component would require a total of fortyish buttons, each manually set up…Doable, but… ---
**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 12, 2025, 5:49pm UTC](https://forums.realmacsoftware.com/t/dev-diary-99-new-tree-navigation-component/50970/8 "2025-09-12T17:49:20Z")
Why not change the design of the site, and have everything in a sidebar (like I demoed). It would make navigating the site so much easier. Failing that, I wonder if we could build you a custom component that would do the job for you… @ben what do you think? _btw. What did you build your existing site in?_ ---
**Author:** ![sbchasin](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/sbchasin/32/26943_2.png) [@sbchasin](https://forums.realmacsoftware.com/u/sbchasin)\ **Post date:** [September 12, 2025, 5:53pm UTC](https://forums.realmacsoftware.com/t/dev-diary-99-new-tree-navigation-component/50970/9 "2025-09-12T17:53:34Z")
> [@dan](#): > > btw. What did you build your existing site in? GoLive 5, last updated with GoLive 6. Elements is the **first** program since then that I liked and was successfully able to rebuild my site. Bought / Tried many different programs between then and now, including RapidWeaver 8/9/Classic. This is the last little bit I need to finish and publish updated version. First goal was to rewrite site. Second goal was to change design. Using this time to rebuild to learn Elements and any other assorted stuff. Second phase is re-design. On another note, the edit post icon has disappeared… ---
**Author:** ![MultiThemes](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/multithemes/32/25117_2.png) [@MultiThemes](https://forums.realmacsoftware.com/u/MultiThemes)\ **Post date:** [September 12, 2025, 6:28pm UTC](https://forums.realmacsoftware.com/t/dev-diary-99-new-tree-navigation-component/50970/10 "2025-09-12T18:28:57Z")
> [@dan](#): > > , it’s the Vertical (or Tree) Navigation Component 🎉 it was long awaited, excellent! 👏 ---
**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 12, 2025, 7:07pm UTC](https://forums.realmacsoftware.com/t/dev-diary-99-new-tree-navigation-component/50970/11 "2025-09-12T19:07:47Z")
Hi @sbchasin I had a spare 30 minutes, so decided to give your dropdown menu a look… the good news is I’ve managed to recreate it as a Custom Component for you 😃 ![CleanShot 2025-09-12 at 21.01.58@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/7/2/72b5def8666a7403916ede72dc41631d0d739bf8.jpeg) I found an old version of you site kicking around, and hooked up this custom component to one of your folders, here’s what it looks like: I’ve added a few simple styling controls, but mostly matched your existing design to keep things consistent and easy. If you could transfer over 1 million dollars… just joking 😃 [Download the project](elementsapp://downloadDocument/2ftfy8rIMPeo) and use the “ **Custom Dropdown** ” component as you like. You can copy this custom component in to your project and it’ll work as expected. Hope this helps! 🙂 ---
**Author:** ![MikeV](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/mikev/32/34985_2.png) [@MikeV](https://forums.realmacsoftware.com/u/MikeV)\ **Post date:** [September 12, 2025, 7:17pm UTC](https://forums.realmacsoftware.com/t/dev-diary-99-new-tree-navigation-component/50970/12 "2025-09-12T19:17:53Z")
Yup, this is WILD! I love the tree component. Please @dan, can you also add some nice Tree navigation examples in the Core pack? Ps: maybe i missed it but will there be a beginners-guide video for the CMS and how to use markdown or did i just missed this one? Nice work! Greetings, Mike ---
**Author:** ![sbchasin](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/sbchasin/32/26943_2.png) [@sbchasin](https://forums.realmacsoftware.com/u/sbchasin)\ **Post date:** [September 12, 2025, 7:36pm UTC](https://forums.realmacsoftware.com/t/dev-diary-99-new-tree-navigation-component/50970/13 "2025-09-12T19:36:20Z")
@ben Thank you sir!! 1. What is the proper way to copy the component from one project to another?? (I just copy and pasted the template code, hooks code and properties code from the downloaded project to my project) 2. This is what I got, I assume a z-index issue?? ![Screenshot 2025-09-12 at 15.32.09](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/8/6/86fd9ef3a5791c4cefc433deaab074cb91130785.png) Again, thank you!! 🤩 🤩 🥳 🥳 ---
**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 12, 2025, 7:45pm UTC](https://forums.realmacsoftware.com/t/dev-diary-99-new-tree-navigation-component/50970/14 "2025-09-12T19:45:39Z")
> [@MikeV](#): > > I love the tree component. Please @dan, can you also add some nice Tree navigation examples in the Core pack? Yes, they’ll be a Template in the Core Pack for this 🙂 > [@MikeV](#): > > Ps: maybe i missed it but will there be a beginners-guide video for the CMS and how to use markdown or did i just missed this one? We’ve not done one yet as it’s still in development, but we will do soon. In the meantime, watch [Dev Diary ep83](https://forums.realmacsoftware.com/t/dev-diary-93-cms-early-access-beta/49493/83), and download the sample project to see how things work! ---
**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 12, 2025, 8:24pm UTC](https://forums.realmacsoftware.com/t/dev-diary-99-new-tree-navigation-component/50970/15 "2025-09-12T20:24:14Z")
@dan I’m curious if the new tree navigation will also display any LINKS that are created in the page browser, if they are visible? I like to mix in links that go to anchors within the page, and it would be nice if the tree allowed these to be included as opposed to just pages. ---
**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 12, 2025, 8:32pm UTC](https://forums.realmacsoftware.com/t/dev-diary-99-new-tree-navigation-component/50970/16 "2025-09-12T20:32:54Z")
Select the component in the component tree, copy it, then paste it in to a page in another project 😊 ---
**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 12, 2025, 10:11pm UTC](https://forums.realmacsoftware.com/t/dev-diary-99-new-tree-navigation-component/50970/17 "2025-09-12T22:11:38Z")
> [@handshaper](#): > > I’m curious if the new tree navigation will also display any LINKS that are created in the page browser, if they are visible? Yup, link items will work, just like the do in the Menu Component 😃 ---
**Author:** ![jbyfield](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jbyfield/32/82_2.png) [@jbyfield](https://forums.realmacsoftware.com/u/jbyfield)\ **Post date:** [September 12, 2025, 11:56pm UTC](https://forums.realmacsoftware.com/t/dev-diary-99-new-tree-navigation-component/50970/18 "2025-09-12T23:56:05Z")
Is it Dairy or Diary? ![Dairy](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/f/6/f67afd5059566d945840c3b92b1d7994a80236a1.jpeg) ---
**Author:** ![Flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@Flash](https://forums.realmacsoftware.com/u/Flash)\ **Post date:** [September 13, 2025, 12:26am UTC](https://forums.realmacsoftware.com/t/dev-diary-99-new-tree-navigation-component/50970/19 "2025-09-13T00:26:59Z")
Well done sir. Love this. ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [September 13, 2025, 8:44am UTC](https://forums.realmacsoftware.com/t/dev-diary-99-new-tree-navigation-component/50970/20 "2025-09-13T08:44:02Z")
I have built a few now, some were just testing [Next page](https://forums.realmacsoftware.com/t/dev-diary-99-new-tree-navigation-component/50970.md?page=2)