The structure of the pages does not always correspond exactly to the menu we want to show so, as an alternative to the current single solution that shows the names of the pages, it would be useful to be able to enable a ‘drop-zone’ so that we can insert buttons to build a menu with custom names and links.
The best thing (maybe) would be to have both the ‘drop-zone’ in the Menu component but also a new component to be placed in that ‘drop-zone’ on the type of “Top Pages” but where you can manually set the menu items with their respective links.
Because otherwise how can you set a menu for a page of the site, where the menu items lead to the various sections of the page?
I think Elements is flexible enough to do what you need. You can hide and show pages, and also create more menu items by using “Links” (this was a recent addition).
Here’s a quick video explaining:
Let me know if I missed anything or if you have any more questions
Ok, I can use the “Links” to build my custom items for a one-page navigation. But how can I do to adjust the offset of the link?
In addition, for the one-page-navigation, it would be nice if the menu item (added via Links) had an “active” state to highlight the section we are visiting while scrolling the page.
In the case of a one-page site, therefore with links that point to sections on the same page, there is a problem to solve in the mobile menu. The mobile menu should close when a link is clicked, because at the moment (since the navigation is on-page) after clicking the menu item the page is positioned at the right point but the mobile menu remains open and you cannot read the contents on the page. You are forced to always click on the close button.
Also for the Dropdown component (Content area) there should be an option that makes it close automatically when a link inside it is clicked.
Top Pages component is really good for this, especially if you create a folder full of links and then point the component to that folder. But I have also built a menubar where I used the drop zone to add a Dropdown Menu component and used that to add a bunch of navigation links.
The only missing feature that I have not found in the Top Pages component is the ability to show the active page, like what the standard Menu component does when on a page. That would make this even easier to create a custom nav system. It does have settings for the active color but these appear to be being used when hovering over an item. Not sure if this is a bug or somehow I’m missing something.
UPDATE: turns out I was wrong the active styling does work, it just doesn’t work if you have a LINK to a page. When an actual page is used in the Top Pages it does the right thing. Sorry about that. It would be nice if the Top Pages had support for specifying the HOVER colors separate from the ACTIVE colors. It would be nice to have a way of doing this with a LINK. It seems odd that it does not work with a LINK to a page. In my test case I’m pointing the Top Pages to a folder for some of the pages and it figures that out no problem. But if I have a folder of links pointing to the pages it does not work. Hmm!
This is because the Link is just that — a link to a URL. Elements doesn’t know that the Link is a link to a specific page in your project, and therefor doesn’t mark it as “active”.
I can see the use case though, so I’ll add it to my list of things to investigate further and see if we can come up with a solution
I think it would be handy for building alternate navigations systems. In particular, the way I use Top Pages in my footer. It would help user if the page the on is not only highlighted in the navbar, but also in the footer.
