Debugging the NavigationMenuContent Positioning and Placing Below NavigationMenuTrigger

[lsbyerley]

I am trying to figure out why the NavigationMenuContent element is not directly below the NavigationMenuTrigger element. It seems passing data-state="open" to both the content and the trigger will not programmatically keep the content open for debugging. By default, does the content element not appear directly below? Is using the "optional" viewport element and styling it's position the only way to make the content appear below it's trigger element?

Tried to make a stackblitz repro but it does't seem the dropdown triggers at all https://stackblitz.com/edit/stackblitz-starters-y6vhur?file=app%2FHeader.tsx

<header className='relative flex justify-center w-screen'>
  <NavigationMenu>
    <NavigationMenuList>

      <NavigationMenuItem>
        <Link href='/' legacyBehavior passHref>
          <NavigationMenuLink className={navigationMenuTriggerStyle()}>
            Nav Menu
          </NavigationMenuLink>
        </Link>
      </NavigationMenuItem>

      <NavigationMenuItem>
        <Link href='/' legacyBehavior passHref>
          <NavigationMenuLink className={navigationMenuTriggerStyle()}>
            Menu Item
          </NavigationMenuLink>
        </Link>
      </NavigationMenuItem>

      <NavigationMenuItem>
        <NavigationMenuTrigger>Admin</NavigationMenuTrigger>
        <NavigationMenuContent>
          <Link href='/itemone' legacyBehavior passHref>
            <NavigationMenuLink className={navigationMenuTriggerStyle()}>
              Content Item One
            </NavigationMenuLink>
          </Link>
          <Link href='/itemtwo' legacyBehavior passHref>
            <NavigationMenuLink className={navigationMenuTriggerStyle()}>
              Content Item Two
            </NavigationMenuLink>
          </Link>
        </NavigationMenuContent>
      </NavigationMenuItem>

      <NavigationMenuItem>
        <LogoutButton />
      </NavigationMenuItem>

    </NavigationMenuList>
  </NavigationMenu>
  <ModeToggle />
</header>

[TlmKira]

For the issue where the dropdown content isn't showing directly below the trigger, you might want to check out the solution in [this GitHub issue](#418). Here's a possible fix:

1. Try wrapping each DropdownMenuItem inside a NavigationMenu to force the dropdown to show up right under the trigger.

2. In the ui/navigation-menu.tsx file, you can adjust the dropdown’s position like this:

   <div 
     className={cn(
       "absolute left-1/2 top-full flex -translate-x-1/2 transform justify-center",
     )}
   >

   This will replace the original:

   <div className={cn("absolute left-0 top-full flex justify-center")}> //line 86

   This should make the dropdown show right under the trigger and centered.

After you make these changes, the dropdown should appear as expected. Here's an example of how it might look:

<div className="mt-4 flex items-center justify-center">
  <NavigationMenu>
    <NavigationMenuList>
      <NavigationMenuItem>
        <Link href="/" legacyBehavior passHref>
          <NavigationMenuLink className={navigationMenuTriggerStyle()}>
            Nav Menu
          </NavigationMenuLink>
        </Link>
      </NavigationMenuItem>

      <NavigationMenuItem>
        <Link href="/" legacyBehavior passHref>
          <NavigationMenuLink className={navigationMenuTriggerStyle()}>
            Menu Item
          </NavigationMenuLink>
        </Link>
      </NavigationMenuItem>

      <NavigationMenu>//change here!!!
        <NavigationMenuItem>
          <NavigationMenuTrigger>Admin</NavigationMenuTrigger>
          <NavigationMenuContent>
            <Link href="/itemone" legacyBehavior passHref>
              <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                Content Item One
              </NavigationMenuLink>
            </Link>
            <Link href="/itemtwo" legacyBehavior passHref>
              <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                Content Item Two
              </NavigationMenuLink>
            </Link>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenu>
      <NavigationMenuItem></NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
</div>

This should hopefully fix the issue!