[NavigationMenu] How to force dropdown content to always be open?

[sfladager]

Bug report

Current Behavior

Goal: Force the content menu to be open on mobile navigation menu. Problem: Cannot force dropdown content menu to be open.

I am setting data-state='open on Trigger and Content does nothing. I am using ui.shadcn, so ideally I'd like to pass these values conditionally to the navigation-menu.tsx file from a higher level NavLink component. In the browser the css is set to 'open', but still the content menu only opens on hover.

Here is the radix code I am using where I am setting data-state='open'

`const NavigationMenuTrigger = React.forwardRef< React.ElementRef<typeof NavigationMenuPrimitive.Trigger>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>

(({ className, children, ...props }, ref) => ( <NavigationMenuPrimitive.Trigger data-state='open' ref={ref} className={cn(navigationMenuTriggerStyle(), 'group', className)} {...props}

{children}{' '}

</NavigationMenuPrimitive.Trigger> )) NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName`

`const NavigationMenuContent = React.forwardRef< React.ElementRef<typeof NavigationMenuPrimitive.Content>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>

(({ className, ...props }, ref) => ( <NavigationMenuPrimitive.Content data-state='open' ref={ref} className={cn( left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto , className )} {...props} /> )) NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName`

Expected behavior

Goal: Force the content menu to be open on mobile navigation menu.

Reproducible example

You can view the full code on github at these 2 links: navigation-menu.tsx NavLInks.tsx

Suggested solution

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)	"@radix-ui/react-navigation-menu": "^1.1.4",
React	"next": "14.0.3"
Browser
Assistive tech
Node	n/a
npm/yarn	yarn
Operating System

[benoitgrelard]

Can you create a sandbox with a demo of what you are trying to achieve?

[dhavalvoraa]

My understanding is that the Dropdown menu always closes when anything outside of the menu is selected. Is there any property that allows the menu to stay open until a "cancel" button is selected, so we can interact with the rest of the page before making our selection in the Dropdown menu?

[mbagatini]

I'm facing a similar problem. In my case, I want the menu content to stay open while the user navigates with the onboarding tool to get explanations about the menu options.

Any updates on this?

[TephrosisDEV]

I'm looking for same thing. A force-open & force-close option or something similar would be very useful.

[aminahbl]

I case it helps: https://github.com/radix-ui/primitives/issues/1630#issuecomment-2163924886 includes a demo link showing how to control the value of NavigationMenu per a previous comment in the thread:

<NavigationMenu.Root value={value} onValueChange={setValue}>