Popover of NavigationMenu.Content is not centered under the trigger and appears far left

[bst2k]

Describe the bug

When hovering over a NavigationMenu.Trigger, the corresponding NavigationMenu.Content popover appears all the way to the left of the container instead of directly under the trigger, making its links unreachable.

Expected Behavior:
The popover should open directly beneath “Item One”, either left-aligned (left-0 top-full mt-2) or centered under the trigger (left-1/2 -translate-x-1/2 top-full mt-2), as shown in the official documentation.

Actual Behavior:
The popover appears at the left edge of its parent container (or viewport), not under the trigger, preventing any interaction with its contents.

Reproduction

1. Create a SvelteKit 5 project with shadcn-svelte’s NavigationMenu.

2. Implement a simple navbar:

   <NavigationMenu.Root>
   <NavigationMenu.List>
   <NavigationMenu.Item>
   <NavigationMenu.Trigger>Item One</NavigationMenu.Trigger>
   <NavigationMenu.Content>
   <NavigationMenu.Link>Link</NavigationMenu.Link>
   </NavigationMenu.Content>
   </NavigationMenu.Item>
   </NavigationMenu.List>
   </NavigationMenu.Root>

and repeat it x times.

3. Open the app in a desktop browser.
4. Hover over the last “Item One”.

Logs

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 AMD Ryzen 7 5700G with Radeon Graphics
    Memory: 6.28 GB / 31.89 GB
  Binaries:
    Node: 20.19.0 - C:\nvm4w\nodejs\node.EXE
    npm: 10.8.2 - C:\nvm4w\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (132.0.2957.140)   
    Internet Explorer: 11.0.19041.5794
  npmPackages:
    @sveltejs/kit: ^2.16.0 => 2.21.2 
    bits-ui: ^2.4.1 => 2.4.1 
    lucide-svelte: ^0.513.0 => 0.513.0 
    svelte: ^5.0.0 => 5.33.17 
    tailwindcss: ^4.0.0 => 4.1.8 
    vaul-svelte: ^1.0.0-next.7 => 1.0.0-next.7

Severity

annoyance

[TimTruston]

I also have the same issue and whats more annoying is that I cannot even debug the NavigationMenu.Content popover since the trigger is hovering and whenever I move the cursor to the devtools the menu disappears immediately.

@huntabyte Can you optionally make the trigger by clicking instead of hovering?

Apple M2 Pro
Google Chrome
Version 139.0.7258.128 (Official Build) (arm64)

[TimTruston]

Checkout https://github.com/TimTruston/sveltekit-template for reference

[TimTruston]

Just learn't that the issue happens when you leave out viewport={false} from NavigationMenu.Root. You can run this fresh install to test https://github.com/TimTruston/sveltekit-template.