Bug reportOct 21, 2026· 0:49· 0 views
nuxt/ui v4.12.0: vertical NavigationMenu with v-model — expanding a nested item collapses its parent
0:49 total
Comments · 0
Be the first to comment.
Bug reportby SceneRecap AI
mediumUNavigationMenu vertical orientation: v-model handling for nested accordion or collapsible items. Expanding a child level appears to replace the model value instead of adding to it, which drops the ancestor's open state.
os: macOSapp: Nuxt UI Playgrounddpr: 1locale: en-USbrowser: Chromium 151.0.7922.34library: nuxt/ui v4.12.0 (per report title)timezone: Europe/Berlinviewport: 1280x720
Repro steps
- 1.Open the Nuxt UI Playground with an App.vue that renders UNavigationMenu with v-model="open", orientation="vertical", value-key="label" and open = ref(['Parent']). Items are 'Parent' with children 'Page' and 'Nested', and 'Nested' has a child 'Child'.
- 2.Confirm the initial state: 'Parent' is expanded and shows 'Page' and 'Nested'. The v-model readout shows ["Parent"].
- 3.Click the 'Nested' button inside the expanded 'Parent'.
Expected
'Nested' expands to show 'Child'. 'Parent' stays expanded. The v-model contains both 'Parent' and 'Nested'.
Actual
'Parent' collapses and its children 'Page' and 'Nested' are hidden. 'Child' is never shown. The v-model readout changes from ["Parent"] to ["Nested"], so the parent value is removed from the model. The state stays this way until the end of the recording.
Evidence
visualInitial state is correct. 'Parent' is expanded with 'Page' and 'Nested' visible. The v-model readout shows ["Parent"].
visualThe 'Nested' item is highlighted under the cursor at the moment of the click. 'Parent' is still expanded and v-model is ["Parent"].
visualAfter the click, 'Parent' is collapsed with a down chevron. 'Page' and 'Nested' are hidden. The v-model readout shows ["Nested"].
visualCollapsed 'Parent' and v-model ["Nested"] persist with no further interaction.
consoleWarning: an iframe has both allow-scripts and allow-same-origin in its sandbox attribute. This is a playground sandbox warning and is likely unrelated.
Issue markdown (copy-paste ready)
## Bug: vertical NavigationMenu with v-model collapses the parent when a nested item is expanded
**Version:** nuxt/ui v4.12.0 (per report title)
**Environment:** Nuxt UI Playground, Chromium 151.0.7922.34, macOS, 1280x720, dpr 1
### Reproduction
```vue
<script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from '@nuxt/ui'
const open = ref(['Parent'])
const items: NavigationMenuItem[] = [{
label: 'Parent',
children: [
{ label: 'Page' },
{ label: 'Nested', children: [{ label: 'Child' }] }
]
}]
</script>
<template>
<div class="p-4 w-64">
<UNavigationMenu v-model="open" :items="items" orientation="vertical" value-key="label" />
<pre>v-model: {{ open }}</pre>
</div>
</template>
```
### Steps
1. Load the playground. 'Parent' is expanded and v-model is `["Parent"]` (3.0s).
2. Click the 'Nested' button under 'Parent' (8.9s).
### Expected
'Nested' expands to show 'Child'. 'Parent' stays expanded. v-model contains both `"Parent"` and `"Nested"`.
### Actual
'Parent' collapses and hides 'Page' and 'Nested' (first seen at 11.0s). 'Child' is never shown. v-model changes from `["Parent"]` to `["Nested"]`. The state persists through 39.0s.
### Evidence
- 3.0s: 'Parent' expanded, v-model `["Parent"]`.
- 8.9s: click on 'Nested'. 'Parent' is still expanded.
- 11.0s: 'Parent' collapsed, v-model `["Nested"]`.
- 0.1s: console warning about iframe sandbox with allow-scripts and allow-same-origin. Likely unrelated.
### Suggested area
UNavigationMenu vertical mode: v-model handling for nested collapsible items. The child value seems to replace the model instead of being added to it, so the ancestor's open state is dropped.
*Recorded with SceneRecap.*Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →