NavigationMenuTrigger does not have different group name from NavigationMenuList

[smanzler]

When making a group animation like

<NavigationMenuTrigger
  href="/projects"
>
  <Icon className="group-hover:text-brand" />
</NavigationMenuLink>

or

<NavigationMenuLink
  href="/projects"
  className={cn(navigationMenuTriggerStyle())}
>
  <Icon className="group-hover:text-brand" />
</NavigationMenuLink>

The hover is triggered from the entire list. The fix is to change the group name to something different (either change the NavigationMenuList group name or the NavigationMenuTrigger group). Either work but there is also a duplicate "group" class on the NavigationMenuTrigger that can be removed because the navigationMenuTriggerStyle function already has the "group" class.

const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+  "group/trigger inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
);

function NavigationMenuTrigger({
  className,
  children,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
  return (
    <NavigationMenuPrimitive.Trigger
      data-slot="navigation-menu-trigger"
-      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      className={cn(navigationMenuTriggerStyle(), className)}
      {...props}
    >
      {children}{" "}
      <ChevronDownIcon
        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
        aria-hidden="true"
      />
    </NavigationMenuPrimitive.Trigger>
  );
}

or

function NavigationMenuList({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
  return (
    <NavigationMenuPrimitive.List
      data-slot="navigation-menu-list"
      className={cn(
-        "group flex flex-1 list-none items-center justify-center gap-1",
+        "group/menu-list flex flex-1 list-none items-center justify-center gap-1",
        className
      )}
      {...props}
    />
  );
}

I can make the PR too... Haven't made one on shadcn-ui yet but would love to make my first!

[smanzler]

I have a branch in my fork for this btw