Is it possible to manually manage the state of NavigationMenuTrigger?

[feryardiant]

Hi there,

I'm new to radix-vue, just messing around with it for couple days on my existing project. Came across an issue where I need to gain more control of the state of NavigationMenuTrigger. Precicely the data-state="closed" and aria-expanded="false" attributes, which is can only be changed via user interaction (either hover or click). Please correct me if i'm wrong 🙏🏼

Suppose I have a side-navigation and store the navigation state in localStorage activeKey and expandKeys. activeKey contains the menu key (id) that currently active, and expandKeys contains the array of string parent menu key (id). Let say my menu looks like these :

- Dashboard
- Menu One
  - Sub Menu One First
  - Sub Menu One Second
- Other Menu Link

When I click the Sub Menu One First link I'll store the key of Menu One to expandKeys and the key of Sub Menu One First in activeKey. So when I reload the page I could easily find which sub-menu to expand and wich sub-menu item to be active.

As far as my understanding of the documentation and the codebase, I can't see any clue to manually set data-state and aria-expanded value unless using ref but I'm not sure whether it will be overwrited by hover or click interaction to the menu trigger.

===

Update 23 May 24

Screen.Recording.2024-05-23.at.16.14.01.mov

For context, I'm having hard time figuuring out the way to implement vertical sidenav that will expanded when have it's submenu item activated.

Tried to use force-mount props on the NavigationMenuSub component, but their data-state is remain closed and aria-expanded is false.

Can anyone enlighten me 🙏🏼