Show a popover menu on hover in `UNavigationMenu` when collapsed, for items with submenus

[maximepvrt]

Description

The UNavigationMenu component in collapsed mode provides a space-efficient navigation experience.

However, when a navigation item has submenus, the current behavior on click is to add the submenu items with a new list of icons at the same level. This can be confusing, as it’s not immediately clear that a submenu was opened, it looks like a flat continuation of the main menu.

Partage.d.ecran.-.2025-05-19.17.h.27.min.47.s.mp4

👉 A potential improvement would be to show a popover menu on hover (like Stripe does) when an item with children is hovered in collapsed mode.

Additional context

No response

[benjamincanac]

This could have been the default behavior for the NavigationMenu actually, it would match the horizontal orientation.

[maximepvrt]

I also think that’s indeed the case.

[bananacity]

This could have been the default behavior for the NavigationMenu actually, it would match the horizontal orientation.

Hi, my bad for replying here but I attached a reproduction here #4159 https://stackblitz.com/edit/github-5hg8bg44?file=app%2Fpages%2Findex.vue do you know if there is any way to have the bottom navbar in this example appear in front of the Udrawer component? I tried a bunch of different z-indexes and things but couldn't get it to do that?

[maximepvrt]

@bananacity This doesn't relate to this issue.

[benjamincanac]

@maximepvrt I think I'm gonna revert 2be60cd and go back to the old behavior where children are hidden when collapsed to implement this instead. I'm wondering if the collapsible field is also needed 🤔

[maximepvrt]

@benjamincanac Yes, I agree. Otherwise, we'd definitely need a specific design like in #3353 to clearly show that these are sub-elements.

I also saw an interesting approach on gitlab: even when the menu isn’t expanded, the submenu is still accessible via a popover. Here's a quick video showing the behavior:

Partage.d.ecran.-.2025-05-20.12.h.05.min.12.s.mp4

[benjamincanac]

@maximepvrt This is getting really complicated already, this component is a nightmare so let's make it only when collapsed for now 😅

If you want to follow my thought process (and maybe if you have feedback), here's what I did before implementing this (in order):

• 3c78e2f
• 1e2a10b

[maximepvrt]

@benjamincanac Haha yeah, I figured 😅 I just thought it was cool to share that little discovery 😉 Great work 💪