So it turns out the number 13 is a bit of an unlucky number — I hit a little layout issue while recording this dev diary and had to edit in a separate clip, sorry for the disjointedness, but hopefully you’ll still enjoy the video
This week we’re taking a look the Tree Navigation Element, it’s the perfect menu structure for large page heavy sites. As always, have a watch of the video and let us know what you think!
We love feedback!
Remember, we’re building Elements in the open so we can get feedback as we go. We want to make sure we’re building the product everybody here wants (including us). Share your ideas and feedback in the comments below.
Your feedback is invaluable; together we can build the best web design app on the Mac!
Hi Dan, you mentioned you were in the polishing stages. Has the property inspector received a polishing yet, as I’m finding it very hard to follow/navigate as the information density is fairly light, and the labels for the controls aren’t immediately clear (they’re indented), which makes it very hard to scan quickly.
I had a question regarding using the COMMAND key to drag duplicate selected elements. What was the reason for using the COMMAND key?
Those who use design software have deep muscle memory around using the OPTION key when doing a drag duplication.
I’m sure there is a reason, but thought I would ask. It will be a pain point to have to learn a different key for duplicating when the OPTION is already entrenched in my brain.
@dan This vertical tree menu is precisely what I need, including examples for both large and small screens. For the desktop view, can we utilize the same menu and have it function as a mobile menu on smaller screens? I’m aiming to avoid duplicating code by hiding and repeating it for each use.
Can the tree menu be set-up to compact previous expanded menus when you click a new one? so the whole menu is not getting really long? And can that be done with the ‘style blocks’ on the right and the ‘elements’ on the left so that the user is not scrolling and scrolling?
You must be getting quite frazzled at this stage!?
Nah, we do need to do another pass over it before we ship. We have a few ideas on tweaking the layout to fix the visual hierarchy. Stay tuned.
Having said that… It’s not too bad when you’re using it, and especially once you get to know the Element(s). However, sometimes when I demo, Ben has literally just updated the Element with new or changed settings, so it’s almost like I’m using it for the first time…
It would help if you could collapse certain control inside the inspector like the current solution offers. This way, you won’t be looking at the plethora of options when you’re looking for just one.
It would help even more if it’s remembered which ones you’ve collapsed and which ones you kept expanded when navigating between elements on a page.
Just a bit of QoL - nothing major, but I’d love it.
I have some great news! It already does both of those things, check out the quick screen recording below to see it in action. We also plan to add a button to allow you to collapse/expand all sections in one go, oh and maybe a Search field too!
Hi Dan, is it possible that when one selects a page in the tree, the tree stays open with all level 0 items + the items on the selected page level?
I personally don’t like hidden menus - one never sees at once what a site offers.
An example of what I mean is at marc.vos.net where on the left the menu is always visible, including smart sub-page levels.
There’s a checkbox in the inspector (like in Classic), where you can specify if a page will appear automatically in the generated site navigation - hope that helps!
Thanks for this response. In fact I would like to be able to show only the current category with all its pages and only the section for the others. For example with your video when you’ re in « elements category » you see all the indexed pages of this category and only the « menu header » for the others Classic, support, blog…). I’m not a native english speaker, hope that make sense Anyway thanks again for your great job.
Anyway thanks again for your great job.