Custom MEGAMENU Component

Elements Component Development
1

Today, I thought I would tackle trying to implement something like a megamenu in Elements.

At first, I tried to do this with a mix of core components and a custom component, but that did not end well. So I went back to a combination of the standard MENU component and a custom component. This was a lot harder than it should have been, largely because it is impossible to hook into or customize the standard menu.

The only way I could get it to work is by utilizing the right drop zone in the menu. This, by itself, was an exercise in futility, as you have no control over this drop zone.

But anyway, I persisted and was able to create something close to what I had in mind. The custom component has a trigger, which was placed in the drop zone. When you hover over the trigger, the megamenu opens below the navbar. It stays in place until you move out of it.

Here is what it looks like on the screen.

CleanShot 2025-08-12 at 19.51.39@2x
CleanShot 2025-08-12 at 19.51.39@2x3078Ă—400 31.3 KB

The question I would like to pose to @dan and @ben is how something like this could be hooked up to one of the menu items in the standard menu. Ideally, I want to assign this behavior to one of the menu items and have that item trigger the display of the megamenu. That way, I don’t need to create the trigger as part of the custom component, which brings up a whole raft of problems.

Ideally, we would have support for something like this built into the standard menu component, or a separate component provided by Elements. But, seeing as that is not forthcoming, I was forced to go down the custom road. But I’m stymied by the fact that I cannot easily hook into the standard menu.

I did explore creating a completely custom navbar built with core components, but that did not ease the problem of integrating the custom piece with the parts built with the core.

I would appreciate some guidance on how something like this could be easily accomplished.

BTW, I also added a bunch of properties to the custom component to make it easier to set up some of the information. This includes the ability to show/hide the megamenu in the editor. The content of the megamenu is all made with the core components, as there is a single drop zone within the megamenu into which the content can be added.

I look forward to hearing what thoughts the team and others have about creating something like this in Elements.

2

is this any help? Tailwind CSS Mega Menu for HTML - Material Tailwind

3

Aloha Paul,

Yes, I have looked at a large number of these, and while helpful all of them have the problem that you have to install some JS plugin that they rely on to handle the showing and hiding. I started with one, of them and then decided to try and do it on my own with the help of the bot.

1 Like
4

We do plan to build a component that would more easily allow you to build this style of “mega menu”, but we have a few other things to do first… for now I’d probably go the route of using AI and hand coding it.

I’ve found the recently released ChatGPT 5 to be even better at creating Tailwind code. If you do use it, tell it to use Tailwind AND AlpineJS, I think you’d be able to get pretty far building a menu this way…

5

@dan

Any possibility of adding sub-folder support to the top pages component??

Would make my life a whole lot easier!! :smiling_face_with_sunglasses:

6

Aloha @dan yes, the BOT and I have just cracked this, and I now have a working framework for a custom mega menu with beautiful opening and closing animations. Now I have to spend some time polishing it and adding custom properties to make things easier to manage and to better sync things.

I have used ChatGPT for some of my other components. I’ll consider trying to run through this project with it to see how it differs. The thread I created with the Elements bot is very long, as it took some time to get there, but the amount of code is small.

7

That is awesome to hear :smiley:

You want drop down menus in it?

8

Yes please. It would make my life a whole lot easier. I have been playing with the bot, but we are stuck on code for properties. It suggested a property code that apparently doesn’t exist.

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

9

Here is a short GIF showing what this looks like currently. I’m still experimenting with the actual navbar, but this approach provides a lot of flexibility.

CleanShot 2025-08-13 at 11.17.35

All of the content of the megamenu is handled with core components, there is just a single @dropzone directive in the panel so you can basically put anything you like in it.

I should add that there is still work to do to make this more functional on small screens, obviously.

1 Like
10

@handshaper

congratulations. really great work and a very beautiful mega menu!

we absolutely need the ability to sell custom components in the rw-marketplace.

2 Likes
11

I’m also awaiting to buy components from the marketplace.:slightly_smiling_face:

1 Like
12

I have done some more refinement to the megamenu to make it work better and be responsive. Instead of using a row of buttons in the custom navbar, I’m now using a combination of two Top Pages components and a button. The button triggers the megamenu, and the top pages handle all the rest, so they get all of the standard menu behavior.

There is a separate standard navbar that swaps in when the screen gets down to the smaller sizes, where there is no megamenu present. This seemed to be the most elegant way to handle it, as it feels more intuitive. It also meant I did not have to build a completely separate custom navbar for the smaller sizes.

Here is what it looks like now.

CleanShot 2025-08-14 at 10.00.38

@dan This did raise an interesting issue, which is how one would package something like this into a DevPack, where the component is made up of three distinct parts, two of which are just collections of standard components. To implement this, there are the standard navbar for the small screen sizes, the custom navbar for all the other sizes, and the custom megamenu. They can’t easily be combined into a single component or even a global as there is no grouping mechanism in Elements that doesn’t force layout constraints on the components. For example, I cannot package the megamenu inside the navbar without some effort due to layering and z-index issues. Although I still need to explore this further.

It seems Elements might need some sort of grouping mechanism that allows the contents to remain part of the stack, without impacting things in other ways. This group could then be converted to a global and all of the pieces are bound up in a single element. Making it easier to manage and move around. It also means all the elements in the group could be shown and hidden on demand.

Hope this makes sense.

UPDATE: I spoke to soon, it actually works just fine for me to embed my megemenu inside the container that forms the navbar, as the megamenu does the right thing with displaying itself. Sorry about that, now I need to see if the mobile navbar can go in there as well.

1 Like