[bug]: active prop not working on NavigationMenuLink V4

[lukasburns]

Describe the bug

When using a NavigationMenuLink with tailwind V4 with the active property, active style is not being properly applied

Affected component/components

NavigationMenu Tailwind V4

How to reproduce

1. Using the component <NavigationMenuLink active={item.active} asChild className={navigationMenuTriggerStyle()} >

2. Inspecting the HTML we see that data-active is present, but the style is not applied <a data-active aria-current="page" data-slot="navigation-menu-link" class="data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground [&amp;_svg:not([class*='text-'])]........">First Link</a>

3. The solution i found is changing data-[active=true] to data-[active] in the NavigationMenuLink className.

I think this is because the active property from Radix is set as data-active="" instead of data-active=true, so there is no match.

Codesandbox/StackBlitz link

No response

Logs

System Info

NA

Before submitting

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

[Jacksonmills]

I am testing this... I am not sure if data-[active] is ideal as it applies even when data-active={false}

Not sure what the best solution is yet

[Jacksonmills]

<NavigationMenuLink data-active={item.active} asChild className={navigationMenuTriggerStyle()}>

Maybe instead of using the active prop just control data-active in your implementation.

In the v4 examples it is done this way:

<NavigationMenuItem>
  <NavigationMenuLink asChild data-active={pathname === "/charts"}>
    <Link href="/charts">Charts</Link>
  </NavigationMenuLink>
</NavigationMenuItem>

[hunterpollpeter]

Radix's documentation specifies the NavigationMenu.Link's data-active attribute is present when active. When the active prop is false there is no data-active attribute. How could data-active ever be false?

[bsdayo]

I'm currently facing the same problem, change data-[active=true] to data-active fixed for me.

Hope to get an official fix soon.

[pedroara]

I'm currently doing that to be able to show the active state:

    <NavigationMenuLink
      href={href || path}
      className='cursor-pointer'
      target={href ? '_blank' : undefined}
      aria-current={isActive ? 'page' : undefined}
      onClick={handleClick}
    >
      {label}
    </NavigationMenuLink>