Attempting to create a custom dropdown menu

@dan

I have been working to create a custom dropdown menu with the help of the bot. The following properties code unfortunately does not provide a selector for a folder in the inspector. Is the code correct or does that property not exist or did the bot make an error:

{
  "groups": [
    {
      "title": "Dropdown Menu",
      "properties": [
        {
          "title": "Dropdown Label",
          "id": "label",
          "text": {
            "default": "Menu"
          }
        },
        {
          "title": "Source Folder",
          "id": "folder",
          "pages": {
            "mode": "folder",
            "subtitle": "Select the parent folder whose child pages will appear in the dropdown."
          }
        }
      ]
    }
  ]
}

bot conversation here: https://forums.realmacsoftware.com/t/dynamic-dropdown-menu-from-folder-in-elements/49537

If you are trying to select a page or folder in your project, you should probably use a 'link” property as that will allow you to select a page or folder from the project.

I tested your code and it did not work, but when I swapped out “pages” for “link”, I got a working property that allowed me to make a selection from the project. Not sure if there is a “mode” for “folder” as shown, it does not seem to make any difference.

Are you trying to get a list of pages, or are you trying to point to a folder of links?

Starting with a list of pages as it may be easiest. Going to try this now

UPDATE: Appears now in inspector but doesn’t show anything in editor nor preview. Bot explains that link is for singular link, not multiple.

I guess I’m not understanding just what you are looking for, are you trying to get a list of all the pages in your project?

What would you be expecting the user to select with this property?

A folder full of links?

Or something else.

If it is all the pages in the project you might have to handle this very differently. The solution is to probably set this up in your hook.js file as there you can access all of the pages and then define an array to export to your code.

The other option is to use a directive in your code to create a drop well into which you could then drop a Top Pages component and it would do all the heavy lifting for you. Unless there is something it cannot handle. But my experience with it has been that you can do pretty much anything with it. For instance, you can define a folder in the project pane that has a bunch of link files in it to create some custom link arrangement. Point the Top Pages at this folder and you are good to go. I have created custom drop-down using the top pages component.

That was Plan A. Top Pages doesn’t support sub-folders. I am currently working on Plan C.

Goal: Trying to re-create the dropdowns from my original site in Elements - US Special Forces, Special Operations Forces and Airborne Units

OK, after looking at your site, I can see what you are after with the dropdown. But quite frankly, if it were me, I would go about this in a totally different way. This type of deep navigation lends itself to the use of something like a mega menu, which I think you could build in Elements with a little effort.

Here is an example of one done with Tailwind.

Tailwind Mega Menu

With this type of menu you would click on a top-level item, a window would then open below the menubar. In there you would then have the next level items which would open up to the right across the window to whatever depth you need, if they had nested items. Hard to explain but there are plenty of examples of this type of menu on the Internet. You could even go one better and have the second level open in the window and show all of the nested items from left to right. This would make things way more discoverable for your customers. I think it might also be relatively easy to implement using the core elements.

I thought Ben said he was going to be adding support for sub-folders to the top pages, could be wrong.

BTW, you could do this in the custom component, but I think you would have to set it up in the hooks file so you can parse the menu structure and then output something that your code could use to build out the menus.

Thank you. Something for me to experiment with tomorrow