diff --git a/packages/vue/src/components/navigation-menu/composables/use-navigation-menu.ts b/packages/vue/src/components/navigation-menu/composables/use-navigation-menu.ts
index 4251657..a9f29c6 100644
--- a/packages/vue/src/components/navigation-menu/composables/use-navigation-menu.ts
+++ b/packages/vue/src/components/navigation-menu/composables/use-navigation-menu.ts
@@ -21,17 +21,24 @@ export function useNavigationMenu(props: UseNavigationMenuProps = {}, emit?: Emi
   const env = useEnvironmentContext()
   const locale = useLocaleContext(DEFAULT_LOCALE)
 
-  const context = computed(() => ({
-    id,
-    dir: locale.value.dir,
-    value: props.modelValue ?? props.defaultValue ?? null,
-    getRootNode: env?.value.getRootNode,
-    onValueChange: (details: navigationMenu.ValueChangeDetails) => {
-      emit?.('valueChange', details)
-      emit?.('update:modelValue', details.value)
-    },
-    ...cleanProps(props),
-  }))
+  const context = computed(() => {
+    const controlled = props.modelValue !== undefined
+    const value = controlled ? props.modelValue : props.defaultValue
+
+    return {
+      ...cleanProps(props),
+      'id': props.id ?? id,
+      'dir': locale.value.dir,
+      'value': value ?? null,
+      'defaultValue': controlled ? props.modelValue ?? undefined : props.defaultValue,
+      'value.controlled': controlled,
+      'getRootNode': env?.value.getRootNode,
+      'onValueChange': (details: navigationMenu.ValueChangeDetails) => {
+        emit?.('valueChange', details)
+        emit?.('update:modelValue', details.value)
+      },
+    }
+  })
 
   const [state, send, machine] = useMachine(navigationMenu.machine(context.value), { context })
   const api = computed(() => navigationMenu.connect(state.value, send, normalizeProps))
diff --git a/packages/vue/src/components/navigation-menu/test/navigation-menu.test.ts b/packages/vue/src/components/navigation-menu/test/navigation-menu.test.ts
index d9948db..877ad58 100644
--- a/packages/vue/src/components/navigation-menu/test/navigation-menu.test.ts
+++ b/packages/vue/src/components/navigation-menu/test/navigation-menu.test.ts
@@ -50,12 +50,18 @@ describe('[navigation-menu] component', () => {
     })
   })
 
-  it('should support controlled value', async () => {
-    render(Basic, { props: { value: 'getting-started', openDelay: 0, closeDelay: 0 } })
+  it('should support controlled modelValue', async () => {
+    render(Basic, { props: { modelValue: 'components', openDelay: 0, closeDelay: 0 } })
 
     await vi.waitFor(async () => {
-      await expect.element(page.getByText('How to install dependencies and structure your app.')).toBeVisible()
+      await expect.element(page.getByText('A modal dialog that interrupts the user with important content.')).toBeVisible()
     })
+
+    const trigger = page.getByRole('button', { name: 'Getting started' })
+    await userEvent.click(trigger)
+
+    await expect.element(page.getByText('A modal dialog that interrupts the user with important content.')).toBeVisible()
+    await expect.element(page.getByText('How to install dependencies and structure your app.')).not.toBeVisible()
   })
 
   it('should support default value', async () => {