[bug]: NavigationMenu content does not show right undernith of a NavigationMenuItem

[kdipto1]

Describe the bug

NavigationMenu content does not show right undernith of a NavigationMenuItem. It just sticks to left side.

Screencast.from.2024-12-20.01-39-29.webm

Affected component/components

NavigationMenu

How to reproduce

This is the component:

"use client";

import * as React from "react";
import Link from "next/link";
import { cn } from "@/lib/utils";
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuList,
  NavigationMenuContent,
  NavigationMenuLink,
  NavigationMenuTrigger,
} from "@/components/shadcn-ui/navigation-menu";
import { usePathname } from "next/navigation";
import { Separator } from "@/components/shadcn-ui/separator";

interface Brand {
  brandId: string;
  categoryId: string;
  brand: {
    id: string;
    name: string;
  };
}

interface ProductSubcategory {
  id: string;
  name: string;
  categoryId?: string;
}

interface Category {
  id: string;
  name: string;
  productSubcategory: ProductSubcategory[];
  brands: Brand[];
}

export default function NavbarMenu({ categories }: { categories: Category[] }) {
  const router = usePathname();

  const shouldHide = router.includes("/dashboard");

  if (shouldHide) {
    return null;
  }

  return (
    <section className="hidden md:block w-full border-b bg-white/95 backdrop-blur relative z-50">
      <div className="flex min-h-14 items-center justify-center">
        <NavigationMenu className="max-w-screen-2xl">
          <NavigationMenuList className="flex flex-wrap gap-1">
            {categories?.map((category) => (
              <NavigationMenuItem key={category.id} className="">
                <NavigationMenuTrigger className="">
                  {category.name}
                </NavigationMenuTrigger>
                <NavigationMenuContent className="">
                  <div className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
                    <div className="row-span-3">
                      <NavigationMenuLink asChild>
                        <Link
                          className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
                          href={`/search?categoryId=${category.id}`}
                        >
                          <div className="mb-2 mt-4 text-lg font-medium">
                            {category.name}
                          </div>
                          <p className="text-sm leading-tight text-muted-foreground">
                            Explore all {category.name} products
                          </p>
                        </Link>
                      </NavigationMenuLink>
                    </div>
                    <SubcategoryList category={category} />
                  </div>
                </NavigationMenuContent>
              </NavigationMenuItem>
            ))}
          </NavigationMenuList>
        </NavigationMenu>
      </div>
      <Separator />
    </section>
  );
}

const SubcategoryList = ({ category }: { category: Category }) => {
  return (
    <div className="">
      <ul className="grid gap-3 p-2 md:w-[200px] md:grid-cols-1 lg:w-[300px] lg:grid-cols-2  ">
        {category.productSubcategory.map((subcategory) => (
          <Link
            key={subcategory.id}
            href={`/search?categoryId=${category.id}&subcategoryId=${subcategory.id}`}
          >
            <ListItem title={subcategory.name} />
          </Link>
        ))}
      </ul>
      {category.brands.length > 0 && (
        <ul className="grid gap-3 p-2 md:w-[200px] md:grid-cols-1 lg:w-[300px] lg:grid-cols-2">
          {category.brands.map((brandItem) => (
            <Link
              key={brandItem.brand.id}
              href={`/search?categoryId=${brandItem.categoryId}&brandId=${brandItem.brand.id}`}
            >
              <ListItem title={brandItem.brand.name} />
            </Link>
          ))}
        </ul>
      )}
    </div>
  );
};

const ListItem = React.forwardRef<
  React.ElementRef<"a">,
  React.ComponentPropsWithoutRef<"a">
>(({ className, title, children, ...props }, ref) => {
  return (
    <li>
      <NavigationMenuLink asChild>
        <span
          ref={ref}
          className={cn(
            "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
            className
          )}
          {...props}
        >
          <div className="text-sm font-medium leading-none">{title}</div>
          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
            {children}
          </p>
        </span>
      </NavigationMenuLink>
    </li>
  );
});
ListItem.displayName = "ListItem";

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Firefox, Chrome, Brave

Before submitting

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

[Harshit16g]

Actually The max-w-screen-2xl class on the NavigationMenu was constraining the width and affecting the natural positioning behavior of the menu components.
and
The NavigationMenuList (the container for menu items) didn't have proper centering - adding justify-center ensures the items are centered within the navigation bar rather than sticking to the left. here is the file with the fixed code .
issue.txt

[kdipto1]

Actually The max-w-screen-2xl class on the NavigationMenu was constraining the width and affecting the natural positioning behavior of the menu components. and The NavigationMenuList (the container for menu items) didn't have proper centering - adding justify-center ensures the items are centered within the navigation bar rather than sticking to the left. here is the file with the fixed code . issue.txt

I have checked with your code . Still not working. I think the issue is in this navigation-menu component of shadcn. Specifically in here they set left-0 but it should be dynamic.

const NavigationMenuViewport = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
>(({ className, ...props }, ref) => (
  <div className={cn("absolute left-0 top-full flex justify-center")}>
    <NavigationMenuPrimitive.Viewport
      className={cn(
        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
        className
      )}
      ref={ref}
      {...props}
    />
  </div>
));
NavigationMenuViewport.displayName =
  NavigationMenuPrimitive.Viewport.displayName;

[kdipto1]

@shadcn Could you please have a look at it?