Navigation menu active item broken in vertical orientation

[patriktoth67]

Environment

• Operating System: Windows_NT
• Node Version: v22.17.0
• Nuxt Version: 4.2.1
• CLI Version: 3.30.0
• Nitro Version: 2.12.9
• Package Manager: npm@10.9.2
• Builder: -
• User Config: compatibilityDate, modules, devtools, css, vite
• Runtime Modules: @nuxt/ui@4.1.0
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.1.0

Reproduction

https://github.com/patriktoth67/Naviagtion-Menu-active-item-bug.git

Description

If we have arrays of items as the items prop for a Navigation Menu, with each item having it's own value, controlling the active item with v-model doesn't work in vertical orientation.

it works correctly horizontally, opens the correct popup below the correct menu item. however vertically it doesn't open the correct accordion item.

Additional context

No response

Logs

[benjamincanac]

This is not a bug, the v-model is intended to control the NavigationMenuContent that open on hover which doesn't exist in vertical orientation. You can use the default-value prop to control the Accordion in vertical orientation instead.

I've realized it was a mistake to make one component out for both orientations, if we make another major sometimes I might change this.

[patriktoth67]

Neither v-model nor default-value opens anything in vertical mode, nor at first load nor after changing it's value.

The only way to have an accordion item open other than manually opening it, is if we set it's open or defaultOpen values to true. But even in this case, it only works at the first load. If the items object we pass to the UNavigationMenu is computed and we update open or defaultOpen, nothing happens.

The only way to make it look as we are controlling the open state of the accordion is if I put a key on it and rerender every time.

[benjamincanac]

Should be fixed by cffaaaa.

[patriktoth67]

Sadly there's another issue now. I updated the reproduction repo to the newest version which included your commit: cffaaaa

Now, if I set default-value on it, at initial load, the correct item is open. However, when that value updates, nothing happens, the new item doesn't open and the original one stays open.

If I set model-value thought, the items open correctly, however in this case manually clicking on the items does not open them anymore.

The solution right now is to use default-value and key together and always re-render the menu.