NavgiationMenu gets wrapped in a primitive div at runtime that I cannot styled (forces centered content)

[imprisonedmind]

Following is my setup in attempt to w-full and justify-between my NavigationMenu

What I am trying to do is make the menu the full width of the DOM and have 3 content items evenly spread across.

<NavigationMenu
      className={` ${
        scrolled &&
        "border-b-neutral-10 border-b border-neutral-200 shadow-lg shadow-neutral-500/5"
      } sticky top-0 z-50 mx-auto flex bg-neutral-50 p-4 px-2 duration-150 ease-in-out md:px-4`}
    >
      <NavigationMenuList>
        <Logo />

        <NavbarLinkList />

        <CtaButton
          title={"Contact us"}
          callback={() => handleClick()}
          style={"hidden md:flex p-2 px-4 !rounded-lg hover:!rounded-xl"}
        />
      </NavigationMenuList>
    </NavigationMenu>

Some modifications to NavigationMenu & List (nothing major, just styling)

const NavigationMenu = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Root
    ref={ref}
    className={cn(
      "relative z-10 flex w-full items-center justify-center",
      className,
    )}
    {...props}
  >
    {children}
    <NavigationMenuViewport />
  </NavigationMenuPrimitive.Root>
));
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;

const NavigationMenuList = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.List
    ref={ref}
    className={cn(
      "group flex w-full list-none items-center justify-between space-x-1",
      className,
    )}
    {...props}
  />
));
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;

The following is what I end up with at runtime:

My NavigationList gets wrapped in a primitive div that forces content to be w-fit.

<nav> ## NavigationMenu
  <div> ## unexpected 
    <ul> ## NavigationMenuList
        ...rest of navigation-menu-list
    </ul>
  </>
</nav>

If I pull the ul (NavigationMenuList) out of the primitive div I get what I expect

Why am I getting this unexpected div and how to style it?

If anyone has any ideas as to where this div is coming from (I assume radix) and how I can style it to w-full, please let me know.

Reproduced Link:

https://stackblitz.com/edit/stackblitz-starters-6pz3ey?file=components%2Fnavbar%2Fnavbar.tsx

My current workaround:

Currently, in order to work around this, I am using globals to select the injected div and force it to w-full.
I would really prefer to understand what is happening in the context above and not have to use this workaround.

/* FIX FOR NAV MENU */
body > nav > div:nth-child(1) {
    @apply w-full
}

[shadcn]

@imprisonedmind To achieve this layout, I'd keep the <NavigationMenu /> for the main nav only and move the logo and cta to a shared <header /> parent.

Using this structure, the width of the <NavigationMenu /> will be constrained to its children only.

<header
  className={` ${
    scrolled &&
    'border-b-neutral-10 border-b border-neutral-200 shadow-lg shadow-neutral-500/5'
  } sticky top-0 z-50 mx-auto flex bg-neutral-50 p-4 px-2 duration-150 ease-in-out md:px-4`}
>
  <Logo />
  <div className="flex-1 bg-green-100 flex justify-center">
    <NavigationMenu className="bg-red-100 w-auto">
      <NavigationMenuList>
        <NavbarLinkList />
      </NavigationMenuList>
    </NavigationMenu>
  </div>
  <CtaButton callback={() => console.log('pressed')} title={'Contact us'} />
</header>

I added bg-green-100 and bg-red-100 so that you can see the menu and its container.

Link: https://stackblitz.com/edit/stackblitz-starters-sxzjsp?file=components%2Fnavbar%2Fnavbar.tsx,components%2FctaButton.tsx,components%2Fnavbar%2FnavbarLinkList.tsx

OpiUfCVk.mp4

[imprisonedmind]

@shadcn ahh!! I understand.
Thank you for this, much appreciated ♥️