[Bug]: NavigationMenuContent not showing when triggered on a submenu

[blesildaramirez]

Environment

Development/Production OS: Windows 11
Node version: 18.20.3
Package manager: [email protected]
Radix Vue version: 1.9.6 (also happens on [email protected])
Vue version: 3.5.13
CSS framework: [email protected]
Client OS: Windows 11
Browser: Chrome 131.0.6778.108

Link to minimal reproduction

https://stackblitz.com/edit/gnfmurzy?file=src%2FApp.vue

Steps to reproduce

1. Set up a NavigationMenu component with nested items.
2. Create at least two levels of submenu items.
3. Trigger the second-level submenu item.

Describe the bug

When the NavigationMenu contains nested items, the submenu items of a submenu item are not shown. This makes it impossible to navigate deeper into the menu structure.

Expected behavior

When a submenu item is triggered, its nested submenu items should appear.

Context & Screenshots (if applicable)

No response

[zernonia]

Thanks for the issue @blesildaramirez ! I think this case is only happening when use together with NavigationMenuViewport component, which might be tricky to render sub item.

Does dropping NavigationMenuViewport resolves the issue you are facing? 😁

[blesildaramirez]

Hi @zernonia , I'm actually not using the NavigationMenuViewport in the sample codes, it was only imported in the codes but not rendered in the template.

I've updated the sample app where this issue could be reproduced (I just removed the NavigationMenuViewport from the imports): https://stackblitz.com/edit/gnfmurzy?file=src%2FApp.vue . The codes here came from the example codes from Reka UI - navigation-menu#with-submenus