Support for nested Menus

[mrodrigues95]

Hi,

This is somewhat related to #152

Are there any plans for supporting nested menus? My current use case is that when you select a menu item I need to re-render the list of items in the menu and show them without closing it. This is pretty straight forward but the issue is the menu closes on the first click.

I'm aware I can handle the open state manually but then I need to deal with handling outside clicks, etc. which is already managed by Headless UI.

[RobinMalfait]

Hey! Thank you for your suggestion!
Much appreciated! 🙏

This is something we want to support, but I can't give you an ETA on this.
We will first focus on other components, but we will get back to this.

[benknight]

+1

[benknight]

I think this would be rather easy to implement manually if you just provided a way to open a menu programmatically. As of now it can only be opened by clicking on Menu.Button. Just provide an open prop on the Menu component, then we can just render another Menu inside Menu.Item and pass the active render prop to the Menu's open prop. Wouldn't that work?

[ShivamJoker]

any updates on this ?

[brianwachira]

It's mid 2022, also curious about the updates

[steven-wood]

^

[pkvov]

^

[vitorcamachoo]

Is there any way to do this?

[gmwill934]

Any update on this? I'm trying to implement a sidebar multi level menu? Are there any other alternatives?

[bonesoul]

I'm also looking for this.

[vixducis]

I think this is now possible since 1.7.4. In this version, a close method has been exposed on the Menu which can be used to manually close the menu. I put a quick example together in a stackblitz: https://stackblitz.com/edit/react-ts-iuxwoh

It's pretty crude, but you should get the idea.

[JasonPaff]

Good stuff @vixducis, I just have to get the keyboard handling working correctly and its exactly what I needed, thanks!

[bonesoul]

Can you show an example on the keyboard stuff?

[knownasilya]

Also stuck on keyboard, nesting a menu inside Menu.Item seems to break activating the Menu.Button with the keyboard (it just closes the main menu)

[ahmadaldabouqii]

?`

[techwithanirudh]

I put a quick example together in a stackblitz based on @vixducis's example: https://stackblitz.com/edit/react-ts-2gynxv?file=App.tsx

[zacktagnan]

@techwithanirudh ... In the absence of this multi-level functionality in the Menu component of this package, would it be possible to have a version of this React example adapted for Vue? Thanks.

[Zhengqbbb]

Nesting a Menu inside Menu.Item seems to break activating the Menu.Button with the keyboard (it closes the main menu that make a bad a11y !!!)

[PavelZhuravlev]

this feature would be awesome improvement for menu functionality!

[IRediTOTO]

I would love have one :D

[anthonyboutinov]

This is horrible! I spent hours, trying everything I could think of to hack it to work, but the keyboard navigation breaks if you nest menus—you cannot focus the trigger button using keyboard navigation if it sits inside a parent menu.

We just have to abandon healessui in our team… I loved it for the easy documentation but alas.😔

The examples from other people here are not of idiomatic submenus, they're primitive workarounds that break proper UX.

[spaceemotion]

We are using a mix of headlessUI + radix-vue for this reason. After a ton of tries, HUI wasn't able to produce any nested menus, modals, etc.

[knownasilya]

We rolled our own menus using floatingui, it was a lot of work.

[briavicenti]

@RobinMalfait Any chance we can get an update here? Looks like a lot of folks (myself included) are needing to move away from HeadlessUI because this feature is missing.

[arshad-yaseen]

Please +1

[Fabioni]

it's 5 years now ...

[y4qq]

+1

[Yukinosuke-Takada]

Here's the workaround for v2.X that I used for my project.

I discovered that Menu, Listbox etc works inside Popover. So I'm using Popover for the parent menu. So Simply instead of Menu>MenuButton+MenuItems>MenuItem>Menu, Popover>PopoverButton+PopoverPanel>Menu.

Here's some example: https://stackblitz.com/edit/react-ts-2mc6rkdl?file=App.tsx

I know this isn't the intended use and i might have broken some a11y (but visually & keyboard navigation seems to work fine).