Mega Menu - Follows Collapse-like behaviour, when I would expect Accordion-like behaviour

[MattJonesSiteglide]

Describe the bug When using the mega-menu component or block, there is no support in the code for closing one mega-menu when another is opened. I would expect the mega-menu to have an accordion-like behaviour. Currently this isn't visible in the example, because only one menu-item in the example has a dropdown button.

To Reproduce Steps to reproduce the behaviour:

1. Load up an instance of https://flowbite.com/blocks/marketing/header/#header-with-mega-menu
2. Add a second dropdown button to the menu, targeting a second mega-menu with a unique ID
3. Click the first, then the second dropdown buttons.
4. Both mega-menus will appear at the same time

Expected behavior A clear and concise description of what you expected to happen.

• When both dropdown buttons are clicked, the mega-menu should follow an accordion-like behaviour and close any currently open menus within data-accordion="collapse" or similarly attributed ancestor element.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 104.0.5112.102 (Official Build) (64-bit)

Additional context

• I think I can workaround this using the code for the accordion component, but thought it would be helpful to flag to save time when implementing in future.

[popouille]

Same here:

[zoltanszogyenyi]

Hey @MattJonesSiteglide,

That's an interesting use case I haven't thought about -- for some reason I assumed that there would only be one Mega Menu for a navigation bar, which isn't true since you can have more.

I'll think about this and how we can find a better solution for the v2.0 update.

[MattJonesSiteglide]

By the way, this came up again for us, and I realised I forgot to say- it can be solved with existing Flowbite accordion markup data-accordion-target instead of collapse. No need for JS code changes; only the example would need changing, should you wish to.

[pekka]

By the way, this came up again for us, and I realised I forgot to say- it can be solved with existing Flowbite accordion markup data-accordion-target instead of collapse. No need for JS code changes; only the example would need changing, should you wish to.

Could you expand on how this works? I'm in the same situation, still pretty new to Tailwind and Flowbite and unsure where to place this...

[pekka]

OK, got it!

If someone else runs into this problem:

The main <nav> element needs to have data-accordion="collapse"

And instead of the data-collapse-toggle property on the button element you want to use

data-accordion-target="#id-of-the-megamenu-element"

to trigger the mega menu showing or hiding.

[missatrox44]

@pekka Thanks for this awesome solution. My next question is, have you had any luck with the mobile version of the menu? Adding the accordion attributes seemed to break the out of box mobile menus for me. I eventually just created a new menu from scratch and manually added the logic to open/close/hide menus. Just curious if you found another way.