Dev Diary 99 - New Tree Navigation Component

Elements Dev Diary
1

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 :tada:

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 :slight_smile:

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!

Buy Elements 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 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 with the new trial mode.

:speech_balloon: Thanks for Your Feedback

The Elements 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 :blush:

Thanks again!

See you soon,
Dan @ Team Realmac

7 Likes
2

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??

3

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…

4

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 :sob:

5

Working on it but unsuccessful to date.

6

Hmmm… Can you show me a screenshot of what you’re trying to do? an existing site or sketch will do!

7

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…

8

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?

9

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…

10

it was long awaited, excellent! :clap:

11

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 :smiley:

CleanShot 2025-09-12 at 21.01.58@2x
CleanShot 2025-09-12 at 21.01.58@2x1920×1284 531 KB

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 :smiley: Download the project 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! :slight_smile:

2 Likes
12

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

13

@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
Screenshot 2025-09-12 at 15.32.091758×835 95.7 KB

Again, thank you!!

:star_struck: :star_struck: :partying_face: :partying_face:

14

Yes, they’ll be a Template in the Core Pack for this :slight_smile:

We’ve not done one yet as it’s still in development, but we will do soon. In the meantime, watch Dev Diary ep83, and download the sample project to see how things work!

1 Like
15

@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.

16

Select the component in the component tree, copy it, then paste it in to a page in another project :blush:

1 Like
17

Yup, link items will work, just like the do in the Menu Component :smiley:

1 Like
18

Is it Dairy or Diary?

Dairy
Dairy1335×324 146 KB

19

Well done sir. Love this.

20

I have built a few now, some were just testing

1 Like