[bug]: NavigationMenuContent is using a single reusable <div> instead of generating a separate one for each NavigationMenuItem

[ardiansyaherwin]

Describe the bug

"@radix-ui/react-navigation-menu": "^1.2.14",

I just installed the component and tried implementing the example code from the documentation. However, all the submenus are rendering within the same

for NavigationMenuContent, whereas the documentation shows that each NavigationMenuItem should have its own NavigationMenuContent.

Affected component/components

NavigationMenu

How to reproduce

1. install with pnpm dlx shadcn@latest add navigation-menu
2. copy and pasted the example from https://ui.shadcn.com/docs/components/navigation-menu
3. pnpm run dev

Codesandbox/StackBlitz link

No response

Logs

System Info

Arc on MacOS

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[HyeongSeoku]

This doesn’t seem to be a bug but the intended behavior of Radix NavigationMenu.
All NavigationMenuContent components render into a single shared

in the Viewport, and the active content is swapped.

It might be good to clarify this in the docs so developers don’t expect a separate

for each item.

[erwin-gapai]

I wouldn't consider this a bug if the behavior matches what I observed in the Shadcn UI example on their official website.
My current workaround is to have each NavigationMenu for each menu item.

[grctest]

I'm also experiencing this issue - the example shows a navigationmenucontent component below each button, but when you use the example it reuses the one component under the first navigation item.

[jarovermeulen-bekaert]

I think you need to set data-viewport to false

<NavigationMenu viewport={false}>

[grctest]

Setting viewport={false} didn't change the outcome.

[goldcaddy77]

@grctest it looks like the fix is in shadcn v4 (not released yet). Copy the component from here:

https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/new-york-v4/ui/navigation-menu.tsx#L4