Next.js Discord

Discord Forum

ShadCN NavigationMenu how to make content stay open while styling?

Answered
Chum salmon posted this in #help-forum
Open in Discord
Chum salmonOP
How do I make the shadcn ui NavigationMenuContent stay open so I can style the damn thing without losing my mind? Ideally in the browser's inspector/react devtools. I can't seem to find anything in the documentation. https://ui.shadcn.com/docs/components/navigation-menu.
Answered by B33fb0n3
add to this item: value={...} and then the item value of the item that should be always open
View full answer

5 Replies

@B33fb0n3 give it's value prop the value open. As the value does not change during styling, the menu will stay open and you can style that damn thing however you like
Chum salmonOP
Thanks for the response; but where exactly? I added value="open" in React Devtools and to code itself in various spots without any luck.
@Chum salmon Thanks for the response; but where exactly? I added value="open" in React Devtools and to code itself in various spots without any luck.
add to this item: value={...} and then the item value of the item that should be always open
Answer
Chum salmonOP
Thanks! For future reference you can get that value string using React DevTools from NavigationMenuItemProvider. In my case, it was ""radix-:R6dilt7:". Adding that string to a new "value" prop on NavigationMenu worked like a charm.
happy to help