From 2778f57aa3880cd24f42f268fd3c96d221bbec5b Mon Sep 17 00:00:00 2001
From: khairulhaaziq <rhycoz@yahoo.com>
Date: Tue, 11 Jul 2023 14:51:55 +0800
Subject: [PATCH 01/17] init

---
 .../NavigationMenu/NavigationMenuArrow.vue    |   7 +
 .../NavigationMenuCheckboxItem.vue            | 103 +++++++++++
 .../NavigationMenu/NavigationMenuContent.vue  | 125 +++++++++++++
 .../NavigationMenu/NavigationMenuGroup.vue    |  73 ++++++++
 .../src/NavigationMenu/NavigationMenuItem.vue |  75 ++++++++
 .../NavigationMenuItemIndicator.vue           |  19 ++
 .../NavigationMenu/NavigationMenuLabel.vue    |  16 ++
 .../src/NavigationMenu/NavigationMenuMenu.vue |  56 ++++++
 .../NavigationMenu/NavigationMenuPortal.vue   |  14 ++
 .../NavigationMenuRadioGroup.vue              |  55 ++++++
 .../NavigationMenuRadioItem.vue               |  89 ++++++++++
 .../src/NavigationMenu/NavigationMenuRoot.vue |  98 +++++++++++
 .../NavigationMenuSeparator.vue               |  21 +++
 .../src/NavigationMenu/NavigationMenuSub.vue  |  75 ++++++++
 .../NavigationMenuSubContent.vue              | 116 ++++++++++++
 .../NavigationMenuSubTrigger.vue              | 112 ++++++++++++
 .../NavigationMenu/NavigationMenuTrigger.vue  | 165 +++++++++++++++++
 .../radix-vue/src/NavigationMenu/index.ts     |  19 ++
 .../radix-vue/src/NavigationMenu/utils.ts     |   8 +
 packages/radix-vue/src/index.ts               |  19 ++
 playground/vue3/src/App.vue                   |   4 +
 .../components/Demo/NavigationMenuDemo.vue    | 166 ++++++++++++++++++
 .../Demo/NavigationMenuListItem.vue           |  25 +++
 23 files changed, 1460 insertions(+)
 create mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuArrow.vue
 create mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuCheckboxItem.vue
 create mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
 create mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuGroup.vue
 create mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
 create mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuItemIndicator.vue
 create mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuLabel.vue
 create mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuMenu.vue
 create mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuPortal.vue
 create mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuRadioGroup.vue
 create mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuRadioItem.vue
 create mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuRoot.vue
 create mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuSeparator.vue
 create mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuSub.vue
 create mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuSubContent.vue
 create mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuSubTrigger.vue
 create mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue
 create mode 100644 packages/radix-vue/src/NavigationMenu/index.ts
 create mode 100644 packages/radix-vue/src/NavigationMenu/utils.ts
 create mode 100644 playground/vue3/src/components/Demo/NavigationMenuDemo.vue
 create mode 100644 playground/vue3/src/components/Demo/NavigationMenuListItem.vue

diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuArrow.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuArrow.vue
new file mode 100644
index 000000000..6d13bc339
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuArrow.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { PopperArrow } from "@/Popper";
+</script>
+
+<template>
+  <PopperArrow></PopperArrow>
+</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuCheckboxItem.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuCheckboxItem.vue
new file mode 100644
index 000000000..16ef5f4a8
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuCheckboxItem.vue
@@ -0,0 +1,103 @@
+<script lang="ts">
+import { useVModel } from "@vueuse/core";
+
+interface NavigationMenuCheckboxItemProps {
+  asChild?: boolean;
+  checked?: boolean;
+  //onCheckedChange?: void;
+  modelValue?: boolean;
+  id?: string;
+  name?: string;
+  value?: string;
+  disabled?: boolean;
+  onSelect?: void;
+  textValue?: string;
+}
+</script>
+
+<script setup lang="ts">
+import { inject, computed, provide } from "vue";
+import BaseMenuItem from "../shared/component/BaseMenuItem.vue";
+import { useArrowNavigation } from "@/shared/useArrowNavigation";
+import { NAVIGATION_MENU_ITEM_SYMBOL } from "./utils";
+import {
+  NAVIGATION_MENU_INJECTION_KEY,
+  type NavigationMenuProvideValue,
+} from "./NavigationMenuRoot.vue";
+
+const injectedValue = inject<NavigationMenuProvideValue>(
+  NAVIGATION_MENU_INJECTION_KEY
+);
+
+const props = defineProps<NavigationMenuCheckboxItemProps>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+}>();
+
+const modelValue = useVModel(props, "modelValue", emit, {
+  passive: true,
+});
+
+const checkboxDataState = computed(() => {
+  return modelValue.value ? "checked" : "unchecked";
+});
+
+function handleClick() {
+  modelValue.value = !modelValue.value;
+}
+
+provide(NAVIGATION_MENU_ITEM_SYMBOL, {
+  modelValue,
+});
+
+function handleHorizontalKeydown(e: KeyboardEvent) {
+  const newSelectedElement = useArrowNavigation(
+    e,
+    injectedValue?.triggerElement.value as HTMLElement,
+    undefined,
+    {
+      arrowKeyOptions: "horizontal",
+      itemsArray: injectedValue?.triggerItemsArray,
+    }
+  );
+  if (newSelectedElement) {
+    injectedValue?.changeSelected(newSelectedElement);
+    injectedValue?.changeValue(newSelectedElement.id);
+  }
+}
+
+function handleEscapeKeydown(e: KeyboardEvent) {
+  injectedValue!.changeValue(undefined);
+  injectedValue!.changeSelected(
+    injectedValue!.triggerElement.value as HTMLElement
+  );
+}
+</script>
+
+<template>
+  <BaseMenuItem
+    ref="currentElement"
+    :disabled="props.disabled"
+    :rootProvider="injectedValue"
+    :orientation="injectedValue?.orientation"
+    @handle-click="handleClick"
+    @horizontal-keydown="handleHorizontalKeydown"
+    @escape-keydown="handleEscapeKeydown"
+    role="menuitemcheckbox"
+    :data-state="checkboxDataState"
+    :aria-checked="props.modelValue ? true : false"
+  >
+    <input
+      type="checkbox"
+      :id="props.id"
+      v-bind="props.modelValue"
+      :checked="props.modelValue"
+      :name="props.name"
+      aria-hidden="true"
+      :disabled="props.disabled"
+      style="opacity: 0; position: absolute; inset: 0"
+    />
+    <slot />
+  </BaseMenuItem>
+</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
new file mode 100644
index 000000000..b17f790fb
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
@@ -0,0 +1,125 @@
+<script lang="ts">
+export type Boundary = Element | null | Array<Element | null>;
+
+export interface NavigationMenuContentProps extends PopperContentProps {
+  asChild?: boolean;
+  loop?: boolean; //false
+  //onOpenAutoFocus?: void;
+  //onCloseAutoFocus?: void;
+  //onEscapeKeyDown?: void;
+  //onPointerDownOutside?: void;
+  //onInteractOutside?: void;
+}
+</script>
+
+<script setup lang="ts">
+import { inject, watchEffect, watch, computed } from "vue";
+import { PrimitiveDiv, usePrimitiveElement } from "@/Primitive";
+import {
+  NAVIGATION_MENU_INJECTION_KEY,
+  type NavigationMenuProvideValue,
+} from "./NavigationMenuRoot.vue";
+import {
+  NAVIGATION_MENU_MENU_INJECTION_KEY,
+  type NavigationMenuMenuProvideValue,
+} from "./NavigationMenuMenu.vue";
+import { PopperContent, type PopperContentProps } from "@/Popper";
+import { useCollection } from "@/shared";
+import { onClickOutside } from "@vueuse/core";
+
+const rootInjectedValue = inject<NavigationMenuProvideValue>(
+  NAVIGATION_MENU_INJECTION_KEY
+);
+
+const injectedValue = inject<NavigationMenuMenuProvideValue>(
+  NAVIGATION_MENU_MENU_INJECTION_KEY
+);
+
+const props = withDefaults(defineProps<NavigationMenuContentProps>(), {
+  side: "bottom",
+  align: "start",
+  orientation: "horizontal",
+  avoidCollisions: true,
+});
+
+const { primitiveElement, currentElement: tooltipContentElement } =
+  usePrimitiveElement();
+
+const { createCollection } = useCollection();
+createCollection(tooltipContentElement);
+
+watchEffect(() => {
+  if (tooltipContentElement.value) {
+    if (injectedValue?.isOpen.value) {
+      fillItemsArray();
+    }
+  }
+});
+
+watch(
+  () => rootInjectedValue?.selectedElement.value,
+  (n) => {
+    if (!injectedValue?.isOpen.value) return;
+    const siblingsElement = Array.from(
+      n
+        ?.closest('[role="tooltip"]')
+        ?.querySelectorAll(
+          "[data-radix-vue-collection-item]:not([data-disabled])"
+        ) ?? []
+    ) as HTMLElement[];
+
+    if (!siblingsElement?.length) return;
+    if (
+      siblingsElement.includes(
+        injectedValue!.triggerElement.value as HTMLElement
+      )
+    ) {
+      if (
+        rootInjectedValue?.selectedElement.value !==
+        injectedValue?.triggerElement.value
+      ) {
+        rootInjectedValue?.changeValue(undefined);
+      }
+    }
+  }
+);
+
+function fillItemsArray() {
+  const allToggleItem = Array.from(
+    tooltipContentElement.value!.querySelectorAll(
+      "[data-radix-vue-collection-item]:not([data-disabled])"
+    )
+  ) as HTMLElement[];
+  injectedValue!.itemsArray = allToggleItem;
+  return allToggleItem;
+}
+
+onClickOutside(tooltipContentElement, (event) => {
+  const target = event.target as HTMLElement;
+  if (target.closest('[role="menuitem"]')) return;
+  rootInjectedValue?.changeValue(undefined);
+  rootInjectedValue!.selectedElement.value = undefined;
+});
+
+const dataState = computed(() => {
+  return injectedValue?.isOpen ? "open" : "false";
+});
+</script>
+
+<template>
+  <PopperContent v-bind="props" v-if="injectedValue?.isOpen.value">
+    <PrimitiveDiv
+      ref="primitiveElement"
+      :data-state="dataState"
+      :data-side="props.side"
+      :data-align="props.align"
+      :aria-labelledby="injectedValue?.triggerId"
+      :data-orientation="injectedValue?.orientation"
+      role="tooltip"
+      :asChild="props.asChild"
+      style="pointer-events: auto"
+    >
+      <slot />
+    </PrimitiveDiv>
+  </PopperContent>
+</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuGroup.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuGroup.vue
new file mode 100644
index 000000000..296cb25ba
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuGroup.vue
@@ -0,0 +1,73 @@
+<script lang="ts">
+import type { Ref, InjectionKey } from "vue";
+import type { DataOrientation, Direction } from "../shared/types";
+
+type TypeEnum = "single" | "multiple";
+
+export interface NavigationMenuGroupProps {
+  type?: TypeEnum;
+  value?: string;
+  defaultValue?: string;
+  disabled?: boolean;
+  rovingFocus?: boolean;
+  orientation?: DataOrientation;
+  dir?: Direction;
+  loop?: boolean;
+  modelValue?: string | string[];
+}
+
+export const NAVIGATION_MENU_GROUP_INJECTION_KEY =
+  Symbol() as InjectionKey<NavigationMenuGroupProvideValue>;
+
+export interface NavigationMenuGroupProvideValue {
+  type: TypeEnum;
+  modelValue?: Readonly<Ref<string | string[] | undefined>>;
+  changeModelValue: (value: string) => void;
+  parentElement: Ref<HTMLElement | undefined>;
+}
+</script>
+
+<script setup lang="ts">
+import { toRef, provide } from "vue";
+import { PrimitiveDiv, usePrimitiveElement } from "@/Primitive";
+
+const props = withDefaults(defineProps<NavigationMenuGroupProps>(), {
+  type: "single",
+});
+
+const emits = defineEmits(["update:modelValue"]);
+
+const { primitiveElement, currentElement: parentElement } =
+  usePrimitiveElement();
+
+provide<NavigationMenuGroupProvideValue>(NAVIGATION_MENU_GROUP_INJECTION_KEY, {
+  type: props.type,
+  modelValue: toRef(() => props.modelValue),
+  changeModelValue: (value: string) => {
+    if (props.type === "single") {
+      emits("update:modelValue", value);
+    } else {
+      let modelValueArray = props.modelValue as string[];
+      if (modelValueArray.includes(value)) {
+        let index = modelValueArray.findIndex((i) => i === value);
+        modelValueArray.splice(index, 1);
+      } else {
+        modelValueArray.push(value);
+      }
+      emits("update:modelValue", modelValueArray);
+    }
+  },
+  parentElement,
+});
+</script>
+
+<template>
+  <PrimitiveDiv
+    ref="primitiveElement"
+    role="group"
+    :dir="props.dir"
+    aria-label="Text alignment"
+  >
+    <slot />
+  </PrimitiveDiv>
+</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
new file mode 100644
index 000000000..534af6b6c
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { inject } from "vue";
+import BaseMenuItem from "../shared/component/BaseMenuItem.vue";
+import { useArrowNavigation } from "@/shared/useArrowNavigation";
+import {
+  NAVIGATION_MENU_INJECTION_KEY,
+  type NavigationMenuProvideValue,
+} from "./NavigationMenuRoot.vue";
+import {
+  NAVIGATION_MENU_SUB_INJECTION_KEY,
+  type NavigationMenuSubProvideValue,
+} from "./NavigationMenuSub.vue";
+
+interface NavigationMenuItemProps {
+  asChild?: boolean;
+  value?: string;
+  disabled?: boolean;
+  //onSelect?: void;
+  textValue?: string;
+}
+
+const rootInjectedValue = inject<NavigationMenuProvideValue>(
+  NAVIGATION_MENU_INJECTION_KEY
+);
+
+const subInjectedValue = inject<NavigationMenuSubProvideValue>(
+  NAVIGATION_MENU_SUB_INJECTION_KEY
+);
+
+const props = defineProps<NavigationMenuItemProps>();
+
+function handleClick() {
+  rootInjectedValue!.changeValue(undefined);
+  rootInjectedValue!.changeSelected(
+    rootInjectedValue!.triggerElement.value as HTMLElement
+  );
+}
+
+function handleHorizontalKeydown(e: KeyboardEvent) {
+  const newSelectedElement = useArrowNavigation(
+    e,
+    rootInjectedValue?.triggerElement.value as HTMLElement,
+    undefined,
+    {
+      arrowKeyOptions: "horizontal",
+      itemsArray: rootInjectedValue?.triggerItemsArray,
+    }
+  );
+  if (newSelectedElement) {
+    rootInjectedValue?.changeSelected(newSelectedElement);
+    rootInjectedValue?.changeValue(newSelectedElement.id);
+  }
+}
+
+function handleEscapeKeydown(e: KeyboardEvent) {
+  rootInjectedValue!.changeValue(undefined);
+  rootInjectedValue!.changeSelected(
+    rootInjectedValue!.triggerElement.value as HTMLElement
+  );
+}
+</script>
+
+<template>
+  <BaseMenuItem
+    :disabled="props.disabled"
+    :rootProvider="rootInjectedValue"
+    :subProvider="subInjectedValue"
+    :orientation="rootInjectedValue?.orientation"
+    @handle-click="handleClick"
+    @horizontal-keydown="handleHorizontalKeydown"
+    @escape-keydown="handleEscapeKeydown"
+  >
+    <slot />
+  </BaseMenuItem>
+</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuItemIndicator.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuItemIndicator.vue
new file mode 100644
index 000000000..2077b040c
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuItemIndicator.vue
@@ -0,0 +1,19 @@
+<script lang="ts">
+export interface NavigationMenuItemIndicatorProps {
+  asChild?: boolean;
+  forceMount?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { inject } from "vue";
+import { PrimitiveSpan } from "@/Primitive";
+import { NAVIGATION_MENU_ITEM_SYMBOL } from "./utils";
+const context = inject(NAVIGATION_MENU_ITEM_SYMBOL);
+</script>
+
+<template>
+  <PrimitiveSpan v-if="context?.modelValue.value" style="pointer-events: none">
+    <slot />
+  </PrimitiveSpan>
+</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuLabel.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuLabel.vue
new file mode 100644
index 000000000..8a54cb36b
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuLabel.vue
@@ -0,0 +1,16 @@
+<script lang="ts">
+import { PrimitiveLabel } from "@/Primitive";
+
+interface NavigationMenuLabelProps {
+  asChild?: boolean;
+  for?: string;
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<NavigationMenuLabelProps>();
+</script>
+
+<template>
+  <PrimitiveLabel :for="props.for"><slot /></PrimitiveLabel>
+</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuMenu.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuMenu.vue
new file mode 100644
index 000000000..57518837d
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuMenu.vue
@@ -0,0 +1,56 @@
+<script lang="ts">
+import type { Ref, InjectionKey } from "vue";
+import type { DataOrientation } from "../shared/types";
+
+export interface NavigationMenuMenuRootProps {
+  value?: string;
+}
+
+export const NAVIGATION_MENU_MENU_INJECTION_KEY =
+  Symbol() as InjectionKey<NavigationMenuMenuProvideValue>;
+
+export type NavigationMenuMenuProvideValue = {
+  value: string;
+  isOpen: Ref<boolean>;
+  triggerElement: Ref<HTMLElement | undefined>;
+  itemsArray: HTMLElement[];
+  triggerId: string;
+  contentId: string;
+  orientation: DataOrientation;
+  parentContext?: NavigationMenuMenuProvideValue;
+};
+</script>
+
+<script setup lang="ts">
+import { computed, inject, provide, ref } from "vue";
+import { PopperRoot } from "@/Popper";
+import { useId } from "@/shared";
+import { NAVIGATION_MENU_INJECTION_KEY } from "./NavigationMenuRoot.vue";
+
+const props = defineProps<NavigationMenuMenuRootProps>();
+
+const value = props.value ?? useId();
+const rootInjectedValue = inject(NAVIGATION_MENU_INJECTION_KEY);
+
+const triggerElement = ref<HTMLElement>();
+
+const isOpen = computed(() => rootInjectedValue?.modelValue.value === value);
+
+const parentContext = inject(NAVIGATION_MENU_MENU_INJECTION_KEY);
+provide<NavigationMenuMenuProvideValue>(NAVIGATION_MENU_MENU_INJECTION_KEY, {
+  value,
+  isOpen,
+  triggerElement,
+  itemsArray: [],
+  triggerId: value,
+  contentId: useId(),
+  parentContext,
+  orientation: "vertical",
+});
+</script>
+
+<template>
+  <PopperRoot>
+    <slot />
+  </PopperRoot>
+</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuPortal.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuPortal.vue
new file mode 100644
index 000000000..bdee234e6
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuPortal.vue
@@ -0,0 +1,14 @@
+<!--
+<script lang="ts">
+export interface DropdwonMenuPortalProps {
+  forceMount?: boolean;
+  container?: HTMLElement | string;
+}
+</script>
+-->
+
+<template>
+  <Teleport to="body">
+    <slot />
+  </Teleport>
+</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuRadioGroup.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuRadioGroup.vue
new file mode 100644
index 000000000..9e1738308
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuRadioGroup.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+import type { Ref } from "vue";
+import { useVModel } from "@vueuse/core";
+
+export interface RadioGroupRootProps {
+  asChild?: boolean;
+  value?: string;
+  defaultValue?: string;
+  //disabled?: boolean;
+  //onValueChange?: void;
+  modelValue?: string | string[];
+}
+
+export const RADIO_GROUP_INJECTION_KEY = "RadioGroup" as const;
+
+export interface RadioGroupProvideValue {
+  modelValue?: Readonly<Ref<string | string[] | undefined>>;
+  changeModelValue: (value?: string) => void;
+  parentElement: Ref<HTMLElement | undefined>;
+}
+</script>
+
+<script setup lang="ts">
+import { provide } from "vue";
+import { PrimitiveDiv, usePrimitiveElement } from "@/Primitive";
+
+const props = defineProps<RadioGroupRootProps>();
+
+const emits = defineEmits(["update:modelValue"]);
+
+const { primitiveElement, currentElement: parentElement } =
+  usePrimitiveElement();
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+});
+
+provide<RadioGroupProvideValue>(RADIO_GROUP_INJECTION_KEY, {
+  modelValue,
+  changeModelValue: (value?: string) => {
+    modelValue.value = value;
+  },
+  parentElement,
+});
+</script>
+
+<template>
+  <PrimitiveDiv
+    ref="primitiveElement"
+    role="radiogroup"
+    aria-label="radiogroup"
+  >
+    <slot />
+  </PrimitiveDiv>
+</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuRadioItem.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuRadioItem.vue
new file mode 100644
index 000000000..4757b032e
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuRadioItem.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { inject, computed, provide } from "vue";
+import BaseMenuItem from "../shared/component/BaseMenuItem.vue";
+import { useArrowNavigation } from "@/shared/useArrowNavigation";
+import {
+  NAVIGATION_MENU_INJECTION_KEY,
+  type NavigationMenuProvideValue,
+} from "./NavigationMenuRoot.vue";
+import {
+  RADIO_GROUP_INJECTION_KEY,
+  type RadioGroupProvideValue,
+} from "./NavigationMenuRadioGroup.vue";
+import { NAVIGATION_MENU_ITEM_SYMBOL } from "./utils";
+
+interface RadioGroupItemProps {
+  asChild?: boolean;
+  value?: string;
+  disabled?: boolean;
+  id?: string;
+  name?: string;
+  onSelect?: void;
+  textValue?: string;
+}
+
+const rootInjectedValue = inject<NavigationMenuProvideValue>(
+  NAVIGATION_MENU_INJECTION_KEY
+);
+const radioInjectedValue = inject<RadioGroupProvideValue>(
+  RADIO_GROUP_INJECTION_KEY
+);
+
+const props = defineProps<RadioGroupItemProps>();
+
+const radioDataState = computed(() => {
+  return radioInjectedValue?.modelValue?.value === props.value ? "on" : "off";
+});
+
+function handleClick() {
+  if (rootInjectedValue?.selectedElement.value) {
+    return radioInjectedValue?.changeModelValue(props.value);
+  }
+}
+
+const modelValue = computed(
+  () => radioInjectedValue?.modelValue?.value === props.value
+);
+provide(NAVIGATION_MENU_ITEM_SYMBOL, {
+  modelValue,
+});
+
+function handleHorizontalKeydown(e: KeyboardEvent) {
+  const newSelectedElement = useArrowNavigation(
+    e,
+    rootInjectedValue?.triggerElement.value as HTMLElement,
+    undefined,
+    {
+      arrowKeyOptions: "horizontal",
+      itemsArray: rootInjectedValue?.triggerItemsArray,
+    }
+  );
+  if (newSelectedElement) {
+    rootInjectedValue?.changeSelected(newSelectedElement);
+    rootInjectedValue?.changeValue(newSelectedElement.id);
+  }
+}
+
+function handleEscapeKeydown(e: KeyboardEvent) {
+  rootInjectedValue!.changeValue(undefined);
+  rootInjectedValue!.changeSelected(
+    rootInjectedValue!.triggerElement.value as HTMLElement
+  );
+}
+</script>
+
+<template>
+  <BaseMenuItem
+    :disabled="props.disabled"
+    :rootProvider="rootInjectedValue"
+    :orientation="rootInjectedValue?.orientation"
+    :data-radix-vue-radio-value="props.value"
+    @handle-click="handleClick"
+    @horizontal-keydown="handleHorizontalKeydown"
+    @escape-keydown="handleEscapeKeydown"
+    role="menuitemradio"
+    :data-state="radioDataState"
+  >
+    <slot />
+  </BaseMenuItem>
+</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuRoot.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuRoot.vue
new file mode 100644
index 000000000..2b012384a
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuRoot.vue
@@ -0,0 +1,98 @@
+<script lang="ts">
+import type { Ref, InjectionKey } from "vue";
+import type { DataOrientation, Direction } from "../shared/types";
+
+export interface NavigationMenuRootProps {
+  modelValue?: string;
+  defaultValue?: string;
+  orientation?: DataOrientation;
+  dir?: Direction;
+}
+
+export const NAVIGATION_MENU_INJECTION_KEY =
+  Symbol() as InjectionKey<NavigationMenuProvideValue>;
+
+export type NavigationMenuProvideValue = {
+  selectedElement: Ref<HTMLElement | undefined>;
+  changeSelected: (value: HTMLElement) => void;
+  modelValue: Ref<string | undefined>;
+  changeValue(value?: string): void;
+  triggerElement: Ref<HTMLElement | undefined>;
+  triggerItemsArray: HTMLElement[];
+  itemsArray: HTMLElement[];
+  orientation: DataOrientation;
+};
+
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<script setup lang="ts">
+import { provide, ref, watch } from "vue";
+import { PopperRoot } from "@/Popper";
+import { useVModel, useActiveElement } from "@vueuse/core";
+
+const props = withDefaults(defineProps<NavigationMenuRootProps>(), {
+  orientation: "horizontal",
+});
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+  (e: "update:open", value: boolean): void;
+}>();
+
+const modelValue = useVModel(props, "modelValue", emit, {
+  passive: true,
+  defaultValue: props.defaultValue,
+});
+
+const selectedElement = ref<HTMLElement>();
+const triggerElement = ref<HTMLElement>();
+const triggerItemsArray: HTMLElement[] = [];
+const NavigationMenuContainerElement = ref<HTMLElement>();
+const activeElement = useActiveElement();
+
+provide<NavigationMenuProvideValue>(NAVIGATION_MENU_INJECTION_KEY, {
+  selectedElement: selectedElement,
+  changeSelected: (value: HTMLElement) => {
+    selectedElement.value = value;
+    selectedElement.value?.focus();
+  },
+  modelValue,
+  changeValue: (value?: string) => {
+    modelValue.value = value;
+  },
+  triggerElement,
+  triggerItemsArray,
+  itemsArray: [],
+  orientation: props.orientation,
+});
+
+watch(
+  activeElement,
+  () => {
+    if (activeElement.value === NavigationMenuContainerElement.value) {
+      if (triggerElement.value) {
+        triggerElement.value.focus();
+      } else if (triggerItemsArray.length) {
+        triggerItemsArray[0].focus();
+      }
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <PopperRoot>
+    <div
+      role="NavigationMenu"
+      v-bind="$attrs"
+      ref="NavigationMenuContainerElement"
+      tabindex="0"
+    >
+      <slot />
+    </div>
+  </PopperRoot>
+</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuSeparator.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuSeparator.vue
new file mode 100644
index 000000000..8666e8237
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuSeparator.vue
@@ -0,0 +1,21 @@
+<script lang="ts">
+import BaseSeparator from "../shared/component/BaseSeparator.vue";
+import type { DataOrientation } from "../shared/types";
+
+export interface NavigationMenuSeparatorProps {
+  orientation?: DataOrientation;
+  decorative?: boolean;
+  asChild?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<NavigationMenuSeparatorProps>();
+</script>
+
+<template>
+  <BaseSeparator
+    :orientation="props.orientation"
+    :decorative="props.decorative"
+  />
+</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuSub.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuSub.vue
new file mode 100644
index 000000000..c9fbe7903
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuSub.vue
@@ -0,0 +1,75 @@
+<script lang="ts">
+import type { Ref, InjectionKey } from "vue";
+import type { DataOrientation } from "@/shared/types";
+import { useVModel } from "@vueuse/core";
+
+export interface NavigationMenuSubRootProps {
+  modelValue?: boolean;
+  defaultOpen?: boolean;
+  open?: boolean;
+  //onOpenChange?: void;
+  delayDuration?: number;
+  disableHoverableContent?: boolean;
+  orientation?: DataOrientation;
+}
+
+export const NAVIGATION_MENU_SUB_INJECTION_KEY =
+  Symbol() as InjectionKey<NavigationMenuSubProvideValue>;
+
+export type NavigationMenuSubProvideValue = {
+  modelValue: Readonly<Ref<boolean>>;
+  showTooltip(): void;
+  hideTooltip(): void;
+  triggerElement: Ref<HTMLElement | undefined>;
+  itemsArray: HTMLElement[];
+  orientation: DataOrientation;
+  triggerId: string;
+  contentId: string;
+  parentContext?: NavigationMenuSubProvideValue;
+};
+</script>
+
+<script setup lang="ts">
+import { inject, provide, ref } from "vue";
+import { PopperRoot } from "@/Popper";
+import { useId } from "@/shared";
+
+const props = withDefaults(defineProps<NavigationMenuSubRootProps>(), {
+  delayDuration: 700,
+  orientation: "vertical",
+});
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+}>();
+
+const modelValue = useVModel(props, "modelValue", emit, {
+  passive: true,
+});
+
+const triggerElement = ref<HTMLElement>();
+
+const parentContext = inject(NAVIGATION_MENU_SUB_INJECTION_KEY);
+
+provide<NavigationMenuSubProvideValue>(NAVIGATION_MENU_SUB_INJECTION_KEY, {
+  modelValue,
+  showTooltip: () => {
+    modelValue.value = true;
+  },
+  hideTooltip: () => {
+    modelValue.value = false;
+  },
+  triggerElement,
+  itemsArray: [],
+  orientation: props.orientation,
+  triggerId: useId(),
+  contentId: useId(),
+  parentContext,
+});
+</script>
+
+<template>
+  <PopperRoot>
+    <slot />
+  </PopperRoot>
+</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuSubContent.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuSubContent.vue
new file mode 100644
index 000000000..d5602a74b
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuSubContent.vue
@@ -0,0 +1,116 @@
+<script lang="ts">
+export type Boundary = Element | null | Array<Element | null>;
+
+export interface NavigationMenuSubContentProps extends PopperContentProps {
+  asChild?: boolean;
+  loop?: boolean; //false
+  //onOpenAutoFocus?: void;
+  //onCloseAutoFocus?: void;
+  //onEscapeKeyDown?: void;
+  //onPointerDownOutside?: void;
+  //onInteractOutside?: void;
+}
+</script>
+
+<script setup lang="ts">
+import { inject, watchEffect, watch } from "vue";
+import { PrimitiveDiv, usePrimitiveElement } from "@/Primitive";
+import {
+  NAVIGATION_MENU_INJECTION_KEY,
+  type NavigationMenuProvideValue,
+} from "./NavigationMenuRoot.vue";
+import {
+  NAVIGATION_MENU_SUB_INJECTION_KEY,
+  type NavigationMenuSubProvideValue,
+} from "./NavigationMenuSub.vue";
+import { PopperContent, type PopperContentProps } from "@/Popper";
+import { useCollection } from "@/shared";
+import { onClickOutside } from "@vueuse/core";
+
+const rootInjectedValue = inject<NavigationMenuProvideValue>(
+  NAVIGATION_MENU_INJECTION_KEY
+);
+
+const injectedValue = inject<NavigationMenuSubProvideValue>(
+  NAVIGATION_MENU_SUB_INJECTION_KEY
+);
+
+const props = withDefaults(defineProps<NavigationMenuSubContentProps>(), {
+  side: "right",
+  align: "start",
+  orientation: "horizontal",
+  avoidCollisions: true,
+});
+
+const { primitiveElement, currentElement: tooltipContentElement } =
+  usePrimitiveElement();
+
+const { createCollection } = useCollection();
+createCollection(tooltipContentElement);
+
+watchEffect(() => {
+  if (tooltipContentElement.value) {
+    if (injectedValue?.modelValue.value) {
+      fillItemsArray();
+    }
+  }
+});
+
+watch(
+  () => rootInjectedValue?.selectedElement.value,
+  (n) => {
+    if (!injectedValue?.modelValue.value) return;
+    const siblingsElement = Array.from(
+      n
+        ?.closest('[role="tooltip"]')
+        ?.querySelectorAll(
+          "[data-radix-vue-collection-item]:not([data-disabled])"
+        ) ?? []
+    ) as HTMLElement[];
+
+    if (!siblingsElement?.length) return;
+    if (siblingsElement.includes(injectedValue.triggerElement.value!)) {
+      if (
+        rootInjectedValue?.selectedElement.value !==
+        injectedValue?.triggerElement.value
+      ) {
+        injectedValue?.hideTooltip();
+      }
+    }
+  }
+);
+
+function fillItemsArray() {
+  const allToggleItem = Array.from(
+    tooltipContentElement.value!.querySelectorAll(
+      "[data-radix-vue-collection-item]:not([data-disabled])"
+    )
+  ) as HTMLElement[];
+  injectedValue!.itemsArray = allToggleItem;
+  return allToggleItem;
+}
+
+onClickOutside(tooltipContentElement, (event) => {
+  const target = event.target as HTMLElement;
+  if (target.closest('[role="menuitem"]')) return;
+  injectedValue?.hideTooltip();
+});
+</script>
+
+<template>
+  <PopperContent v-bind="props" v-if="injectedValue?.modelValue.value">
+    <PrimitiveDiv
+      ref="primitiveElement"
+      :data-state="injectedValue?.modelValue.value ? 'open' : 'closed'"
+      :data-side="props.side"
+      :data-align="props.align"
+      :data-orientation="injectedValue.orientation"
+      :aria-labelledby="injectedValue.triggerId"
+      role="tooltip"
+      :asChild="props.asChild"
+      style="pointer-events: auto"
+    >
+      <slot />
+    </PrimitiveDiv>
+  </PopperContent>
+</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuSubTrigger.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuSubTrigger.vue
new file mode 100644
index 000000000..c619e54ad
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuSubTrigger.vue
@@ -0,0 +1,112 @@
+<script lang="ts">
+export interface NavigationMenuSubTriggerProps {
+  asChild?: boolean;
+  disabled?: boolean;
+  textValue?: string;
+}
+</script>
+
+<script setup lang="ts">
+import { inject, onMounted, computed, nextTick } from "vue";
+import {
+  NAVIGATION_MENU_INJECTION_KEY,
+  type NavigationMenuProvideValue,
+} from "./NavigationMenuRoot.vue";
+import {
+  NAVIGATION_MENU_SUB_INJECTION_KEY,
+  type NavigationMenuSubProvideValue,
+} from "./NavigationMenuSub.vue";
+import { PopperAnchor } from "@/Popper";
+import { usePrimitiveElement } from "@/Primitive";
+import { useArrowNavigation } from "@/shared/useArrowNavigation";
+import BaseMenuItem from "../shared/component/BaseMenuItem.vue";
+
+const rootInjectedValue = inject<NavigationMenuProvideValue>(
+  NAVIGATION_MENU_INJECTION_KEY
+);
+
+const injectedValue = inject<NavigationMenuSubProvideValue>(
+  NAVIGATION_MENU_SUB_INJECTION_KEY
+);
+
+const { primitiveElement, currentElement } = usePrimitiveElement();
+
+onMounted(() => {
+  injectedValue!.triggerElement.value = currentElement.value;
+});
+
+async function openAndSelectFirstElement() {
+  injectedValue?.showTooltip();
+
+  await nextTick();
+  const el = injectedValue?.itemsArray?.[0];
+  rootInjectedValue!.selectedElement.value = el;
+  el?.focus();
+}
+
+function handleClick() {
+  if (!injectedValue?.modelValue.value) {
+    openAndSelectFirstElement();
+  }
+}
+
+async function handleHorizontalKeydown(e: KeyboardEvent) {
+  if (e.key === "ArrowRight") {
+    openAndSelectFirstElement();
+  } else {
+    const newSelectedElement = useArrowNavigation(
+      e,
+      rootInjectedValue?.triggerElement.value as HTMLElement,
+      undefined,
+      {
+        arrowKeyOptions: "horizontal",
+        itemsArray: rootInjectedValue?.triggerItemsArray,
+      }
+    );
+    if (newSelectedElement) {
+      rootInjectedValue?.changeSelected(newSelectedElement);
+      newSelectedElement.focus();
+      if (rootInjectedValue?.modelValue.value) {
+        rootInjectedValue?.changeValue(newSelectedElement.id);
+      }
+    }
+  }
+}
+
+const dataState = computed(() => {
+  return injectedValue?.modelValue.value ? "open" : "closed";
+});
+
+function handleMouseover() {
+  return injectedValue?.showTooltip();
+}
+
+function handleEscapeKeydown(e: KeyboardEvent) {
+  rootInjectedValue!.changeValue(undefined);
+  rootInjectedValue!.changeSelected(
+    rootInjectedValue!.triggerElement.value as HTMLElement
+  );
+}
+</script>
+
+<template>
+  <PopperAnchor asChild>
+    <BaseMenuItem
+      ref="primitiveElement"
+      :id="injectedValue?.triggerId"
+      :rootProvider="rootInjectedValue"
+      :subProvider="injectedValue?.parentContext"
+      :aria-expanded="injectedValue?.modelValue.value"
+      :aria-controls="injectedValue?.contentId"
+      :data-state="dataState"
+      :data-orientation="rootInjectedValue?.orientation"
+      aria-haspopup="menu"
+      @handle-click="handleClick"
+      @mouseover="handleMouseover"
+      @horizontal-keydown="handleHorizontalKeydown"
+      @escape-keydown="handleEscapeKeydown"
+    >
+      <slot />
+    </BaseMenuItem>
+  </PopperAnchor>
+</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue
new file mode 100644
index 000000000..89aaf8e40
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue
@@ -0,0 +1,165 @@
+<script lang="ts">
+export interface NavigationMenuMenuTriggerProps {
+  asChild?: boolean;
+  disabled?: boolean;
+  textValue?: string;
+}
+
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<script setup lang="ts">
+import { inject, onMounted, computed, nextTick, watchEffect, watch } from "vue";
+import {
+  NAVIGATION_MENU_INJECTION_KEY,
+  type NavigationMenuProvideValue,
+} from "./NavigationMenuRoot.vue";
+import {
+  NAVIGATION_MENU_MENU_INJECTION_KEY,
+  type NavigationMenuMenuProvideValue,
+} from "./NavigationMenuMenu.vue";
+import { PopperAnchor } from "@/Popper";
+import { PrimitiveButton, usePrimitiveElement } from "@/Primitive";
+import { useArrowNavigation } from "@/shared/useArrowNavigation";
+import { useActiveElement } from "@vueuse/core";
+
+const rootInjectedValue = inject<NavigationMenuProvideValue>(
+  NAVIGATION_MENU_INJECTION_KEY
+);
+
+const injectedValue = inject<NavigationMenuMenuProvideValue>(
+  NAVIGATION_MENU_MENU_INJECTION_KEY
+);
+
+const props = defineProps<NavigationMenuMenuTriggerProps>();
+
+const { primitiveElement, currentElement } = usePrimitiveElement();
+const activeElement = useActiveElement();
+
+onMounted(() => {
+  injectedValue!.triggerElement.value = currentElement.value;
+  rootInjectedValue!.triggerItemsArray.push(currentElement.value!);
+});
+
+async function openAndSelectFirstElement() {
+  rootInjectedValue?.changeValue(injectedValue?.value);
+
+  await nextTick();
+  const el = injectedValue?.itemsArray?.[0];
+  rootInjectedValue!.selectedElement.value = el;
+  el?.focus();
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === "Escape") {
+    return handleCloseMenu();
+  }
+  if (e.keyCode === 32 || e.key === "Enter") {
+    (e.target as HTMLElement).click();
+    return;
+  }
+  if (e.key === "ArrowDown") {
+    return openAndSelectFirstElement();
+  }
+
+  const newSelectedElement = useArrowNavigation(
+    e,
+    currentElement.value!,
+    currentElement.value!.parentElement! as HTMLElement,
+    {
+      arrowKeyOptions: "horizontal",
+    }
+  );
+  if (newSelectedElement) {
+    rootInjectedValue?.changeSelected(newSelectedElement);
+    newSelectedElement.focus();
+    if (rootInjectedValue?.modelValue.value) {
+      rootInjectedValue?.changeValue(newSelectedElement.id);
+    }
+  }
+}
+
+function handleHover() {
+  if (!props.disabled && rootInjectedValue?.modelValue.value) {
+    rootInjectedValue?.changeSelected(currentElement.value!);
+    rootInjectedValue?.changeValue(injectedValue?.value);
+    return;
+  }
+}
+
+function handleCloseMenu() {
+  rootInjectedValue?.changeValue(undefined);
+  document.querySelector("body")!.style.pointerEvents = "";
+  setTimeout(() => {
+    rootInjectedValue?.triggerElement.value?.focus();
+  }, 0);
+}
+
+function handleClick() {
+  openAndSelectFirstElement();
+}
+
+const dataState = computed(() => {
+  return injectedValue?.isOpen.value ? "open" : "closed";
+});
+
+const highlightedState = computed(() => {
+  return (
+    activeElement.value === currentElement.value ||
+    (rootInjectedValue?.triggerElement.value === currentElement.value &&
+      rootInjectedValue?.selectedElement.value)
+  );
+});
+
+watchEffect(() => {
+  if (rootInjectedValue?.selectedElement.value === currentElement.value) {
+    rootInjectedValue!.triggerElement.value = currentElement.value;
+  }
+});
+
+watch(
+  activeElement,
+  () => {
+    if (activeElement.value === currentElement.value) {
+      rootInjectedValue!.selectedElement.value = currentElement.value;
+      rootInjectedValue!.triggerElement.value = currentElement.value;
+    } else if (
+      !injectedValue?.isOpen.value &&
+      rootInjectedValue!.selectedElement.value === currentElement.value
+    ) {
+      rootInjectedValue!.selectedElement.value = undefined;
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <PopperAnchor asChild>
+    <PrimitiveButton
+      role="menuitem"
+      ref="primitiveElement"
+      :id="injectedValue?.triggerId"
+      :aria-expanded="injectedValue?.isOpen.value"
+      :aria-controls="injectedValue?.contentId"
+      :data-state="dataState"
+      :data-orientation="rootInjectedValue?.orientation"
+      aria-haspopup="menu"
+      @keydown.prevent="handleKeydown"
+      data-radix-vue-collection-item
+      @mouseenter="handleHover"
+      @click="handleClick"
+      :data-highlighted="highlightedState ? '' : null"
+      :aria-disabled="props.disabled ? true : undefined"
+      :data-disabled="props.disabled ? '' : undefined"
+      :tabindex="
+        rootInjectedValue?.triggerElement.value === currentElement ? '0' : '-1'
+      "
+      v-bind="$attrs"
+    >
+      <slot />
+    </PrimitiveButton>
+  </PopperAnchor>
+</template>
diff --git a/packages/radix-vue/src/NavigationMenu/index.ts b/packages/radix-vue/src/NavigationMenu/index.ts
new file mode 100644
index 000000000..7557bf690
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/index.ts
@@ -0,0 +1,19 @@
+export { default as NavigationMenuRoot } from "./NavigationMenuRoot.vue";
+export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.vue";
+export { default as NavigationMenuPortal } from "./NavigationMenuPortal.vue";
+export { default as NavigationMenuContent } from "./NavigationMenuContent.vue";
+export { default as NavigationMenuArrow } from "./NavigationMenuArrow.vue";
+export { default as NavigationMenuItem } from "./NavigationMenuItem.vue";
+export { default as NavigationMenuGroup } from "./NavigationMenuGroup.vue";
+export { default as NavigationMenuSeparator } from "./NavigationMenuSeparator.vue";
+export { default as NavigationMenuCheckboxItem } from "./NavigationMenuCheckboxItem.vue";
+export { default as NavigationMenuItemIndicator } from "./NavigationMenuItemIndicator.vue";
+export { default as NavigationMenuLabel } from "./NavigationMenuLabel.vue";
+export { default as NavigationMenuRadioGroup } from "./NavigationMenuRadioGroup.vue";
+export { default as NavigationMenuRadioItem } from "./NavigationMenuRadioItem.vue";
+export { default as NavigationMenuSub } from "./NavigationMenuSub.vue";
+export { default as NavigationMenuSubContent } from "./NavigationMenuSubContent.vue";
+export { default as NavigationMenuSubTrigger } from "./NavigationMenuSubTrigger.vue";
+export { default as NavigationMenuMenu } from "./NavigationMenuMenu.vue";
+
+export * from "./utils";
diff --git a/packages/radix-vue/src/NavigationMenu/utils.ts b/packages/radix-vue/src/NavigationMenu/utils.ts
new file mode 100644
index 000000000..2efa529bb
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/utils.ts
@@ -0,0 +1,8 @@
+import { type InjectionKey, type Ref } from "vue";
+
+type NavigationMenuItemContextValue = {
+  modelValue: Ref<boolean>;
+};
+
+export const NAVIGATION_MENU_ITEM_SYMBOL =
+  Symbol() as InjectionKey<NavigationMenuItemContextValue>;
diff --git a/packages/radix-vue/src/index.ts b/packages/radix-vue/src/index.ts
index 0d27e5ee1..0bd1e2257 100644
--- a/packages/radix-vue/src/index.ts
+++ b/packages/radix-vue/src/index.ts
@@ -151,5 +151,24 @@ export {
   MenubarSubTrigger,
   MenubarMenu,
 } from "./Menubar";
+export {
+  NavigationMenuArrow,
+  NavigationMenuContent,
+  NavigationMenuGroup,
+  NavigationMenuItem,
+  NavigationMenuPortal,
+  NavigationMenuRoot,
+  NavigationMenuSeparator,
+  NavigationMenuTrigger,
+  NavigationMenuCheckboxItem,
+  NavigationMenuItemIndicator,
+  NavigationMenuLabel,
+  NavigationMenuRadioGroup,
+  NavigationMenuRadioItem,
+  NavigationMenuSub,
+  NavigationMenuSubContent,
+  NavigationMenuSubTrigger,
+  NavigationMenuMenu,
+} from "./NavigationMenu";
 
 export * from "./ScrollArea";
diff --git a/playground/vue3/src/App.vue b/playground/vue3/src/App.vue
index 15d4748cc..d9de03aba 100644
--- a/playground/vue3/src/App.vue
+++ b/playground/vue3/src/App.vue
@@ -25,6 +25,7 @@ import DropdownMenuDemo from './components/Demo/DropdownMenuDemo.vue'
 import ContextMenuDemo from './components/Demo/ContextMenuDemo.vue'
 import ScrollAreaDemo from './components/Demo/ScrollAreaDemo.vue'
 import MenubarDemo from './components/Demo/MenubarDemo.vue'
+import NavigationMenuDemo from './components/Demo/NavigationMenuDemo.vue'
 </script>
 
 <template>
@@ -63,6 +64,9 @@ import MenubarDemo from './components/Demo/MenubarDemo.vue'
       <Card>
         <MenubarDemo />
       </Card>
+      <Card>
+        <NavigationMenuDemo />
+      </Card>
       <Card>
         <HoverCardDemo />
       </Card>
diff --git a/playground/vue3/src/components/Demo/NavigationMenuDemo.vue b/playground/vue3/src/components/Demo/NavigationMenuDemo.vue
new file mode 100644
index 000000000..bc090bb73
--- /dev/null
+++ b/playground/vue3/src/components/Demo/NavigationMenuDemo.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue";
+import { ref } from "vue";
+import {
+  NavigationMenuCheckboxItem,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuItemIndicator,
+  NavigationMenuMenu,
+  NavigationMenuRoot,
+  NavigationMenuTrigger,
+} from "../../../../../packages/radix-vue/src";
+import NavigationMenuListItem from "./NavigationMenuListItem.vue";
+
+const currentMenu = ref("");
+const checkboxOne = ref(false);
+const checkboxTwo = ref(false);
+const person = ref("pedro");
+function handleClick() {
+  alert("hello!");
+}
+
+const RADIO_ITEMS = ["Andy", "Benoît", "Luis"];
+const CHECK_ITEMS = ["Always Show Bookmarks Bar", "Always Show Full URLs"];
+</script>
+
+<template>
+  <div class="absolute left-4 top-3 text-sm">
+    <p>Current menu: {{ currentMenu }}</p>
+    <p>Checkbox 1: {{ checkboxOne ? "checked" : "unchecked" }}</p>
+    <p>Checkbox 2: {{ checkboxTwo ? "checked" : "unchecked" }}</p>
+    <p>Person: {{ person }}</p>
+  </div>
+  <NavigationMenuRoot
+    class="center shadow-blackA7 m-0 flex list-none rounded-[6px] bg-white p-1 shadow-[0_2px_10px]"
+  >
+    <NavigationMenuMenu>
+      <NavigationMenuTrigger
+        class="text-violet11 hover:bg-violet3 focus:shadow-violet7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
+      >
+        Learn
+        <Icon
+          icon="radix-icons:caret-down"
+          class="text-violet10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
+          aria-hidden
+        />
+      </NavigationMenuTrigger>
+      <NavigationMenuContent
+        class="data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute top-0 left-0 w-full sm:w-auto"
+      >
+        <ul
+          class="one m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[500px] sm:grid-cols-[0.75fr_1fr]"
+        >
+          <li class="row-span-3 grid">
+            <NavigationMenuItem asChild>
+              <a
+                class="focus:shadow-violet7 from-purple9 to-indigo9 flex h-full w-full select-none flex-col justify-end rounded-[6px] bg-gradient-to-b p-[25px] no-underline outline-none focus:shadow-[0_0_0_2px]"
+                href="/"
+              >
+                <svg aria-hidden width="38" height="38" viewBox="0 0 25 25" fill="white">
+                  <path
+                    d="M12 25C7.58173 25 4 21.4183 4 17C4 12.5817 7.58173 9 12 9V25Z"
+                  ></path>
+                  <path d="M12 0H4V8H12V0Z"></path>
+                  <path
+                    d="M17 8C19.2091 8 21 6.20914 21 4C21 1.79086 19.2091 0 17 0C14.7909 0 13 1.79086 13 4C13 6.20914 14.7909 8 17 8Z"
+                  ></path>
+                </svg>
+                <div
+                  class="mt-4 mb-[7px] text-[18px] font-medium leading-[1.2] text-white"
+                >
+                  Radix Primitives
+                </div>
+                <p class="text-mauve4 text-[14px] leading-[1.3]">
+                  Unstyled, accessible components for React.
+                </p>
+              </a>
+            </NavigationMenuItem>
+          </li>
+
+          <NavigationMenuListItem href="https://stitches.dev/" title="Stitches">
+            CSS-in-JS with best-in-class developer experience.
+          </NavigationMenuListItem>
+          <NavigationMenuListItem href="/colors" title="Colors">
+            Beautiful, thought-out palettes with auto dark mode.
+          </NavigationMenuListItem>
+          <NavigationMenuListItem href="https://icons.radix-ui.com/" title="Icons">
+            A crisp set of 15x15 icons, balanced and consistent.
+          </NavigationMenuListItem>
+        </ul>
+      </NavigationMenuContent>
+    </NavigationMenuMenu>
+
+    <NavigationMenuMenu>
+      <NavigationMenuTrigger
+        class="text-violet11 hover:bg-violet3 focus:shadow-violet7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
+      >
+        Overview
+        <Icon
+          icon="radix-icons:caret-down"
+          class="text-violet10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
+          aria-hidden
+        />
+      </NavigationMenuTrigger>
+      <NavigationMenuContent class="absolute top-0 left-0 w-full sm:w-auto">
+        <ul
+          class="m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[600px] sm:grid-flow-col sm:grid-rows-3"
+        >
+          <NavigationMenuListItem
+            title="Introduction"
+            href="/docs/primitives/overview/introduction"
+          >
+            Build high-quality, accessible design systems and web apps.
+          </NavigationMenuListItem>
+          <NavigationMenuListItem
+            title="Getting started"
+            href="/docs/primitives/overview/getting-started"
+          >
+            A quick tutorial to get you up and running with Radix Primitives.
+          </NavigationMenuListItem>
+          <NavigationMenuListItem title="Styling" href="/docs/primitives/guides/styling">
+            Unstyled and compatible with any styling solution.
+          </NavigationMenuListItem>
+          <NavigationMenuListItem
+            title="Animation"
+            href="/docs/primitives/guides/animation"
+          >
+            Use CSS keyframes or any animation library of your choice.
+          </NavigationMenuListItem>
+          <NavigationMenuListItem
+            title="Accessibility"
+            href="/docs/primitives/overview/accessibility"
+          >
+            Tested in a range of browsers and assistive technologies.
+          </NavigationMenuListItem>
+          <NavigationMenuListItem
+            title="Releases"
+            href="/docs/primitives/overview/releases"
+          >
+            Radix Primitives releases and their changelogs.
+          </NavigationMenuListItem>
+        </ul>
+      </NavigationMenuContent>
+    </NavigationMenuMenu>
+
+    <NavigationMenuMenu>
+      <NavigationMenuItem
+        class="text-violet11 hover:bg-violet3 focus:shadow-violet7 block select-none rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none no-underline outline-none focus:shadow-[0_0_0_2px]"
+        href="https://github.com/radix-ui"
+      >
+        Github
+      </NavigationMenuItem>
+    </NavigationMenuMenu>
+
+    <NavigationMenuItemIndicator
+      class="data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-[1] flex h-[10px] items-end justify-center overflow-hidden transition-[width,transform_250ms_ease]"
+    >
+      <div
+        class="relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] bg-white"
+      />
+    </NavigationMenuItemIndicator>
+    <div className="perspective-[2000px] absolute top-full left-0 flex w-full justify-center">
+        <div class="data-[state=open]:animate-scaleIn data-[state=closed]:animate-scaleOut relative mt-[10px] h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-[6px] bg-white transition-[width,_height] duration-300 sm:w-[var(--radix-navigation-menu-viewport-width)]" />
+      </div>
+  </NavigationMenuRoot>
+</template>
diff --git a/playground/vue3/src/components/Demo/NavigationMenuListItem.vue b/playground/vue3/src/components/Demo/NavigationMenuListItem.vue
new file mode 100644
index 000000000..d355225ce
--- /dev/null
+++ b/playground/vue3/src/components/Demo/NavigationMenuListItem.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { NavigationMenuItem } from "../../../../../packages/radix-vue/src";
+
+const props = defineProps({
+  title: String,
+});
+</script>
+
+<template>
+  <li>
+    <NavigationMenuItem asChild>
+      <a
+        v-bind="$attrs"
+        class="focus:shadow-[0_0_0_2px] focus:shadow-violet7 hover:bg-mauve3 block select-none rounded-[6px] p-3 text-[15px] leading-none no-underline outline-none transition-colors"
+      >
+        <div class="text-violet12 mb-[5px] font-medium leading-[1.2]">
+          {{ props.title }}
+        </div>
+        <p class="text-mauve11 leading-[1.4]">
+          <slot />
+        </p>
+      </a>
+    </NavigationMenuItem>
+  </li>
+</template>

From 77e76bc8e20b5985ffcd60c9761c7f619557aae6 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Fri, 14 Jul 2023 00:02:10 +0800
Subject: [PATCH 02/17] remap component

---
 .../NavigationMenu/NavigationMenuArrow.vue    |   7 -
 .../NavigationMenuCheckboxItem.vue            | 103 --------
 .../NavigationMenu/NavigationMenuContent.vue  | 159 ++++--------
 .../NavigationMenuContentImpl.vue             | 116 +++++++++
 .../NavigationMenu/NavigationMenuGroup.vue    |  73 ------
 .../NavigationMenuIndicator.vue               |  79 ++++++
 .../src/NavigationMenu/NavigationMenuItem.vue | 134 +++++-----
 .../NavigationMenuItemIndicator.vue           |  19 --
 .../NavigationMenu/NavigationMenuLabel.vue    |  16 --
 .../src/NavigationMenu/NavigationMenuLink.vue |  27 ++
 .../src/NavigationMenu/NavigationMenuList.vue |  27 ++
 .../src/NavigationMenu/NavigationMenuMenu.vue |  56 ----
 .../NavigationMenu/NavigationMenuPortal.vue   |  14 -
 .../NavigationMenuRadioGroup.vue              |  55 ----
 .../NavigationMenuRadioItem.vue               |  89 -------
 .../src/NavigationMenu/NavigationMenuRoot.vue | 186 +++++++++-----
 .../NavigationMenuSeparator.vue               |  21 --
 .../src/NavigationMenu/NavigationMenuSub.vue  |  75 ------
 .../NavigationMenuSubContent.vue              | 116 ---------
 .../NavigationMenuSubTrigger.vue              | 112 --------
 .../NavigationMenu/NavigationMenuTrigger.vue  | 223 ++++++----------
 .../NavigationMenu/NavigationMenuViewport.vue |  84 ++++++
 .../radix-vue/src/NavigationMenu/index.ts     |  22 +-
 .../radix-vue/src/NavigationMenu/utils.ts     |  72 +++++-
 packages/radix-vue/src/index.ts               |  19 --
 playground/vue3/src/App.vue                   |  54 ++--
 playground/vue3/src/components/Card.vue       |   6 +-
 .../components/Demo/NavigationMenuDemo.vue    | 240 ++++++++----------
 .../Demo/NavigationMenuListItem.vue           |   6 +-
 playground/vue3/tailwind.config.js            |  97 +++++--
 30 files changed, 933 insertions(+), 1374 deletions(-)
 delete mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuArrow.vue
 delete mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuCheckboxItem.vue
 create mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
 delete mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuGroup.vue
 create mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuIndicator.vue
 delete mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuItemIndicator.vue
 delete mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuLabel.vue
 create mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuLink.vue
 create mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuList.vue
 delete mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuMenu.vue
 delete mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuPortal.vue
 delete mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuRadioGroup.vue
 delete mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuRadioItem.vue
 delete mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuSeparator.vue
 delete mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuSub.vue
 delete mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuSubContent.vue
 delete mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuSubTrigger.vue
 create mode 100644 packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue

diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuArrow.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuArrow.vue
deleted file mode 100644
index 6d13bc339..000000000
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuArrow.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import { PopperArrow } from "@/Popper";
-</script>
-
-<template>
-  <PopperArrow></PopperArrow>
-</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuCheckboxItem.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuCheckboxItem.vue
deleted file mode 100644
index 16ef5f4a8..000000000
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuCheckboxItem.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<script lang="ts">
-import { useVModel } from "@vueuse/core";
-
-interface NavigationMenuCheckboxItemProps {
-  asChild?: boolean;
-  checked?: boolean;
-  //onCheckedChange?: void;
-  modelValue?: boolean;
-  id?: string;
-  name?: string;
-  value?: string;
-  disabled?: boolean;
-  onSelect?: void;
-  textValue?: string;
-}
-</script>
-
-<script setup lang="ts">
-import { inject, computed, provide } from "vue";
-import BaseMenuItem from "../shared/component/BaseMenuItem.vue";
-import { useArrowNavigation } from "@/shared/useArrowNavigation";
-import { NAVIGATION_MENU_ITEM_SYMBOL } from "./utils";
-import {
-  NAVIGATION_MENU_INJECTION_KEY,
-  type NavigationMenuProvideValue,
-} from "./NavigationMenuRoot.vue";
-
-const injectedValue = inject<NavigationMenuProvideValue>(
-  NAVIGATION_MENU_INJECTION_KEY
-);
-
-const props = defineProps<NavigationMenuCheckboxItemProps>();
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: boolean): void;
-}>();
-
-const modelValue = useVModel(props, "modelValue", emit, {
-  passive: true,
-});
-
-const checkboxDataState = computed(() => {
-  return modelValue.value ? "checked" : "unchecked";
-});
-
-function handleClick() {
-  modelValue.value = !modelValue.value;
-}
-
-provide(NAVIGATION_MENU_ITEM_SYMBOL, {
-  modelValue,
-});
-
-function handleHorizontalKeydown(e: KeyboardEvent) {
-  const newSelectedElement = useArrowNavigation(
-    e,
-    injectedValue?.triggerElement.value as HTMLElement,
-    undefined,
-    {
-      arrowKeyOptions: "horizontal",
-      itemsArray: injectedValue?.triggerItemsArray,
-    }
-  );
-  if (newSelectedElement) {
-    injectedValue?.changeSelected(newSelectedElement);
-    injectedValue?.changeValue(newSelectedElement.id);
-  }
-}
-
-function handleEscapeKeydown(e: KeyboardEvent) {
-  injectedValue!.changeValue(undefined);
-  injectedValue!.changeSelected(
-    injectedValue!.triggerElement.value as HTMLElement
-  );
-}
-</script>
-
-<template>
-  <BaseMenuItem
-    ref="currentElement"
-    :disabled="props.disabled"
-    :rootProvider="injectedValue"
-    :orientation="injectedValue?.orientation"
-    @handle-click="handleClick"
-    @horizontal-keydown="handleHorizontalKeydown"
-    @escape-keydown="handleEscapeKeydown"
-    role="menuitemcheckbox"
-    :data-state="checkboxDataState"
-    :aria-checked="props.modelValue ? true : false"
-  >
-    <input
-      type="checkbox"
-      :id="props.id"
-      v-bind="props.modelValue"
-      :checked="props.modelValue"
-      :name="props.name"
-      aria-hidden="true"
-      :disabled="props.disabled"
-      style="opacity: 0; position: absolute; inset: 0"
-    />
-    <slot />
-  </BaseMenuItem>
-</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
index b17f790fb..8bc2adcef 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
@@ -1,125 +1,66 @@
-<script lang="ts">
-export type Boundary = Element | null | Array<Element | null>;
-
-export interface NavigationMenuContentProps extends PopperContentProps {
-  asChild?: boolean;
-  loop?: boolean; //false
-  //onOpenAutoFocus?: void;
-  //onCloseAutoFocus?: void;
-  //onEscapeKeyDown?: void;
-  //onPointerDownOutside?: void;
-  //onInteractOutside?: void;
-}
-</script>
-
 <script setup lang="ts">
-import { inject, watchEffect, watch, computed } from "vue";
-import { PrimitiveDiv, usePrimitiveElement } from "@/Primitive";
+import { NAVIGATION_MENU_INJECTION_KEY } from "./NavigationMenuRoot.vue";
+import { NAVIGATION_MENU_ITEM_INJECTION_KEY } from "./NavigationMenuItem.vue";
 import {
-  NAVIGATION_MENU_INJECTION_KEY,
-  type NavigationMenuProvideValue,
-} from "./NavigationMenuRoot.vue";
-import {
-  NAVIGATION_MENU_MENU_INJECTION_KEY,
-  type NavigationMenuMenuProvideValue,
-} from "./NavigationMenuMenu.vue";
-import { PopperContent, type PopperContentProps } from "@/Popper";
-import { useCollection } from "@/shared";
-import { onClickOutside } from "@vueuse/core";
-
-const rootInjectedValue = inject<NavigationMenuProvideValue>(
-  NAVIGATION_MENU_INJECTION_KEY
-);
-
-const injectedValue = inject<NavigationMenuMenuProvideValue>(
-  NAVIGATION_MENU_MENU_INJECTION_KEY
-);
+  computed,
+  inject,
+  onMounted,
+  ref,
+  watch,
+  type VNode,
+  getCurrentInstance,
+} from "vue";
+import { getOpenState } from "./utils";
+import NavigationMenuContentImpl from "./NavigationMenuContentImpl.vue";
 
-const props = withDefaults(defineProps<NavigationMenuContentProps>(), {
-  side: "bottom",
-  align: "start",
-  orientation: "horizontal",
-  avoidCollisions: true,
+defineOptions({
+  inheritAttrs: false,
 });
 
-const { primitiveElement, currentElement: tooltipContentElement } =
-  usePrimitiveElement();
+const context = inject(NAVIGATION_MENU_INJECTION_KEY);
+const itemContext = inject(NAVIGATION_MENU_ITEM_INJECTION_KEY);
 
-const { createCollection } = useCollection();
-createCollection(tooltipContentElement);
+const open = computed(() => itemContext?.value === context?.modelValue.value);
 
-watchEffect(() => {
-  if (tooltipContentElement.value) {
-    if (injectedValue?.isOpen.value) {
-      fillItemsArray();
-    }
-  }
-});
-
-watch(
-  () => rootInjectedValue?.selectedElement.value,
-  (n) => {
-    if (!injectedValue?.isOpen.value) return;
-    const siblingsElement = Array.from(
-      n
-        ?.closest('[role="tooltip"]')
-        ?.querySelectorAll(
-          "[data-radix-vue-collection-item]:not([data-disabled])"
-        ) ?? []
-    ) as HTMLElement[];
+const commonProps = computed(() => ({
+  value: itemContext!.value,
+  triggerRef: itemContext!.triggerRef,
+  focusProxyRef: itemContext!.focusProxyRef,
+  wasEscapeCloseRef: itemContext!.wasEscapeCloseRef,
+  // onContentFocusOutside: itemContext!.onContentFocusOutside,
+  // onRootContentClose: itemContext!.onRootContentClose,
+}));
 
-    if (!siblingsElement?.length) return;
-    if (
-      siblingsElement.includes(
-        injectedValue!.triggerElement.value as HTMLElement
-      )
-    ) {
-      if (
-        rootInjectedValue?.selectedElement.value !==
-        injectedValue?.triggerElement.value
-      ) {
-        rootInjectedValue?.changeValue(undefined);
-      }
-    }
-  }
-);
-
-function fillItemsArray() {
-  const allToggleItem = Array.from(
-    tooltipContentElement.value!.querySelectorAll(
-      "[data-radix-vue-collection-item]:not([data-disabled])"
-    )
-  ) as HTMLElement[];
-  injectedValue!.itemsArray = allToggleItem;
-  return allToggleItem;
-}
+const elementRef = ref<VNode>();
 
-onClickOutside(tooltipContentElement, (event) => {
-  const target = event.target as HTMLElement;
-  if (target.closest('[role="menuitem"]')) return;
-  rootInjectedValue?.changeValue(undefined);
-  rootInjectedValue!.selectedElement.value = undefined;
+watch(elementRef, () => {
+  itemContext!.contentRef.value = elementRef.value;
 });
 
-const dataState = computed(() => {
-  return injectedValue?.isOpen ? "open" : "false";
+const instance = getCurrentInstance();
+onMounted(() => {
+  // @ts-ignore
+  const vnode = instance?.vnode.children?.default()?.[0];
+  if (context?.viewport && vnode) {
+    vnode.props = { ...vnode.props, ...commonProps.value };
+    vnode.parentProps = instance.vnode.props;
+    itemContext!.contentRef.value = vnode;
+    context.onViewportContentChange(itemContext!.value, vnode);
+  }
 });
 </script>
 
 <template>
-  <PopperContent v-bind="props" v-if="injectedValue?.isOpen.value">
-    <PrimitiveDiv
-      ref="primitiveElement"
-      :data-state="dataState"
-      :data-side="props.side"
-      :data-align="props.align"
-      :aria-labelledby="injectedValue?.triggerId"
-      :data-orientation="injectedValue?.orientation"
-      role="tooltip"
-      :asChild="props.asChild"
-      style="pointer-events: auto"
-    >
-      <slot />
-    </PrimitiveDiv>
-  </PopperContent>
+  <NavigationMenuContentImpl
+    v-if="!context?.viewport"
+    ref="elementRef"
+    :data-state="getOpenState(open)"
+    :style="{
+      pointerEvents: !open && context?.isRootMenu ? 'none' : undefined,
+    }"
+    v-bind="($attrs, commonProps)"
+    @escape="itemContext!.wasEscapeCloseRef.value = true"
+  >
+    <slot></slot>
+  </NavigationMenuContentImpl>
 </template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
new file mode 100644
index 000000000..4a9b48ecc
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
@@ -0,0 +1,116 @@
+<script lang="ts">
+type MotionAttribute = "to-start" | "to-end" | "from-start" | "from-end";
+
+interface NavigationMenuContentImplProps {
+  value: string;
+  triggerRef: Ref<HTMLElement | undefined>;
+  focusProxyRef: Ref<HTMLElement | undefined>;
+  wasEscapeCloseRef: Ref<boolean>;
+  // onContentFocusOutside(): void;
+  // onRootContentClose(): void;
+}
+</script>
+
+<script setup lang="ts">
+import { NAVIGATION_MENU_INJECTION_KEY } from "./NavigationMenuRoot.vue";
+import { computed, inject, ref, type Ref } from "vue";
+import {
+  focusFirst,
+  getTabbableCandidates,
+  makeContentId,
+  makeTriggerId,
+} from "./utils";
+import { useCollection } from "@/shared";
+
+const props = defineProps<NavigationMenuContentImplProps>();
+const emits = defineEmits<{
+  (e: "escape", event: KeyboardEvent): void;
+}>();
+
+const { getItems } = useCollection();
+
+const context = inject(NAVIGATION_MENU_INJECTION_KEY);
+const triggerId = makeTriggerId(context!.baseId, props.value);
+const contentId = makeContentId(context!.baseId, props.value);
+
+const prevMotionAttributeRef = ref<MotionAttribute | null>(null);
+const motionAttribute = computed(() => {
+  const items = getItems();
+  const values = items.map((item) => item.id.split("trigger-")[1]);
+  if (context?.dir === "rtl") values.reverse();
+  const index = values.indexOf(context!.modelValue.value);
+  const prevIndex = values.indexOf(context!.previousValue.value);
+  const isSelected = props.value === context?.modelValue.value;
+  const wasSelected = prevIndex === values.indexOf(props.value);
+
+  // We only want to update selected and the last selected content
+  // this avoids animations being interrupted outside of that range
+  if (!isSelected && !wasSelected) return prevMotionAttributeRef.value;
+
+  const attribute = (() => {
+    // Don't provide a direction on the initial open
+    if (index !== prevIndex) {
+      // If we're moving to this item from another
+      if (isSelected && prevIndex !== -1)
+        return index > prevIndex ? "from-end" : "from-start";
+      // If we're leaving this item for another
+      if (wasSelected && index !== -1)
+        return index > prevIndex ? "to-start" : "to-end";
+    }
+    // Otherwise we're entering from closed or leaving the list
+    // entirely and should not animate in any direction
+    return null;
+  })();
+
+  // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+  prevMotionAttributeRef.value = attribute;
+  return attribute;
+});
+
+const handleKeydown = (ev: KeyboardEvent) => {
+  console.log(ev);
+  const isMetaKey = ev.altKey || ev.ctrlKey || ev.metaKey;
+  const isTabKey = ev.key === "Tab" && !isMetaKey;
+  if (isTabKey) {
+    const candidates = getTabbableCandidates(ev.currentTarget as HTMLElement);
+    const focusedElement = document.activeElement;
+    const index = candidates.findIndex(
+      (candidate) => candidate === focusedElement
+    );
+    const isMovingBackwards = ev.shiftKey;
+    const nextCandidates = isMovingBackwards
+      ? candidates.slice(0, index).reverse()
+      : candidates.slice(index + 1, candidates.length);
+
+    if (focusFirst(nextCandidates)) {
+      // prevent browser tab keydown because we've handled focus
+      ev.preventDefault();
+    } else {
+      // If we can't focus that means we're at the edges
+      // so focus the proxy and let browser handle
+      // tab/shift+tab keypress on the proxy instead
+      props.focusProxyRef.value?.focus();
+    }
+  }
+};
+
+const handleEscape = (ev: KeyboardEvent) => {
+  emits("escape", ev);
+};
+
+defineExpose({
+  value: props.value,
+});
+</script>
+
+<template>
+  <div
+    :id="contentId"
+    :aria-labelledby="triggerId"
+    :data-motion="motionAttribute"
+    @keydown.prevent="handleKeydown"
+    @keydown.escape.prevent="handleEscape"
+  >
+    <slot></slot>
+  </div>
+</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuGroup.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuGroup.vue
deleted file mode 100644
index 296cb25ba..000000000
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuGroup.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<script lang="ts">
-import type { Ref, InjectionKey } from "vue";
-import type { DataOrientation, Direction } from "../shared/types";
-
-type TypeEnum = "single" | "multiple";
-
-export interface NavigationMenuGroupProps {
-  type?: TypeEnum;
-  value?: string;
-  defaultValue?: string;
-  disabled?: boolean;
-  rovingFocus?: boolean;
-  orientation?: DataOrientation;
-  dir?: Direction;
-  loop?: boolean;
-  modelValue?: string | string[];
-}
-
-export const NAVIGATION_MENU_GROUP_INJECTION_KEY =
-  Symbol() as InjectionKey<NavigationMenuGroupProvideValue>;
-
-export interface NavigationMenuGroupProvideValue {
-  type: TypeEnum;
-  modelValue?: Readonly<Ref<string | string[] | undefined>>;
-  changeModelValue: (value: string) => void;
-  parentElement: Ref<HTMLElement | undefined>;
-}
-</script>
-
-<script setup lang="ts">
-import { toRef, provide } from "vue";
-import { PrimitiveDiv, usePrimitiveElement } from "@/Primitive";
-
-const props = withDefaults(defineProps<NavigationMenuGroupProps>(), {
-  type: "single",
-});
-
-const emits = defineEmits(["update:modelValue"]);
-
-const { primitiveElement, currentElement: parentElement } =
-  usePrimitiveElement();
-
-provide<NavigationMenuGroupProvideValue>(NAVIGATION_MENU_GROUP_INJECTION_KEY, {
-  type: props.type,
-  modelValue: toRef(() => props.modelValue),
-  changeModelValue: (value: string) => {
-    if (props.type === "single") {
-      emits("update:modelValue", value);
-    } else {
-      let modelValueArray = props.modelValue as string[];
-      if (modelValueArray.includes(value)) {
-        let index = modelValueArray.findIndex((i) => i === value);
-        modelValueArray.splice(index, 1);
-      } else {
-        modelValueArray.push(value);
-      }
-      emits("update:modelValue", modelValueArray);
-    }
-  },
-  parentElement,
-});
-</script>
-
-<template>
-  <PrimitiveDiv
-    ref="primitiveElement"
-    role="group"
-    :dir="props.dir"
-    aria-label="Text alignment"
-  >
-    <slot />
-  </PrimitiveDiv>
-</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuIndicator.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuIndicator.vue
new file mode 100644
index 000000000..0438b20f7
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuIndicator.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed, inject, ref, watch, watchEffect } from "vue";
+import { NAVIGATION_MENU_INJECTION_KEY } from "./NavigationMenuRoot.vue";
+import { useCollection } from "@/shared";
+import { PrimitiveDiv } from "@/Primitive";
+import { useResizeObserver } from "@vueuse/core";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const { getItems } = useCollection();
+const context = inject(NAVIGATION_MENU_INJECTION_KEY);
+
+const position = ref<{ size: number; offset: number }>();
+const isHorizontal = computed(() => context?.orientation === "horizontal");
+const isVisible = computed(() => !!context?.modelValue.value);
+
+const activeTrigger = ref<HTMLElement>();
+
+watchEffect(() => {
+  if (!context?.modelValue.value) {
+    position.value = undefined;
+    return;
+  }
+  const items = getItems();
+  activeTrigger.value = items.find((item) =>
+    item.id.includes(context?.modelValue.value)
+  );
+  handlePositionChange();
+});
+
+const handlePositionChange = () => {
+  if (activeTrigger.value) {
+    position.value = {
+      size: isHorizontal.value
+        ? activeTrigger.value.offsetWidth
+        : activeTrigger.value.offsetHeight,
+      offset: isHorizontal.value
+        ? activeTrigger.value.offsetLeft
+        : activeTrigger.value.offsetTop,
+    };
+  }
+};
+
+// useResizeObserver(activeTrigger, handlePositionChange);
+useResizeObserver(context!.indicatorTrack, handlePositionChange);
+</script>
+
+<template>
+  <Teleport
+    v-if="context?.indicatorTrack.value"
+    :to="context?.indicatorTrack.value"
+  >
+    <PrimitiveDiv
+      v-if="position"
+      aria-hidden
+      :data-state="isVisible ? 'visible' : 'hidden'"
+      :data-orientation="context.orientation"
+      :style="{
+        position: 'absolute',
+        ...(isHorizontal
+          ? {
+              left: 0,
+              width: position.size + 'px',
+              transform: `translateX(${position.offset}px)`,
+            }
+          : {
+              top: 0,
+              height: position.size + 'px',
+              transform: `translateY(${position.offset}px)`,
+            }),
+      }"
+      v-bind="$attrs"
+    >
+      <slot></slot>
+    </PrimitiveDiv>
+  </Teleport>
+</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
index 534af6b6c..f36cbc861 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
@@ -1,75 +1,89 @@
-<script setup lang="ts">
-import { inject } from "vue";
-import BaseMenuItem from "../shared/component/BaseMenuItem.vue";
-import { useArrowNavigation } from "@/shared/useArrowNavigation";
-import {
-  NAVIGATION_MENU_INJECTION_KEY,
-  type NavigationMenuProvideValue,
-} from "./NavigationMenuRoot.vue";
-import {
-  NAVIGATION_MENU_SUB_INJECTION_KEY,
-  type NavigationMenuSubProvideValue,
-} from "./NavigationMenuSub.vue";
-
-interface NavigationMenuItemProps {
-  asChild?: boolean;
+<script lang="ts">
+export interface NavigationMenuItemProps {
   value?: string;
-  disabled?: boolean;
-  //onSelect?: void;
-  textValue?: string;
 }
 
-const rootInjectedValue = inject<NavigationMenuProvideValue>(
-  NAVIGATION_MENU_INJECTION_KEY
-);
+export type NavigationMenuItemContextValue = {
+  value: string;
+  triggerRef: Ref<HTMLElement | undefined>;
+  contentRef: Ref<VNode | undefined>;
+  focusProxyRef: Ref<HTMLElement | undefined>;
+  wasEscapeCloseRef: Ref<boolean>;
+  onEntryKeyDown(): void;
+  // onFocusProxyEnter(side: 'start' | 'end'): void;
+  // onRootContentClose(): void;
+  // onContentFocusOutside(): void;
+};
 
-const subInjectedValue = inject<NavigationMenuSubProvideValue>(
-  NAVIGATION_MENU_SUB_INJECTION_KEY
-);
+export const NAVIGATION_MENU_ITEM_INJECTION_KEY =
+  Symbol() as InjectionKey<NavigationMenuItemContextValue>;
+</script>
+
+<script setup lang="ts">
+import { NAVIGATION_MENU_INJECTION_KEY } from "./NavigationMenuRoot.vue";
+import {
+  provide,
+  ref,
+  type InjectionKey,
+  type Ref,
+  type VNode,
+  inject,
+} from "vue";
+import { PrimitiveLi } from "@/Primitive";
+import { useArrowNavigation, useCollection, useId } from "@/shared";
+import { getTabbableCandidates, focusFirst } from "./utils";
+import { unrefElement } from "@vueuse/core";
 
 const props = defineProps<NavigationMenuItemProps>();
+const { getItems } = useCollection();
+const context = inject(NAVIGATION_MENU_INJECTION_KEY);
 
-function handleClick() {
-  rootInjectedValue!.changeValue(undefined);
-  rootInjectedValue!.changeSelected(
-    rootInjectedValue!.triggerElement.value as HTMLElement
-  );
-}
+const value = props.value || useId();
+const triggerRef = ref<HTMLElement>();
+const contentRef = ref<VNode>();
+const focusProxyRef = ref<HTMLElement>();
+
+const wasEscapeCloseRef = ref(false);
 
-function handleHorizontalKeydown(e: KeyboardEvent) {
-  const newSelectedElement = useArrowNavigation(
-    e,
-    rootInjectedValue?.triggerElement.value as HTMLElement,
-    undefined,
-    {
-      arrowKeyOptions: "horizontal",
-      itemsArray: rootInjectedValue?.triggerItemsArray,
+provide(NAVIGATION_MENU_ITEM_INJECTION_KEY, {
+  value,
+  triggerRef,
+  contentRef,
+  focusProxyRef,
+  wasEscapeCloseRef,
+  onEntryKeyDown: (side = "start") => {
+    // @ts-ignore
+    const el = contentRef.value?.children?.[0]?.el.parentElement as HTMLElement;
+    if (el) {
+      // @ts-ignore
+      const candidates = getTabbableCandidates(unrefElement(el));
+      console.log(el, candidates);
+      if (candidates.length)
+        focusFirst(side === "start" ? candidates : candidates.reverse());
     }
-  );
-  if (newSelectedElement) {
-    rootInjectedValue?.changeSelected(newSelectedElement);
-    rootInjectedValue?.changeValue(newSelectedElement.id);
+  },
+});
+
+const handleKeydown = (ev: KeyboardEvent) => {
+  const currentFocus = document.activeElement as HTMLElement;
+  if (ev.keyCode === 32 || ev.key === "Enter") {
+    (ev.target as HTMLElement).click();
+    return;
   }
-}
 
-function handleEscapeKeydown(e: KeyboardEvent) {
-  rootInjectedValue!.changeValue(undefined);
-  rootInjectedValue!.changeSelected(
-    rootInjectedValue!.triggerElement.value as HTMLElement
-  );
-}
+  const newSelectedElement = useArrowNavigation(ev, currentFocus, undefined, {
+    arrowKeyOptions: "horizontal",
+    itemsArray: getItems(),
+  });
+
+  newSelectedElement?.focus();
+
+  // context?.onItemSelect(newSelectedElement?.id.split("trigger-")[1] ?? "");
+};
 </script>
 
 <template>
-  <BaseMenuItem
-    :disabled="props.disabled"
-    :rootProvider="rootInjectedValue"
-    :subProvider="subInjectedValue"
-    :orientation="rootInjectedValue?.orientation"
-    @handle-click="handleClick"
-    @horizontal-keydown="handleHorizontalKeydown"
-    @escape-keydown="handleEscapeKeydown"
-  >
-    <slot />
-  </BaseMenuItem>
+  <PrimitiveLi @keydown.prevent="handleKeydown">
+    <slot></slot>
+  </PrimitiveLi>
 </template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuItemIndicator.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuItemIndicator.vue
deleted file mode 100644
index 2077b040c..000000000
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuItemIndicator.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts">
-export interface NavigationMenuItemIndicatorProps {
-  asChild?: boolean;
-  forceMount?: boolean;
-}
-</script>
-
-<script setup lang="ts">
-import { inject } from "vue";
-import { PrimitiveSpan } from "@/Primitive";
-import { NAVIGATION_MENU_ITEM_SYMBOL } from "./utils";
-const context = inject(NAVIGATION_MENU_ITEM_SYMBOL);
-</script>
-
-<template>
-  <PrimitiveSpan v-if="context?.modelValue.value" style="pointer-events: none">
-    <slot />
-  </PrimitiveSpan>
-</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuLabel.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuLabel.vue
deleted file mode 100644
index 8a54cb36b..000000000
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuLabel.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-import { PrimitiveLabel } from "@/Primitive";
-
-interface NavigationMenuLabelProps {
-  asChild?: boolean;
-  for?: string;
-}
-</script>
-
-<script setup lang="ts">
-const props = defineProps<NavigationMenuLabelProps>();
-</script>
-
-<template>
-  <PrimitiveLabel :for="props.for"><slot /></PrimitiveLabel>
-</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuLink.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuLink.vue
new file mode 100644
index 000000000..18fa7d371
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuLink.vue
@@ -0,0 +1,27 @@
+<script lang="ts">
+export interface NavigationMenuLinkProps {
+  active?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { PrimitiveA } from "@/Primitive";
+const LINK_SELECT = "navigationMenu.linkSelect";
+
+defineProps<NavigationMenuLinkProps>();
+
+const handleClick = (ev: MouseEvent) => {
+  //  TODO: dispatch custom event (https://github.com/radix-ui/primitives/blob/main/packages/react/navigation-menu/src/NavigationMenu.tsx#L604)
+};
+</script>
+
+<template>
+  <PrimitiveA
+    :data-active="active ? '' : undefined"
+    :aria-current="active ? 'page' : undefined"
+    @click="handleClick"
+    data-radix-vue-collection-item
+  >
+    <slot></slot>
+  </PrimitiveA>
+</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuList.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuList.vue
new file mode 100644
index 000000000..354fec97d
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuList.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { inject, onMounted } from "vue";
+import { NAVIGATION_MENU_INJECTION_KEY } from "./NavigationMenuRoot.vue";
+import { PrimitiveDiv, PrimitiveUl, usePrimitiveElement } from "@/Primitive";
+import { useCollection } from "@/shared";
+
+const context = inject(NAVIGATION_MENU_INJECTION_KEY);
+const { primitiveElement, currentElement } = usePrimitiveElement();
+const { setCollection } = useCollection();
+setCollection(currentElement);
+
+onMounted(() => {
+  context?.onIndicatorTrackChange(currentElement.value);
+});
+
+defineOptions({
+  inheritAttrs: false,
+});
+</script>
+
+<template>
+  <PrimitiveDiv ref="primitiveElement" style="position: relative">
+    <PrimitiveUl v-bind="$attrs" :data-orientation="context?.orientation">
+      <slot></slot>
+    </PrimitiveUl>
+  </PrimitiveDiv>
+</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuMenu.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuMenu.vue
deleted file mode 100644
index 57518837d..000000000
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuMenu.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<script lang="ts">
-import type { Ref, InjectionKey } from "vue";
-import type { DataOrientation } from "../shared/types";
-
-export interface NavigationMenuMenuRootProps {
-  value?: string;
-}
-
-export const NAVIGATION_MENU_MENU_INJECTION_KEY =
-  Symbol() as InjectionKey<NavigationMenuMenuProvideValue>;
-
-export type NavigationMenuMenuProvideValue = {
-  value: string;
-  isOpen: Ref<boolean>;
-  triggerElement: Ref<HTMLElement | undefined>;
-  itemsArray: HTMLElement[];
-  triggerId: string;
-  contentId: string;
-  orientation: DataOrientation;
-  parentContext?: NavigationMenuMenuProvideValue;
-};
-</script>
-
-<script setup lang="ts">
-import { computed, inject, provide, ref } from "vue";
-import { PopperRoot } from "@/Popper";
-import { useId } from "@/shared";
-import { NAVIGATION_MENU_INJECTION_KEY } from "./NavigationMenuRoot.vue";
-
-const props = defineProps<NavigationMenuMenuRootProps>();
-
-const value = props.value ?? useId();
-const rootInjectedValue = inject(NAVIGATION_MENU_INJECTION_KEY);
-
-const triggerElement = ref<HTMLElement>();
-
-const isOpen = computed(() => rootInjectedValue?.modelValue.value === value);
-
-const parentContext = inject(NAVIGATION_MENU_MENU_INJECTION_KEY);
-provide<NavigationMenuMenuProvideValue>(NAVIGATION_MENU_MENU_INJECTION_KEY, {
-  value,
-  isOpen,
-  triggerElement,
-  itemsArray: [],
-  triggerId: value,
-  contentId: useId(),
-  parentContext,
-  orientation: "vertical",
-});
-</script>
-
-<template>
-  <PopperRoot>
-    <slot />
-  </PopperRoot>
-</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuPortal.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuPortal.vue
deleted file mode 100644
index bdee234e6..000000000
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuPortal.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<!--
-<script lang="ts">
-export interface DropdwonMenuPortalProps {
-  forceMount?: boolean;
-  container?: HTMLElement | string;
-}
-</script>
--->
-
-<template>
-  <Teleport to="body">
-    <slot />
-  </Teleport>
-</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuRadioGroup.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuRadioGroup.vue
deleted file mode 100644
index 9e1738308..000000000
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuRadioGroup.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<script lang="ts">
-import type { Ref } from "vue";
-import { useVModel } from "@vueuse/core";
-
-export interface RadioGroupRootProps {
-  asChild?: boolean;
-  value?: string;
-  defaultValue?: string;
-  //disabled?: boolean;
-  //onValueChange?: void;
-  modelValue?: string | string[];
-}
-
-export const RADIO_GROUP_INJECTION_KEY = "RadioGroup" as const;
-
-export interface RadioGroupProvideValue {
-  modelValue?: Readonly<Ref<string | string[] | undefined>>;
-  changeModelValue: (value?: string) => void;
-  parentElement: Ref<HTMLElement | undefined>;
-}
-</script>
-
-<script setup lang="ts">
-import { provide } from "vue";
-import { PrimitiveDiv, usePrimitiveElement } from "@/Primitive";
-
-const props = defineProps<RadioGroupRootProps>();
-
-const emits = defineEmits(["update:modelValue"]);
-
-const { primitiveElement, currentElement: parentElement } =
-  usePrimitiveElement();
-
-const modelValue = useVModel(props, "modelValue", emits, {
-  passive: true,
-});
-
-provide<RadioGroupProvideValue>(RADIO_GROUP_INJECTION_KEY, {
-  modelValue,
-  changeModelValue: (value?: string) => {
-    modelValue.value = value;
-  },
-  parentElement,
-});
-</script>
-
-<template>
-  <PrimitiveDiv
-    ref="primitiveElement"
-    role="radiogroup"
-    aria-label="radiogroup"
-  >
-    <slot />
-  </PrimitiveDiv>
-</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuRadioItem.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuRadioItem.vue
deleted file mode 100644
index 4757b032e..000000000
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuRadioItem.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<script setup lang="ts">
-import { inject, computed, provide } from "vue";
-import BaseMenuItem from "../shared/component/BaseMenuItem.vue";
-import { useArrowNavigation } from "@/shared/useArrowNavigation";
-import {
-  NAVIGATION_MENU_INJECTION_KEY,
-  type NavigationMenuProvideValue,
-} from "./NavigationMenuRoot.vue";
-import {
-  RADIO_GROUP_INJECTION_KEY,
-  type RadioGroupProvideValue,
-} from "./NavigationMenuRadioGroup.vue";
-import { NAVIGATION_MENU_ITEM_SYMBOL } from "./utils";
-
-interface RadioGroupItemProps {
-  asChild?: boolean;
-  value?: string;
-  disabled?: boolean;
-  id?: string;
-  name?: string;
-  onSelect?: void;
-  textValue?: string;
-}
-
-const rootInjectedValue = inject<NavigationMenuProvideValue>(
-  NAVIGATION_MENU_INJECTION_KEY
-);
-const radioInjectedValue = inject<RadioGroupProvideValue>(
-  RADIO_GROUP_INJECTION_KEY
-);
-
-const props = defineProps<RadioGroupItemProps>();
-
-const radioDataState = computed(() => {
-  return radioInjectedValue?.modelValue?.value === props.value ? "on" : "off";
-});
-
-function handleClick() {
-  if (rootInjectedValue?.selectedElement.value) {
-    return radioInjectedValue?.changeModelValue(props.value);
-  }
-}
-
-const modelValue = computed(
-  () => radioInjectedValue?.modelValue?.value === props.value
-);
-provide(NAVIGATION_MENU_ITEM_SYMBOL, {
-  modelValue,
-});
-
-function handleHorizontalKeydown(e: KeyboardEvent) {
-  const newSelectedElement = useArrowNavigation(
-    e,
-    rootInjectedValue?.triggerElement.value as HTMLElement,
-    undefined,
-    {
-      arrowKeyOptions: "horizontal",
-      itemsArray: rootInjectedValue?.triggerItemsArray,
-    }
-  );
-  if (newSelectedElement) {
-    rootInjectedValue?.changeSelected(newSelectedElement);
-    rootInjectedValue?.changeValue(newSelectedElement.id);
-  }
-}
-
-function handleEscapeKeydown(e: KeyboardEvent) {
-  rootInjectedValue!.changeValue(undefined);
-  rootInjectedValue!.changeSelected(
-    rootInjectedValue!.triggerElement.value as HTMLElement
-  );
-}
-</script>
-
-<template>
-  <BaseMenuItem
-    :disabled="props.disabled"
-    :rootProvider="rootInjectedValue"
-    :orientation="rootInjectedValue?.orientation"
-    :data-radix-vue-radio-value="props.value"
-    @handle-click="handleClick"
-    @horizontal-keydown="handleHorizontalKeydown"
-    @escape-keydown="handleEscapeKeydown"
-    role="menuitemradio"
-    :data-state="radioDataState"
-  >
-    <slot />
-  </BaseMenuItem>
-</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuRoot.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuRoot.vue
index 2b012384a..cf8d22cbc 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuRoot.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuRoot.vue
@@ -1,98 +1,144 @@
 <script lang="ts">
-import type { Ref, InjectionKey } from "vue";
-import type { DataOrientation, Direction } from "../shared/types";
+import { type InjectionKey, type Ref } from "vue";
+import type { Direction, Orientation } from "./utils";
+import { useCollection, useId } from "@/shared";
 
-export interface NavigationMenuRootProps {
+export interface NavigationMenuProps {
   modelValue?: string;
   defaultValue?: string;
-  orientation?: DataOrientation;
+  changeValue?: (value: string) => void;
   dir?: Direction;
+  orientation?: Orientation;
+  /**
+   * The duration from when the pointer enters the trigger until the tooltip gets opened.
+   * @defaultValue 200
+   */
+  delayDuration?: number;
+  /**
+   * How much time a user has to enter another trigger without incurring a delay again.
+   * @defaultValue 300
+   */
+  skipDelayDuration?: number;
 }
 
-export const NAVIGATION_MENU_INJECTION_KEY =
-  Symbol() as InjectionKey<NavigationMenuProvideValue>;
-
-export type NavigationMenuProvideValue = {
-  selectedElement: Ref<HTMLElement | undefined>;
-  changeSelected: (value: HTMLElement) => void;
-  modelValue: Ref<string | undefined>;
-  changeValue(value?: string): void;
-  triggerElement: Ref<HTMLElement | undefined>;
-  triggerItemsArray: HTMLElement[];
-  itemsArray: HTMLElement[];
-  orientation: DataOrientation;
-};
+export interface NavigationMenuContextValue {
+  isRootMenu: boolean;
+  modelValue: Ref<string>;
+  previousValue: Ref<string>;
+  baseId: string;
+  dir: Direction;
+  orientation: Orientation;
+  rootNavigationMenu: Ref<HTMLElement | undefined>;
+  indicatorTrack: Ref<HTMLElement | undefined>;
+  onIndicatorTrackChange(indicatorTrack: HTMLElement | undefined): void;
+  viewport: Ref<HTMLElement | undefined>;
+  onViewportChange(viewport: HTMLElement | undefined): void;
+  viewportContent: Ref<Map<string, VNode>>;
+  onViewportContentChange(contentValue: string, contentData: VNode): void;
+  onViewportContentRemove(contentValue: string): void;
+  onTriggerEnter(itemValue: string): void;
+  onTriggerLeave(): void;
+  onContentEnter(itemValue: string): void;
+  onContentLeave(): void;
+  onItemSelect(itemValue: string): void;
+  // onItemDismiss(): void;
+}
 
-export default {
-  inheritAttrs: false,
-};
+export const NAVIGATION_MENU_INJECTION_KEY =
+  Symbol() as InjectionKey<NavigationMenuContextValue>;
 </script>
 
 <script setup lang="ts">
-import { provide, ref, watch } from "vue";
-import { PopperRoot } from "@/Popper";
-import { useVModel, useActiveElement } from "@vueuse/core";
+import { useDebounceFn, useVModel } from "@vueuse/core";
+import { provide, ref, type VNode } from "vue";
+import { PrimitiveNav, usePrimitiveElement } from "@/Primitive";
 
-const props = withDefaults(defineProps<NavigationMenuRootProps>(), {
+const props = withDefaults(defineProps<NavigationMenuProps>(), {
+  modelValue: "",
+  delayDuration: 200,
+  skipDelayDuration: 300,
   orientation: "horizontal",
+  dir: "ltr",
 });
 
-const emit = defineEmits<{
-  (e: "update:modelValue", value: boolean): void;
-  (e: "update:open", value: boolean): void;
+const emits = defineEmits<{
+  (e: "update:modelValue", value: string): void;
 }>();
 
-const modelValue = useVModel(props, "modelValue", emit, {
+const modelValue = useVModel(props, "modelValue", emits, {
   passive: true,
-  defaultValue: props.defaultValue,
+  defaultValue: props.defaultValue ?? "",
 });
+const previousValue = ref("");
 
-const selectedElement = ref<HTMLElement>();
-const triggerElement = ref<HTMLElement>();
-const triggerItemsArray: HTMLElement[] = [];
-const NavigationMenuContainerElement = ref<HTMLElement>();
-const activeElement = useActiveElement();
+const { primitiveElement, currentElement: rootNavigationMenu } =
+  usePrimitiveElement();
+const { createCollection } = useCollection();
+createCollection();
 
-provide<NavigationMenuProvideValue>(NAVIGATION_MENU_INJECTION_KEY, {
-  selectedElement: selectedElement,
-  changeSelected: (value: HTMLElement) => {
-    selectedElement.value = value;
-    selectedElement.value?.focus();
-  },
+const indicatorTrack = ref<HTMLElement>();
+const viewport = ref<HTMLElement>();
+const viewportContent = ref<Map<string, VNode>>(new Map());
+
+const debouncedFn = useDebounceFn((val: string) => {
+  previousValue.value = modelValue.value;
+  modelValue.value = val;
+}, props.delayDuration);
+
+provide(NAVIGATION_MENU_INJECTION_KEY, {
+  isRootMenu: true,
   modelValue,
-  changeValue: (value?: string) => {
-    modelValue.value = value;
-  },
-  triggerElement,
-  triggerItemsArray,
-  itemsArray: [],
+  previousValue,
+  baseId: useId(),
+  dir: props.dir,
   orientation: props.orientation,
-});
-
-watch(
-  activeElement,
-  () => {
-    if (activeElement.value === NavigationMenuContainerElement.value) {
-      if (triggerElement.value) {
-        triggerElement.value.focus();
-      } else if (triggerItemsArray.length) {
-        triggerItemsArray[0].focus();
-      }
-    }
+  rootNavigationMenu,
+  indicatorTrack,
+  onIndicatorTrackChange: (val) => {
+    indicatorTrack.value = val;
   },
-  { immediate: true }
-);
+  viewport,
+  onViewportChange: (val) => {
+    viewport.value = val;
+  },
+  viewportContent,
+  onViewportContentChange: (contentValue, contentData) => {
+    const prev = viewportContent.value;
+    viewportContent.value = new Map(prev.set(contentValue, contentData));
+  },
+  onViewportContentRemove: (contentValue) => {
+    const prev = viewportContent.value;
+    if (!prev.has(contentValue)) return prev;
+    prev.delete(contentValue);
+    viewportContent.value = new Map(prev);
+  },
+  onTriggerEnter: (val) => {
+    debouncedFn(val);
+  },
+  onTriggerLeave: () => {
+    debouncedFn("");
+  },
+  onContentEnter: (val) => {
+    debouncedFn(val);
+  },
+  onContentLeave: () => {
+    debouncedFn("");
+  },
+  onItemSelect: (val) => {
+    // When selecting item we trigger update immediately
+    previousValue.value = modelValue.value;
+    modelValue.value = val;
+  },
+});
 </script>
 
 <template>
-  <PopperRoot>
-    <div
-      role="NavigationMenu"
-      v-bind="$attrs"
-      ref="NavigationMenuContainerElement"
-      tabindex="0"
-    >
-      <slot />
-    </div>
-  </PopperRoot>
+  <PrimitiveNav
+    ref="primitiveElement"
+    aria-label="Main"
+    :data-orientation="orientation"
+    :dir="dir"
+  >
+    <slot></slot>
+  </PrimitiveNav>
 </template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuSeparator.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuSeparator.vue
deleted file mode 100644
index 8666e8237..000000000
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuSeparator.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-import BaseSeparator from "../shared/component/BaseSeparator.vue";
-import type { DataOrientation } from "../shared/types";
-
-export interface NavigationMenuSeparatorProps {
-  orientation?: DataOrientation;
-  decorative?: boolean;
-  asChild?: boolean;
-}
-</script>
-
-<script setup lang="ts">
-const props = defineProps<NavigationMenuSeparatorProps>();
-</script>
-
-<template>
-  <BaseSeparator
-    :orientation="props.orientation"
-    :decorative="props.decorative"
-  />
-</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuSub.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuSub.vue
deleted file mode 100644
index c9fbe7903..000000000
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuSub.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<script lang="ts">
-import type { Ref, InjectionKey } from "vue";
-import type { DataOrientation } from "@/shared/types";
-import { useVModel } from "@vueuse/core";
-
-export interface NavigationMenuSubRootProps {
-  modelValue?: boolean;
-  defaultOpen?: boolean;
-  open?: boolean;
-  //onOpenChange?: void;
-  delayDuration?: number;
-  disableHoverableContent?: boolean;
-  orientation?: DataOrientation;
-}
-
-export const NAVIGATION_MENU_SUB_INJECTION_KEY =
-  Symbol() as InjectionKey<NavigationMenuSubProvideValue>;
-
-export type NavigationMenuSubProvideValue = {
-  modelValue: Readonly<Ref<boolean>>;
-  showTooltip(): void;
-  hideTooltip(): void;
-  triggerElement: Ref<HTMLElement | undefined>;
-  itemsArray: HTMLElement[];
-  orientation: DataOrientation;
-  triggerId: string;
-  contentId: string;
-  parentContext?: NavigationMenuSubProvideValue;
-};
-</script>
-
-<script setup lang="ts">
-import { inject, provide, ref } from "vue";
-import { PopperRoot } from "@/Popper";
-import { useId } from "@/shared";
-
-const props = withDefaults(defineProps<NavigationMenuSubRootProps>(), {
-  delayDuration: 700,
-  orientation: "vertical",
-});
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: boolean): void;
-}>();
-
-const modelValue = useVModel(props, "modelValue", emit, {
-  passive: true,
-});
-
-const triggerElement = ref<HTMLElement>();
-
-const parentContext = inject(NAVIGATION_MENU_SUB_INJECTION_KEY);
-
-provide<NavigationMenuSubProvideValue>(NAVIGATION_MENU_SUB_INJECTION_KEY, {
-  modelValue,
-  showTooltip: () => {
-    modelValue.value = true;
-  },
-  hideTooltip: () => {
-    modelValue.value = false;
-  },
-  triggerElement,
-  itemsArray: [],
-  orientation: props.orientation,
-  triggerId: useId(),
-  contentId: useId(),
-  parentContext,
-});
-</script>
-
-<template>
-  <PopperRoot>
-    <slot />
-  </PopperRoot>
-</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuSubContent.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuSubContent.vue
deleted file mode 100644
index d5602a74b..000000000
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuSubContent.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<script lang="ts">
-export type Boundary = Element | null | Array<Element | null>;
-
-export interface NavigationMenuSubContentProps extends PopperContentProps {
-  asChild?: boolean;
-  loop?: boolean; //false
-  //onOpenAutoFocus?: void;
-  //onCloseAutoFocus?: void;
-  //onEscapeKeyDown?: void;
-  //onPointerDownOutside?: void;
-  //onInteractOutside?: void;
-}
-</script>
-
-<script setup lang="ts">
-import { inject, watchEffect, watch } from "vue";
-import { PrimitiveDiv, usePrimitiveElement } from "@/Primitive";
-import {
-  NAVIGATION_MENU_INJECTION_KEY,
-  type NavigationMenuProvideValue,
-} from "./NavigationMenuRoot.vue";
-import {
-  NAVIGATION_MENU_SUB_INJECTION_KEY,
-  type NavigationMenuSubProvideValue,
-} from "./NavigationMenuSub.vue";
-import { PopperContent, type PopperContentProps } from "@/Popper";
-import { useCollection } from "@/shared";
-import { onClickOutside } from "@vueuse/core";
-
-const rootInjectedValue = inject<NavigationMenuProvideValue>(
-  NAVIGATION_MENU_INJECTION_KEY
-);
-
-const injectedValue = inject<NavigationMenuSubProvideValue>(
-  NAVIGATION_MENU_SUB_INJECTION_KEY
-);
-
-const props = withDefaults(defineProps<NavigationMenuSubContentProps>(), {
-  side: "right",
-  align: "start",
-  orientation: "horizontal",
-  avoidCollisions: true,
-});
-
-const { primitiveElement, currentElement: tooltipContentElement } =
-  usePrimitiveElement();
-
-const { createCollection } = useCollection();
-createCollection(tooltipContentElement);
-
-watchEffect(() => {
-  if (tooltipContentElement.value) {
-    if (injectedValue?.modelValue.value) {
-      fillItemsArray();
-    }
-  }
-});
-
-watch(
-  () => rootInjectedValue?.selectedElement.value,
-  (n) => {
-    if (!injectedValue?.modelValue.value) return;
-    const siblingsElement = Array.from(
-      n
-        ?.closest('[role="tooltip"]')
-        ?.querySelectorAll(
-          "[data-radix-vue-collection-item]:not([data-disabled])"
-        ) ?? []
-    ) as HTMLElement[];
-
-    if (!siblingsElement?.length) return;
-    if (siblingsElement.includes(injectedValue.triggerElement.value!)) {
-      if (
-        rootInjectedValue?.selectedElement.value !==
-        injectedValue?.triggerElement.value
-      ) {
-        injectedValue?.hideTooltip();
-      }
-    }
-  }
-);
-
-function fillItemsArray() {
-  const allToggleItem = Array.from(
-    tooltipContentElement.value!.querySelectorAll(
-      "[data-radix-vue-collection-item]:not([data-disabled])"
-    )
-  ) as HTMLElement[];
-  injectedValue!.itemsArray = allToggleItem;
-  return allToggleItem;
-}
-
-onClickOutside(tooltipContentElement, (event) => {
-  const target = event.target as HTMLElement;
-  if (target.closest('[role="menuitem"]')) return;
-  injectedValue?.hideTooltip();
-});
-</script>
-
-<template>
-  <PopperContent v-bind="props" v-if="injectedValue?.modelValue.value">
-    <PrimitiveDiv
-      ref="primitiveElement"
-      :data-state="injectedValue?.modelValue.value ? 'open' : 'closed'"
-      :data-side="props.side"
-      :data-align="props.align"
-      :data-orientation="injectedValue.orientation"
-      :aria-labelledby="injectedValue.triggerId"
-      role="tooltip"
-      :asChild="props.asChild"
-      style="pointer-events: auto"
-    >
-      <slot />
-    </PrimitiveDiv>
-  </PopperContent>
-</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuSubTrigger.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuSubTrigger.vue
deleted file mode 100644
index c619e54ad..000000000
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuSubTrigger.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<script lang="ts">
-export interface NavigationMenuSubTriggerProps {
-  asChild?: boolean;
-  disabled?: boolean;
-  textValue?: string;
-}
-</script>
-
-<script setup lang="ts">
-import { inject, onMounted, computed, nextTick } from "vue";
-import {
-  NAVIGATION_MENU_INJECTION_KEY,
-  type NavigationMenuProvideValue,
-} from "./NavigationMenuRoot.vue";
-import {
-  NAVIGATION_MENU_SUB_INJECTION_KEY,
-  type NavigationMenuSubProvideValue,
-} from "./NavigationMenuSub.vue";
-import { PopperAnchor } from "@/Popper";
-import { usePrimitiveElement } from "@/Primitive";
-import { useArrowNavigation } from "@/shared/useArrowNavigation";
-import BaseMenuItem from "../shared/component/BaseMenuItem.vue";
-
-const rootInjectedValue = inject<NavigationMenuProvideValue>(
-  NAVIGATION_MENU_INJECTION_KEY
-);
-
-const injectedValue = inject<NavigationMenuSubProvideValue>(
-  NAVIGATION_MENU_SUB_INJECTION_KEY
-);
-
-const { primitiveElement, currentElement } = usePrimitiveElement();
-
-onMounted(() => {
-  injectedValue!.triggerElement.value = currentElement.value;
-});
-
-async function openAndSelectFirstElement() {
-  injectedValue?.showTooltip();
-
-  await nextTick();
-  const el = injectedValue?.itemsArray?.[0];
-  rootInjectedValue!.selectedElement.value = el;
-  el?.focus();
-}
-
-function handleClick() {
-  if (!injectedValue?.modelValue.value) {
-    openAndSelectFirstElement();
-  }
-}
-
-async function handleHorizontalKeydown(e: KeyboardEvent) {
-  if (e.key === "ArrowRight") {
-    openAndSelectFirstElement();
-  } else {
-    const newSelectedElement = useArrowNavigation(
-      e,
-      rootInjectedValue?.triggerElement.value as HTMLElement,
-      undefined,
-      {
-        arrowKeyOptions: "horizontal",
-        itemsArray: rootInjectedValue?.triggerItemsArray,
-      }
-    );
-    if (newSelectedElement) {
-      rootInjectedValue?.changeSelected(newSelectedElement);
-      newSelectedElement.focus();
-      if (rootInjectedValue?.modelValue.value) {
-        rootInjectedValue?.changeValue(newSelectedElement.id);
-      }
-    }
-  }
-}
-
-const dataState = computed(() => {
-  return injectedValue?.modelValue.value ? "open" : "closed";
-});
-
-function handleMouseover() {
-  return injectedValue?.showTooltip();
-}
-
-function handleEscapeKeydown(e: KeyboardEvent) {
-  rootInjectedValue!.changeValue(undefined);
-  rootInjectedValue!.changeSelected(
-    rootInjectedValue!.triggerElement.value as HTMLElement
-  );
-}
-</script>
-
-<template>
-  <PopperAnchor asChild>
-    <BaseMenuItem
-      ref="primitiveElement"
-      :id="injectedValue?.triggerId"
-      :rootProvider="rootInjectedValue"
-      :subProvider="injectedValue?.parentContext"
-      :aria-expanded="injectedValue?.modelValue.value"
-      :aria-controls="injectedValue?.contentId"
-      :data-state="dataState"
-      :data-orientation="rootInjectedValue?.orientation"
-      aria-haspopup="menu"
-      @handle-click="handleClick"
-      @mouseover="handleMouseover"
-      @horizontal-keydown="handleHorizontalKeydown"
-      @escape-keydown="handleEscapeKeydown"
-    >
-      <slot />
-    </BaseMenuItem>
-  </PopperAnchor>
-</template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue
index 89aaf8e40..db76ed5e3 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue
@@ -1,165 +1,100 @@
-<script lang="ts">
-export interface NavigationMenuMenuTriggerProps {
-  asChild?: boolean;
-  disabled?: boolean;
-  textValue?: string;
-}
-
-export default {
-  inheritAttrs: false,
-};
-</script>
-
 <script setup lang="ts">
-import { inject, onMounted, computed, nextTick, watchEffect, watch } from "vue";
-import {
-  NAVIGATION_MENU_INJECTION_KEY,
-  type NavigationMenuProvideValue,
-} from "./NavigationMenuRoot.vue";
-import {
-  NAVIGATION_MENU_MENU_INJECTION_KEY,
-  type NavigationMenuMenuProvideValue,
-} from "./NavigationMenuMenu.vue";
-import { PopperAnchor } from "@/Popper";
+import { NAVIGATION_MENU_INJECTION_KEY } from "./NavigationMenuRoot.vue";
+import { NAVIGATION_MENU_ITEM_INJECTION_KEY } from "./NavigationMenuItem.vue";
+import { computed, inject, onMounted, ref } from "vue";
 import { PrimitiveButton, usePrimitiveElement } from "@/Primitive";
-import { useArrowNavigation } from "@/shared/useArrowNavigation";
-import { useActiveElement } from "@vueuse/core";
+import { makeTriggerId, makeContentId, getOpenState } from "./utils";
 
-const rootInjectedValue = inject<NavigationMenuProvideValue>(
-  NAVIGATION_MENU_INJECTION_KEY
-);
+const props = defineProps<{
+  disabled?: boolean;
+}>();
+defineOptions({
+  inheritAttrs: false,
+});
 
-const injectedValue = inject<NavigationMenuMenuProvideValue>(
-  NAVIGATION_MENU_MENU_INJECTION_KEY
-);
+const context = inject(NAVIGATION_MENU_INJECTION_KEY);
+const itemContext = inject(NAVIGATION_MENU_ITEM_INJECTION_KEY);
 
-const props = defineProps<NavigationMenuMenuTriggerProps>();
+const { primitiveElement, currentElement: triggerElement } =
+  usePrimitiveElement();
+const triggerId = makeTriggerId(context!.baseId, itemContext!.value);
+const contentId = makeContentId(context!.baseId, itemContext!.value);
+const hasPointerMoveOpenedRef = ref(false);
+const wasClickCloseRef = ref(false);
 
-const { primitiveElement, currentElement } = usePrimitiveElement();
-const activeElement = useActiveElement();
+const open = computed(() => itemContext?.value === context?.modelValue.value);
 
 onMounted(() => {
-  injectedValue!.triggerElement.value = currentElement.value;
-  rootInjectedValue!.triggerItemsArray.push(currentElement.value!);
+  itemContext!.triggerRef = triggerElement;
 });
 
-async function openAndSelectFirstElement() {
-  rootInjectedValue?.changeValue(injectedValue?.value);
-
-  await nextTick();
-  const el = injectedValue?.itemsArray?.[0];
-  rootInjectedValue!.selectedElement.value = el;
-  el?.focus();
-}
-
-function handleKeydown(e: KeyboardEvent) {
-  if (e.key === "Escape") {
-    return handleCloseMenu();
-  }
-  if (e.keyCode === 32 || e.key === "Enter") {
-    (e.target as HTMLElement).click();
-    return;
-  }
-  if (e.key === "ArrowDown") {
-    return openAndSelectFirstElement();
-  }
+const handlePointerEnter = (ev: PointerEvent) => {
+  wasClickCloseRef.value = false;
+  itemContext!.wasEscapeCloseRef.value = false;
+};
 
-  const newSelectedElement = useArrowNavigation(
-    e,
-    currentElement.value!,
-    currentElement.value!.parentElement! as HTMLElement,
-    {
-      arrowKeyOptions: "horizontal",
-    }
-  );
-  if (newSelectedElement) {
-    rootInjectedValue?.changeSelected(newSelectedElement);
-    newSelectedElement.focus();
-    if (rootInjectedValue?.modelValue.value) {
-      rootInjectedValue?.changeValue(newSelectedElement.id);
-    }
+const handlePointerMove = (ev: PointerEvent) => {
+  if (ev.pointerType === "mouse") {
+    if (
+      props.disabled ||
+      wasClickCloseRef.value ||
+      itemContext!.wasEscapeCloseRef.value ||
+      hasPointerMoveOpenedRef.value
+    )
+      return;
+    context!.onTriggerEnter(itemContext!.value);
+    hasPointerMoveOpenedRef.value = true;
   }
-}
+};
 
-function handleHover() {
-  if (!props.disabled && rootInjectedValue?.modelValue.value) {
-    rootInjectedValue?.changeSelected(currentElement.value!);
-    rootInjectedValue?.changeValue(injectedValue?.value);
-    return;
+const handlePointerLeave = (ev: PointerEvent) => {
+  if (ev.pointerType === "mouse") {
+    if (props.disabled) return;
+    context!.onTriggerLeave();
+    hasPointerMoveOpenedRef.value = false;
   }
-}
-
-function handleCloseMenu() {
-  rootInjectedValue?.changeValue(undefined);
-  document.querySelector("body")!.style.pointerEvents = "";
-  setTimeout(() => {
-    rootInjectedValue?.triggerElement.value?.focus();
-  }, 0);
-}
-
-function handleClick() {
-  openAndSelectFirstElement();
-}
-
-const dataState = computed(() => {
-  return injectedValue?.isOpen.value ? "open" : "closed";
-});
+};
 
-const highlightedState = computed(() => {
-  return (
-    activeElement.value === currentElement.value ||
-    (rootInjectedValue?.triggerElement.value === currentElement.value &&
-      rootInjectedValue?.selectedElement.value)
-  );
-});
+const handleClick = (ev: MouseEvent) => {
+  context?.onItemSelect(itemContext!.value);
+  wasClickCloseRef.value = open.value;
+};
 
-watchEffect(() => {
-  if (rootInjectedValue?.selectedElement.value === currentElement.value) {
-    rootInjectedValue!.triggerElement.value = currentElement.value;
+const handleKeydown = (ev: KeyboardEvent) => {
+  const verticalEntryKey = context!.dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+  const entryKey = { horizontal: "ArrowDown", vertical: verticalEntryKey }[
+    context!.orientation
+  ];
+  if (open.value && ev.key === entryKey) {
+    itemContext!.onEntryKeyDown();
+    // Prevent FocusGroupItem from handling the event
+    ev.preventDefault();
   }
-});
-
-watch(
-  activeElement,
-  () => {
-    if (activeElement.value === currentElement.value) {
-      rootInjectedValue!.selectedElement.value = currentElement.value;
-      rootInjectedValue!.triggerElement.value = currentElement.value;
-    } else if (
-      !injectedValue?.isOpen.value &&
-      rootInjectedValue!.selectedElement.value === currentElement.value
-    ) {
-      rootInjectedValue!.selectedElement.value = undefined;
-    }
-  },
-  { immediate: true }
-);
+};
 </script>
 
 <template>
-  <PopperAnchor asChild>
-    <PrimitiveButton
-      role="menuitem"
-      ref="primitiveElement"
-      :id="injectedValue?.triggerId"
-      :aria-expanded="injectedValue?.isOpen.value"
-      :aria-controls="injectedValue?.contentId"
-      :data-state="dataState"
-      :data-orientation="rootInjectedValue?.orientation"
-      aria-haspopup="menu"
-      @keydown.prevent="handleKeydown"
-      data-radix-vue-collection-item
-      @mouseenter="handleHover"
-      @click="handleClick"
-      :data-highlighted="highlightedState ? '' : null"
-      :aria-disabled="props.disabled ? true : undefined"
-      :data-disabled="props.disabled ? '' : undefined"
-      :tabindex="
-        rootInjectedValue?.triggerElement.value === currentElement ? '0' : '-1'
-      "
-      v-bind="$attrs"
-    >
-      <slot />
-    </PrimitiveButton>
-  </PopperAnchor>
+  <PrimitiveButton
+    ref="primitiveElement"
+    :id="triggerId"
+    :disabled="disabled"
+    :data-disabled="disabled ? '' : undefined"
+    :data-state="getOpenState(open)"
+    :aria-expanded="open"
+    :aria-controls="contentId"
+    @pointerenter="handlePointerEnter"
+    @pointermove="handlePointerMove"
+    @pointerleave="handlePointerLeave"
+    @click="handleClick"
+    @keydown="handleKeydown"
+    v-bind="$attrs"
+    data-radix-vue-collection-item
+  >
+    <slot></slot>
+  </PrimitiveButton>
+
+  <template v-if="open">
+    <!-- VisuallyHiddenPrimitive -->
+    <span :aria-owns="contentId" v-if="context?.viewport"></span>
+  </template>
 </template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue
new file mode 100644
index 000000000..bcc689c0e
--- /dev/null
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { NAVIGATION_MENU_INJECTION_KEY } from "./NavigationMenuRoot.vue";
+import { NAVIGATION_MENU_ITEM_INJECTION_KEY } from "./NavigationMenuItem.vue";
+import { computed, inject, onMounted, ref, type VNode } from "vue";
+import { PrimitiveDiv, usePrimitiveElement } from "@/Primitive";
+import { getOpenState } from "./utils";
+import { unrefElement, useResizeObserver } from "@vueuse/core";
+import NavigationMenuContentImpl from "./NavigationMenuContentImpl.vue";
+
+const { primitiveElement, currentElement } = usePrimitiveElement();
+
+const context = inject(NAVIGATION_MENU_INJECTION_KEY);
+const itemContext = inject(NAVIGATION_MENU_ITEM_INJECTION_KEY);
+
+const content = ref<HTMLElement>();
+const size = ref<{ width: number; height: number }>();
+
+const open = computed(() => !!context?.modelValue.value);
+// We persist the last active content value as the viewport may be animating out
+// and we want the content to remain mounted for the lifecycle of the viewport.
+const activeContentValue = computed(() =>
+  open.value ? context!.modelValue.value : context!.previousValue.value
+);
+
+onMounted(() => {
+  context!.onViewportChange(currentElement.value);
+});
+
+console.log(Array.from(context?.viewportContent.value.values()));
+const viewportContentList = computed(() =>
+  // @ts-ignore
+  Array.from(context?.viewportContent.value.values()).filter(
+    (node) => open.value && node?.props?.value === activeContentValue.value
+  )
+);
+
+const setRef = (node: VNode) => {
+  // @ts-ignore
+  const isActive = activeContentValue.value === node?.value;
+  if (isActive) {
+    // @ts-ignore
+    content.value = unrefElement(node);
+  }
+  return undefined;
+};
+
+useResizeObserver(content, () => {
+  if (content.value) {
+    size.value = {
+      width: content.value.offsetWidth,
+      height: content.value.offsetHeight,
+    };
+  }
+});
+</script>
+
+<template>
+  <PrimitiveDiv
+    ref="primitiveElement"
+    :data-state="getOpenState(open)"
+    :data-orientation="context?.orientation"
+    :style="{
+        // Prevent interaction when animating out
+        pointerEvents: !open && context?.isRootMenu ? 'none' : undefined,
+        ['--radix-navigation-menu-viewport-width' as any]: size ? size?.width + 'px' : undefined,
+        ['--radix-navigation-menu-viewport-height' as any]: size ? size?.height + 'px' : undefined,
+      }"
+    @pointerenter="context?.onContentEnter(activeContentValue)"
+    @pointerleave="context?.onContentLeave()"
+  >
+    <NavigationMenuContentImpl
+      v-for="node in viewportContentList"
+      :ref="setRef"
+      :key="node.props?.value"
+      v-bind="node.parentProps"
+      :value="node.props?.value"
+      :triggerRef="node.props?.triggerRef"
+      :focusProxyRef="node.props?.focusProxyRef"
+      @escape="itemContext!.wasEscapeCloseRef.value = true"
+    >
+      <component :is="node"></component>
+    </NavigationMenuContentImpl>
+  </PrimitiveDiv>
+</template>
diff --git a/packages/radix-vue/src/NavigationMenu/index.ts b/packages/radix-vue/src/NavigationMenu/index.ts
index 7557bf690..b6f4af033 100644
--- a/packages/radix-vue/src/NavigationMenu/index.ts
+++ b/packages/radix-vue/src/NavigationMenu/index.ts
@@ -1,19 +1,11 @@
-export { default as NavigationMenuRoot } from "./NavigationMenuRoot.vue";
-export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.vue";
-export { default as NavigationMenuPortal } from "./NavigationMenuPortal.vue";
 export { default as NavigationMenuContent } from "./NavigationMenuContent.vue";
-export { default as NavigationMenuArrow } from "./NavigationMenuArrow.vue";
+export { default as NavigationMenuContentImpl } from "./NavigationMenuContentImpl.vue";
+export { default as NavigationMenuIndicator } from "./NavigationMenuIndicator.vue";
 export { default as NavigationMenuItem } from "./NavigationMenuItem.vue";
-export { default as NavigationMenuGroup } from "./NavigationMenuGroup.vue";
-export { default as NavigationMenuSeparator } from "./NavigationMenuSeparator.vue";
-export { default as NavigationMenuCheckboxItem } from "./NavigationMenuCheckboxItem.vue";
-export { default as NavigationMenuItemIndicator } from "./NavigationMenuItemIndicator.vue";
-export { default as NavigationMenuLabel } from "./NavigationMenuLabel.vue";
-export { default as NavigationMenuRadioGroup } from "./NavigationMenuRadioGroup.vue";
-export { default as NavigationMenuRadioItem } from "./NavigationMenuRadioItem.vue";
-export { default as NavigationMenuSub } from "./NavigationMenuSub.vue";
-export { default as NavigationMenuSubContent } from "./NavigationMenuSubContent.vue";
-export { default as NavigationMenuSubTrigger } from "./NavigationMenuSubTrigger.vue";
-export { default as NavigationMenuMenu } from "./NavigationMenuMenu.vue";
+export { default as NavigationMenuLink } from "./NavigationMenuLink.vue";
+export { default as NavigationMenuRoot } from "./NavigationMenuRoot.vue";
+export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.vue";
+export { default as NavigationMenuList } from "./NavigationMenuList.vue";
+export { default as NavigationMenuViewport } from "./NavigationMenuViewport.vue";
 
 export * from "./utils";
diff --git a/packages/radix-vue/src/NavigationMenu/utils.ts b/packages/radix-vue/src/NavigationMenu/utils.ts
index 2efa529bb..70611fc76 100644
--- a/packages/radix-vue/src/NavigationMenu/utils.ts
+++ b/packages/radix-vue/src/NavigationMenu/utils.ts
@@ -1,8 +1,68 @@
-import { type InjectionKey, type Ref } from "vue";
+export type Orientation = "vertical" | "horizontal";
+export type Direction = "ltr" | "rtl";
 
-type NavigationMenuItemContextValue = {
-  modelValue: Ref<boolean>;
-};
+export function getOpenState(open: boolean) {
+  return open ? "open" : "closed";
+}
 
-export const NAVIGATION_MENU_ITEM_SYMBOL =
-  Symbol() as InjectionKey<NavigationMenuItemContextValue>;
+export function makeTriggerId(baseId: string, value: string) {
+  return `${baseId}-trigger-${value}`;
+}
+
+export function makeContentId(baseId: string, value: string) {
+  return `${baseId}-content-${value}`;
+}
+
+/**
+ * Returns a list of potential tabbable candidates.
+ *
+ * NOTE: This is only a close approximation. For example it doesn't take into account cases like when
+ * elements are not visible. This cannot be worked out easily by just reading a property, but rather
+ * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
+ * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
+ */
+export function getTabbableCandidates(container: HTMLElement) {
+  const nodes: HTMLElement[] = [];
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (node: any) => {
+      const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
+      if (node.disabled || node.hidden || isHiddenInput)
+        return NodeFilter.FILTER_SKIP;
+      // `.tabIndex` is not the same as the `tabindex` attribute. It works on the
+      // runtime's understanding of tabbability, so this automatically accounts
+      // for any kind of element that could be tabbed to.
+      return node.tabIndex >= 0
+        ? NodeFilter.FILTER_ACCEPT
+        : NodeFilter.FILTER_SKIP;
+    },
+  });
+  while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement);
+  // we do not take into account the order of nodes with positive `tabIndex` as it
+  // hinders accessibility to have tab order different from visual order.
+  return nodes;
+}
+
+export function focusFirst(candidates: HTMLElement[]) {
+  const previouslyFocusedElement = document.activeElement;
+  return candidates.some((candidate) => {
+    // if focus is already where we want to go, we don't want to keep going through the candidates
+    if (candidate === previouslyFocusedElement) return true;
+    candidate.focus();
+    return document.activeElement !== previouslyFocusedElement;
+  });
+}
+
+export function removeFromTabOrder(candidates: HTMLElement[]) {
+  candidates.forEach((candidate) => {
+    candidate.dataset.tabindex = candidate.getAttribute("tabindex") || "";
+    candidate.setAttribute("tabindex", "-1");
+  });
+  return () => {
+    candidates.forEach((candidate) => {
+      const prevTabIndex = candidate.dataset.tabindex as string;
+      candidate.setAttribute("tabindex", prevTabIndex);
+    });
+  };
+}
diff --git a/packages/radix-vue/src/index.ts b/packages/radix-vue/src/index.ts
index 0bd1e2257..0d27e5ee1 100644
--- a/packages/radix-vue/src/index.ts
+++ b/packages/radix-vue/src/index.ts
@@ -151,24 +151,5 @@ export {
   MenubarSubTrigger,
   MenubarMenu,
 } from "./Menubar";
-export {
-  NavigationMenuArrow,
-  NavigationMenuContent,
-  NavigationMenuGroup,
-  NavigationMenuItem,
-  NavigationMenuPortal,
-  NavigationMenuRoot,
-  NavigationMenuSeparator,
-  NavigationMenuTrigger,
-  NavigationMenuCheckboxItem,
-  NavigationMenuItemIndicator,
-  NavigationMenuLabel,
-  NavigationMenuRadioGroup,
-  NavigationMenuRadioItem,
-  NavigationMenuSub,
-  NavigationMenuSubContent,
-  NavigationMenuSubTrigger,
-  NavigationMenuMenu,
-} from "./NavigationMenu";
 
 export * from "./ScrollArea";
diff --git a/playground/vue3/src/App.vue b/playground/vue3/src/App.vue
index d9de03aba..6ddd74caa 100644
--- a/playground/vue3/src/App.vue
+++ b/playground/vue3/src/App.vue
@@ -1,31 +1,31 @@
 <script setup lang="ts">
-import Card from './components/Card.vue'
+import Card from "./components/Card.vue";
 
-import AccordionDemo from './components/Demo/AccordionDemo.vue'
-import CheckboxDemo from './components/Demo/CheckboxDemo.vue'
-import CollapsibleDemo from './components/Demo/CollapsibleDemo.vue'
-import LabelDemo from './components/Demo/LabelDemo.vue'
-import SeparatorDemo from './components/Demo/SeparatorDemo.vue'
-import SwitchDemo from './components/Demo/SwitchDemo.vue'
-import ToggleDemo from './components/Demo/ToggleDemo.vue'
-import ToggleGroupDemo from './components/Demo/ToggleGroupDemo.vue'
-import AspectRatioDemo from './components/Demo/AspectRatioDemo.vue'
-import TabsDemo from './components/Demo/TabsDemo.vue'
-import SliderDemo from './components/Demo/SliderDemo.vue'
-import ProgressDemo from './components/Demo/ProgressDemo.vue'
-import DialogDemo from './components/Demo/DialogDemo.vue'
-import AlertDialogDemo from './components/Demo/AlertDialogDemo.vue'
-import RadioGroupDemo from './components/Demo/RadioGroupDemo.vue'
-import ToolbarDemo from './components/Demo/ToolbarDemo.vue'
-import AvatarDemo from './components/Demo/AvatarDemo.vue'
-import TooltipDemo from './components/Demo/TooltipDemo.vue'
-import HoverCardDemo from './components/Demo/HoverCardDemo.vue'
-import PopoverDemo from './components/Demo/PopoverDemo.vue'
-import DropdownMenuDemo from './components/Demo/DropdownMenuDemo.vue'
-import ContextMenuDemo from './components/Demo/ContextMenuDemo.vue'
-import ScrollAreaDemo from './components/Demo/ScrollAreaDemo.vue'
-import MenubarDemo from './components/Demo/MenubarDemo.vue'
-import NavigationMenuDemo from './components/Demo/NavigationMenuDemo.vue'
+import AccordionDemo from "./components/Demo/AccordionDemo.vue";
+import CheckboxDemo from "./components/Demo/CheckboxDemo.vue";
+import CollapsibleDemo from "./components/Demo/CollapsibleDemo.vue";
+import LabelDemo from "./components/Demo/LabelDemo.vue";
+import SeparatorDemo from "./components/Demo/SeparatorDemo.vue";
+import SwitchDemo from "./components/Demo/SwitchDemo.vue";
+import ToggleDemo from "./components/Demo/ToggleDemo.vue";
+import ToggleGroupDemo from "./components/Demo/ToggleGroupDemo.vue";
+import AspectRatioDemo from "./components/Demo/AspectRatioDemo.vue";
+import TabsDemo from "./components/Demo/TabsDemo.vue";
+import SliderDemo from "./components/Demo/SliderDemo.vue";
+import ProgressDemo from "./components/Demo/ProgressDemo.vue";
+import DialogDemo from "./components/Demo/DialogDemo.vue";
+import AlertDialogDemo from "./components/Demo/AlertDialogDemo.vue";
+import RadioGroupDemo from "./components/Demo/RadioGroupDemo.vue";
+import ToolbarDemo from "./components/Demo/ToolbarDemo.vue";
+import AvatarDemo from "./components/Demo/AvatarDemo.vue";
+import TooltipDemo from "./components/Demo/TooltipDemo.vue";
+import HoverCardDemo from "./components/Demo/HoverCardDemo.vue";
+import PopoverDemo from "./components/Demo/PopoverDemo.vue";
+import DropdownMenuDemo from "./components/Demo/DropdownMenuDemo.vue";
+import ContextMenuDemo from "./components/Demo/ContextMenuDemo.vue";
+import ScrollAreaDemo from "./components/Demo/ScrollAreaDemo.vue";
+import MenubarDemo from "./components/Demo/MenubarDemo.vue";
+import NavigationMenuDemo from "./components/Demo/NavigationMenuDemo.vue";
 </script>
 
 <template>
@@ -64,7 +64,7 @@ import NavigationMenuDemo from './components/Demo/NavigationMenuDemo.vue'
       <Card>
         <MenubarDemo />
       </Card>
-      <Card>
+      <Card class="col-span-2">
         <NavigationMenuDemo />
       </Card>
       <Card>
diff --git a/playground/vue3/src/components/Card.vue b/playground/vue3/src/components/Card.vue
index a24323b42..a17d49509 100644
--- a/playground/vue3/src/components/Card.vue
+++ b/playground/vue3/src/components/Card.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="relative  flex min-h-[300px] ">
-    <div class="h-full card-bg w-full rounded-xl flex relative items-center justify-center  resize overflow-auto">
+  <div class="relative flex min-h-[300px]">
+    <div class="h-full card-bg w-full rounded-xl flex relative items-center justify-center resize">
       <div class="w-full max-w-[700px] flex flex-col items-center justify-center">
         <slot />
       </div>
@@ -10,6 +10,6 @@
 
 <style scoped>
 .card-bg {
-  background-image: linear-gradient(330deg, #8E4EC6 0%, #3E63DD 100%);
+  background-image: linear-gradient(330deg, #8e4ec6 0%, #3e63dd 100%);
 }
 </style>
diff --git a/playground/vue3/src/components/Demo/NavigationMenuDemo.vue b/playground/vue3/src/components/Demo/NavigationMenuDemo.vue
index bc090bb73..db67d28bf 100644
--- a/playground/vue3/src/components/Demo/NavigationMenuDemo.vue
+++ b/playground/vue3/src/components/Demo/NavigationMenuDemo.vue
@@ -2,165 +2,129 @@
 import { Icon } from "@iconify/vue";
 import { ref } from "vue";
 import {
-  NavigationMenuCheckboxItem,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
   NavigationMenuContent,
   NavigationMenuItem,
-  NavigationMenuItemIndicator,
-  NavigationMenuMenu,
+  NavigationMenuList,
   NavigationMenuRoot,
   NavigationMenuTrigger,
-} from "../../../../../packages/radix-vue/src";
+  NavigationMenuViewport,
+} from "@/NavigationMenu";
 import NavigationMenuListItem from "./NavigationMenuListItem.vue";
 
-const currentMenu = ref("");
-const checkboxOne = ref(false);
-const checkboxTwo = ref(false);
-const person = ref("pedro");
 function handleClick() {
   alert("hello!");
 }
 
-const RADIO_ITEMS = ["Andy", "Benoît", "Luis"];
-const CHECK_ITEMS = ["Always Show Bookmarks Bar", "Always Show Full URLs"];
+const currentTrigger = ref("");
 </script>
 
 <template>
-  <div class="absolute left-4 top-3 text-sm">
-    <p>Current menu: {{ currentMenu }}</p>
-    <p>Checkbox 1: {{ checkboxOne ? "checked" : "unchecked" }}</p>
-    <p>Checkbox 2: {{ checkboxTwo ? "checked" : "unchecked" }}</p>
-    <p>Person: {{ person }}</p>
-  </div>
-  <NavigationMenuRoot
-    class="center shadow-blackA7 m-0 flex list-none rounded-[6px] bg-white p-1 shadow-[0_2px_10px]"
-  >
-    <NavigationMenuMenu>
-      <NavigationMenuTrigger
-        class="text-violet11 hover:bg-violet3 focus:shadow-violet7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
-      >
-        Learn
-        <Icon
-          icon="radix-icons:caret-down"
-          class="text-violet10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
-          aria-hidden
-        />
-      </NavigationMenuTrigger>
-      <NavigationMenuContent
-        class="data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute top-0 left-0 w-full sm:w-auto"
-      >
-        <ul
-          class="one m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[500px] sm:grid-cols-[0.75fr_1fr]"
+  <NavigationMenuRoot v-model="currentTrigger" class="relative z-[1] flex w-full justify-center">
+    <NavigationMenuList class="center shadow-blackA7 m-0 flex list-none rounded-[6px] bg-white p-1 shadow-[0_2px_10px]">
+      <NavigationMenuItem>
+        <NavigationMenuTrigger
+          class="text-violet11 hover:bg-violet3 focus:shadow-violet7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
+        >
+          Learn
+          <Icon
+            icon="radix-icons:caret-down"
+            class="text-violet10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
+            aria-hidden
+          />
+        </NavigationMenuTrigger>
+        <NavigationMenuContent
+          class="data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute top-0 left-0 w-full sm:w-auto"
         >
-          <li class="row-span-3 grid">
-            <NavigationMenuItem asChild>
-              <a
-                class="focus:shadow-violet7 from-purple9 to-indigo9 flex h-full w-full select-none flex-col justify-end rounded-[6px] bg-gradient-to-b p-[25px] no-underline outline-none focus:shadow-[0_0_0_2px]"
-                href="/"
-              >
-                <svg aria-hidden width="38" height="38" viewBox="0 0 25 25" fill="white">
-                  <path
-                    d="M12 25C7.58173 25 4 21.4183 4 17C4 12.5817 7.58173 9 12 9V25Z"
-                  ></path>
-                  <path d="M12 0H4V8H12V0Z"></path>
-                  <path
-                    d="M17 8C19.2091 8 21 6.20914 21 4C21 1.79086 19.2091 0 17 0C14.7909 0 13 1.79086 13 4C13 6.20914 14.7909 8 17 8Z"
-                  ></path>
-                </svg>
-                <div
-                  class="mt-4 mb-[7px] text-[18px] font-medium leading-[1.2] text-white"
+          <ul class="one m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[500px] sm:grid-cols-[0.75fr_1fr]">
+            <li class="row-span-3 grid">
+              <NavigationMenuLink asChild>
+                <a
+                  class="focus:shadow-violet7 from-purple9 to-indigo9 flex h-full w-full select-none flex-col justify-end rounded-[6px] bg-gradient-to-b p-[25px] no-underline outline-none focus:shadow-[0_0_0_2px]"
+                  href="/"
                 >
-                  Radix Primitives
-                </div>
-                <p class="text-mauve4 text-[14px] leading-[1.3]">
-                  Unstyled, accessible components for React.
-                </p>
-              </a>
-            </NavigationMenuItem>
-          </li>
+                  <svg aria-hidden width="38" height="38" viewBox="0 0 25 25" fill="white">
+                    <path d="M12 25C7.58173 25 4 21.4183 4 17C4 12.5817 7.58173 9 12 9V25Z"></path>
+                    <path d="M12 0H4V8H12V0Z"></path>
+                    <path
+                      d="M17 8C19.2091 8 21 6.20914 21 4C21 1.79086 19.2091 0 17 0C14.7909 0 13 1.79086 13 4C13 6.20914 14.7909 8 17 8Z"
+                    ></path>
+                  </svg>
+                  <div class="mt-4 mb-[7px] text-[18px] font-medium leading-[1.2] text-white">Radix Primitives</div>
+                  <p class="text-mauve4 text-[14px] leading-[1.3]">Unstyled, accessible components for React.</p>
+                </a>
+              </NavigationMenuLink>
+            </li>
 
-          <NavigationMenuListItem href="https://stitches.dev/" title="Stitches">
-            CSS-in-JS with best-in-class developer experience.
-          </NavigationMenuListItem>
-          <NavigationMenuListItem href="/colors" title="Colors">
-            Beautiful, thought-out palettes with auto dark mode.
-          </NavigationMenuListItem>
-          <NavigationMenuListItem href="https://icons.radix-ui.com/" title="Icons">
-            A crisp set of 15x15 icons, balanced and consistent.
-          </NavigationMenuListItem>
-        </ul>
-      </NavigationMenuContent>
-    </NavigationMenuMenu>
+            <NavigationMenuListItem href="https://stitches.dev/" title="Stitches">
+              CSS-in-JS with best-in-class developer experience.
+            </NavigationMenuListItem>
+            <NavigationMenuListItem href="/colors" title="Colors">
+              Beautiful, thought-out palettes with auto dark mode.
+            </NavigationMenuListItem>
+            <NavigationMenuListItem href="https://icons.radix-ui.com/" title="Icons">
+              A crisp set of 15x15 icons, balanced and consistent.
+            </NavigationMenuListItem>
+          </ul>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
 
-    <NavigationMenuMenu>
-      <NavigationMenuTrigger
-        class="text-violet11 hover:bg-violet3 focus:shadow-violet7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
-      >
-        Overview
-        <Icon
-          icon="radix-icons:caret-down"
-          class="text-violet10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
-          aria-hidden
-        />
-      </NavigationMenuTrigger>
-      <NavigationMenuContent class="absolute top-0 left-0 w-full sm:w-auto">
-        <ul
-          class="m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[600px] sm:grid-flow-col sm:grid-rows-3"
+      <NavigationMenuItem>
+        <NavigationMenuTrigger
+          class="text-violet11 hover:bg-violet3 focus:shadow-violet7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]"
         >
-          <NavigationMenuListItem
-            title="Introduction"
-            href="/docs/primitives/overview/introduction"
-          >
-            Build high-quality, accessible design systems and web apps.
-          </NavigationMenuListItem>
-          <NavigationMenuListItem
-            title="Getting started"
-            href="/docs/primitives/overview/getting-started"
-          >
-            A quick tutorial to get you up and running with Radix Primitives.
-          </NavigationMenuListItem>
-          <NavigationMenuListItem title="Styling" href="/docs/primitives/guides/styling">
-            Unstyled and compatible with any styling solution.
-          </NavigationMenuListItem>
-          <NavigationMenuListItem
-            title="Animation"
-            href="/docs/primitives/guides/animation"
-          >
-            Use CSS keyframes or any animation library of your choice.
-          </NavigationMenuListItem>
-          <NavigationMenuListItem
-            title="Accessibility"
-            href="/docs/primitives/overview/accessibility"
-          >
-            Tested in a range of browsers and assistive technologies.
-          </NavigationMenuListItem>
-          <NavigationMenuListItem
-            title="Releases"
-            href="/docs/primitives/overview/releases"
-          >
-            Radix Primitives releases and their changelogs.
-          </NavigationMenuListItem>
-        </ul>
-      </NavigationMenuContent>
-    </NavigationMenuMenu>
+          Overview
+          <Icon
+            icon="radix-icons:caret-down"
+            class="text-violet10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
+            aria-hidden
+          />
+        </NavigationMenuTrigger>
+        <NavigationMenuContent class="absolute top-0 left-0 w-full sm:w-auto">
+          <ul class="m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[600px] sm:grid-flow-col sm:grid-rows-3">
+            <NavigationMenuListItem title="Introduction" href="/docs/primitives/overview/introduction">
+              Build high-quality, accessible design systems and web apps.
+            </NavigationMenuListItem>
+            <NavigationMenuListItem title="Getting started" href="/docs/primitives/overview/getting-started">
+              A quick tutorial to get you up and running with Radix Primitives.
+            </NavigationMenuListItem>
+            <NavigationMenuListItem title="Styling" href="/docs/primitives/guides/styling">
+              Unstyled and compatible with any styling solution.
+            </NavigationMenuListItem>
+            <NavigationMenuListItem title="Animation" href="/docs/primitives/guides/animation">
+              Use CSS keyframes or any animation library of your choice.
+            </NavigationMenuListItem>
+            <NavigationMenuListItem title="Accessibility" href="/docs/primitives/overview/accessibility">
+              Tested in a range of browsers and assistive technologies.
+            </NavigationMenuListItem>
+            <NavigationMenuListItem title="Releases" href="/docs/primitives/overview/releases">
+              Radix Primitives releases and their changelogs.
+            </NavigationMenuListItem>
+          </ul>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
 
-    <NavigationMenuMenu>
-      <NavigationMenuItem
-        class="text-violet11 hover:bg-violet3 focus:shadow-violet7 block select-none rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none no-underline outline-none focus:shadow-[0_0_0_2px]"
-        href="https://github.com/radix-ui"
-      >
-        Github
+      <NavigationMenuItem>
+        <NavigationMenuLink
+          class="text-violet11 hover:bg-violet3 focus:shadow-violet7 block select-none rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none no-underline outline-none focus:shadow-[0_0_0_2px]"
+          href="https://github.com/radix-ui"
+        >
+          Github
+        </NavigationMenuLink>
       </NavigationMenuItem>
-    </NavigationMenuMenu>
 
-    <NavigationMenuItemIndicator
-      class="data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-[1] flex h-[10px] items-end justify-center overflow-hidden transition-[width,transform_250ms_ease]"
-    >
-      <div
-        class="relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] bg-white"
+      <NavigationMenuIndicator
+        class="data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-[1] flex h-[10px] items-end justify-center overflow-hidden transition-[width,transform_250ms_ease]"
+      >
+        <div class="relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] bg-white" />
+      </NavigationMenuIndicator>
+    </NavigationMenuList>
+
+    <div class="perspective-[2000px] absolute top-full left-0 flex w-full justify-center">
+      <NavigationMenuViewport
+        class="data-[state=open]:animate-scaleIn data-[state=closed]:animate-scaleOut relative mt-[10px] h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-[6px] bg-white transition-[width,_height] duration-300 sm:w-[var(--radix-navigation-menu-viewport-width)]"
       />
-    </NavigationMenuItemIndicator>
-    <div className="perspective-[2000px] absolute top-full left-0 flex w-full justify-center">
-        <div class="data-[state=open]:animate-scaleIn data-[state=closed]:animate-scaleOut relative mt-[10px] h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-[6px] bg-white transition-[width,_height] duration-300 sm:w-[var(--radix-navigation-menu-viewport-width)]" />
-      </div>
+    </div>
   </NavigationMenuRoot>
 </template>
diff --git a/playground/vue3/src/components/Demo/NavigationMenuListItem.vue b/playground/vue3/src/components/Demo/NavigationMenuListItem.vue
index d355225ce..0f0151a89 100644
--- a/playground/vue3/src/components/Demo/NavigationMenuListItem.vue
+++ b/playground/vue3/src/components/Demo/NavigationMenuListItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NavigationMenuItem } from "../../../../../packages/radix-vue/src";
+import { NavigationMenuLink } from "@/NavigationMenu";
 
 const props = defineProps({
   title: String,
@@ -8,7 +8,7 @@ const props = defineProps({
 
 <template>
   <li>
-    <NavigationMenuItem asChild>
+    <NavigationMenuLink asChild>
       <a
         v-bind="$attrs"
         class="focus:shadow-[0_0_0_2px] focus:shadow-violet7 hover:bg-mauve3 block select-none rounded-[6px] p-3 text-[15px] leading-none no-underline outline-none transition-colors"
@@ -20,6 +20,6 @@ const props = defineProps({
           <slot />
         </p>
       </a>
-    </NavigationMenuItem>
+    </NavigationMenuLink>
   </li>
 </template>
diff --git a/playground/vue3/tailwind.config.js b/playground/vue3/tailwind.config.js
index 26d3ab1ce..288e65777 100644
--- a/playground/vue3/tailwind.config.js
+++ b/playground/vue3/tailwind.config.js
@@ -1,8 +1,9 @@
-const { blackA, green, mauve, violet, red } = require('@radix-ui/colors')
+const { blackA, green, mauve, violet, red } = require("@radix-ui/colors");
+const plugin = require("tailwindcss/plugin");
 
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
   theme: {
     extend: {
       colors: {
@@ -18,45 +19,93 @@ export default {
           to: { opacity: 1 },
         },
         contentShow: {
-          from: { opacity: 0, transform: 'translate(-50%, -48%) scale(0.96)' },
-          to: { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
+          from: { opacity: 0, transform: "translate(-50%, -48%) scale(0.96)" },
+          to: { opacity: 1, transform: "translate(-50%, -50%) scale(1)" },
         },
         slideDownAndFade: {
-          from: { opacity: 0, transform: 'translateY(-2px)' },
-          to: { opacity: 1, transform: 'translateY(0)' },
+          from: { opacity: 0, transform: "translateY(-2px)" },
+          to: { opacity: 1, transform: "translateY(0)" },
         },
         slideLeftAndFade: {
-          from: { opacity: 0, transform: 'translateX(2px)' },
-          to: { opacity: 1, transform: 'translateX(0)' },
+          from: { opacity: 0, transform: "translateX(2px)" },
+          to: { opacity: 1, transform: "translateX(0)" },
         },
         slideUpAndFade: {
-          from: { opacity: 0, transform: 'translateY(2px)' },
-          to: { opacity: 1, transform: 'translateY(0)' },
+          from: { opacity: 0, transform: "translateY(2px)" },
+          to: { opacity: 1, transform: "translateY(0)" },
         },
         slideRightAndFade: {
-          from: { opacity: 0, transform: 'translateX(-2px)' },
-          to: { opacity: 1, transform: 'translateX(0)' },
+          from: { opacity: 0, transform: "translateX(-2px)" },
+          to: { opacity: 1, transform: "translateX(0)" },
         },
         slideDown: {
           from: { height: 0 },
-          to: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: "var(--radix-accordion-content-height)" },
         },
         slideUp: {
-          from: { height: 'var(--radix-accordion-content-height)' },
+          from: { height: "var(--radix-accordion-content-height)" },
           to: { height: 0 },
         },
+        enterFromRight: {
+          from: { opacity: 0, transform: "translateX(200px)" },
+          to: { opacity: 1, transform: "translateX(0)" },
+        },
+        enterFromLeft: {
+          from: { opacity: 0, transform: "translateX(-200px)" },
+          to: { opacity: 1, transform: "translateX(0)" },
+        },
+        exitToRight: {
+          from: { opacity: 1, transform: "translateX(0)" },
+          to: { opacity: 0, transform: "translateX(200px)" },
+        },
+        exitToLeft: {
+          from: { opacity: 1, transform: "translateX(0)" },
+          to: { opacity: 0, transform: "translateX(-200px)" },
+        },
+        scaleIn: {
+          from: { opacity: 0, transform: "rotateX(-10deg) scale(0.9)" },
+          to: { opacity: 1, transform: "rotateX(0deg) scale(1)" },
+        },
+        scaleOut: {
+          from: { opacity: 1, transform: "rotateX(0deg) scale(1)" },
+          to: { opacity: 0, transform: "rotateX(-10deg) scale(0.95)" },
+        },
+        fadeIn: {
+          from: { opacity: 0 },
+          to: { opacity: 1 },
+        },
+        fadeOut: {
+          from: { opacity: 1 },
+          to: { opacity: 0 },
+        },
       },
       animation: {
-        overlayShow: 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-        contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-        slideDown: 'slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)',
-        slideUp: 'slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+        overlayShow: "overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+        contentShow: "contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideDownAndFade: "slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideLeftAndFade: "slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideRightAndFade: "slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideDown: "slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)",
+        slideUp: "slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)",
+        scaleIn: "scaleIn 200ms ease",
+        scaleOut: "scaleOut 200ms ease",
+        fadeIn: "fadeIn 200ms ease",
+        fadeOut: "fadeOut 200ms ease",
+        enterFromLeft: "enterFromLeft 250ms ease",
+        enterFromRight: "enterFromRight 250ms ease",
+        exitToLeft: "exitToLeft 250ms ease",
+        exitToRight: "exitToRight 250ms ease",
       },
     },
   },
-  plugins: [],
-}
+  plugins: [
+    plugin(({ matchUtilities }) => {
+      matchUtilities({
+        perspective: (value) => ({
+          perspective: value,
+        }),
+      });
+    }),
+  ],
+};

From 5186e4f226fda40b8617b82d042c78e0bd15a866 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Fri, 14 Jul 2023 00:09:42 +0800
Subject: [PATCH 03/17] fix build

---
 .../radix-vue/src/NavigationMenu/NavigationMenuViewport.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue
index bcc689c0e..aafddd49e 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue
@@ -26,7 +26,6 @@ onMounted(() => {
   context!.onViewportChange(currentElement.value);
 });
 
-console.log(Array.from(context?.viewportContent.value.values()));
 const viewportContentList = computed(() =>
   // @ts-ignore
   Array.from(context?.viewportContent.value.values()).filter(
@@ -72,7 +71,10 @@ useResizeObserver(content, () => {
       v-for="node in viewportContentList"
       :ref="setRef"
       :key="node.props?.value"
-      v-bind="node.parentProps"
+      v-bind="
+        //@ts-ignore
+        node.parentProps
+      "
       :value="node.props?.value"
       :triggerRef="node.props?.triggerRef"
       :focusProxyRef="node.props?.focusProxyRef"

From 90120310ac0060667c7e81b67f76897765f27ff2 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sat, 15 Jul 2023 00:45:55 +0800
Subject: [PATCH 04/17] render slog fragment

---
 packages/radix-vue/src/Primitive/Primitive.vue      | 13 +------------
 .../radix-vue/src/shared/renderSlotFragments.ts     | 11 +++++++++++
 2 files changed, 12 insertions(+), 12 deletions(-)
 create mode 100644 packages/radix-vue/src/shared/renderSlotFragments.ts

diff --git a/packages/radix-vue/src/Primitive/Primitive.vue b/packages/radix-vue/src/Primitive/Primitive.vue
index cb935ac48..6fc42eca1 100644
--- a/packages/radix-vue/src/Primitive/Primitive.vue
+++ b/packages/radix-vue/src/Primitive/Primitive.vue
@@ -3,12 +3,11 @@ import {
   defineComponent,
   h,
   getCurrentInstance,
-  Fragment,
   type NativeElements,
   type ReservedProps,
-  type VNode,
 } from "vue";
 import Slot from "./Slot.vue";
+import { renderSlotFragments } from "@/shared";
 
 const NODES = [
   "a",
@@ -36,16 +35,6 @@ type Primitives = {
     };
 };
 
-export function renderSlotFragments(children?: VNode[]): VNode[] {
-  if (!children) return [];
-  return children.flatMap((child) => {
-    if (child.type === Fragment) {
-      return renderSlotFragments(child.children as VNode[]);
-    }
-    return [child];
-  });
-}
-
 const Primitive = NODES.reduce((primitive, node) => {
   const Node = defineComponent({
     props: {
diff --git a/packages/radix-vue/src/shared/renderSlotFragments.ts b/packages/radix-vue/src/shared/renderSlotFragments.ts
new file mode 100644
index 000000000..4f4fb9460
--- /dev/null
+++ b/packages/radix-vue/src/shared/renderSlotFragments.ts
@@ -0,0 +1,11 @@
+import { Fragment, type VNode } from "vue";
+
+export function renderSlotFragments(children?: VNode[]): VNode[] {
+  if (!children) return [];
+  return children.flatMap((child) => {
+    if (child.type === Fragment) {
+      return renderSlotFragments(child.children as VNode[]);
+    }
+    return [child];
+  });
+}

From 8412d812d28c0dcdafc60d62eaa3908eb08cd41c Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sat, 15 Jul 2023 00:46:34 +0800
Subject: [PATCH 05/17] add presence component

---
 packages/radix-vue/src/Presence/Presence.vue  |  44 +++++++
 packages/radix-vue/src/Presence/index.ts      |   1 +
 .../radix-vue/src/Presence/usePresence.ts     | 118 ++++++++++++++++++
 packages/radix-vue/src/shared/index.ts        |   1 +
 4 files changed, 164 insertions(+)
 create mode 100644 packages/radix-vue/src/Presence/Presence.vue
 create mode 100644 packages/radix-vue/src/Presence/index.ts
 create mode 100644 packages/radix-vue/src/Presence/usePresence.ts

diff --git a/packages/radix-vue/src/Presence/Presence.vue b/packages/radix-vue/src/Presence/Presence.vue
new file mode 100644
index 000000000..a8fd56697
--- /dev/null
+++ b/packages/radix-vue/src/Presence/Presence.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import {
+  ref,
+  toRefs,
+  useSlots,
+  vShow,
+  withDirectives,
+  type Directive,
+} from "vue";
+import { usePresence } from "./usePresence";
+import { syncRef } from "@vueuse/core";
+
+interface PresenceProps {
+  // children: HTMLElement | ((props: { present: boolean }) => HTMLElement);
+  present: boolean;
+}
+const props = defineProps<PresenceProps>();
+const { present } = toRefs(props);
+
+const slots = useSlots();
+let isLocalPresence = ref(false);
+
+const vTest: Directive = {
+  created(el) {
+    const { isPresent } = usePresence(present, el);
+    syncRef(isLocalPresence, isPresent, { direction: "rtl" });
+  },
+};
+
+const render = () =>
+  // @ts-ignore
+  withDirectives(slots.default?.()?.[0], [
+    [vTest],
+    [vShow, isLocalPresence.value],
+  ]);
+
+defineExpose({
+  present: isLocalPresence,
+});
+</script>
+
+<template>
+  <render></render>
+</template>
diff --git a/packages/radix-vue/src/Presence/index.ts b/packages/radix-vue/src/Presence/index.ts
new file mode 100644
index 000000000..fa686f87c
--- /dev/null
+++ b/packages/radix-vue/src/Presence/index.ts
@@ -0,0 +1 @@
+export { default as Presence } from "./Presence.vue";
diff --git a/packages/radix-vue/src/Presence/usePresence.ts b/packages/radix-vue/src/Presence/usePresence.ts
new file mode 100644
index 000000000..5dcd9ebe7
--- /dev/null
+++ b/packages/radix-vue/src/Presence/usePresence.ts
@@ -0,0 +1,118 @@
+import { useStateMachine } from "@/shared";
+import { ref, watchEffect, type Ref, computed, nextTick } from "vue";
+
+export function usePresence(present: Ref<boolean>, node: HTMLElement) {
+  const stylesRef = ref<CSSStyleDeclaration>({} as any);
+  const prevPresentRef = ref(present.value);
+  const prevAnimationNameRef = ref<string>("none");
+  const initialState = present.value ? "mounted" : "unmounted";
+
+  const { state, dispatch } = useStateMachine(initialState, {
+    mounted: {
+      UNMOUNT: "unmounted",
+      ANIMATION_OUT: "unmountSuspended",
+    },
+    unmountSuspended: {
+      MOUNT: "mounted",
+      ANIMATION_END: "unmounted",
+    },
+    unmounted: {
+      MOUNT: "mounted",
+    },
+  });
+
+  // watchEffect(() => {
+  //   const currentAnimationName = getAnimationName(node);
+  //   prevAnimationNameRef.value =
+  //     state.value === "mounted" ? currentAnimationName : "none";
+  // });
+
+  watchEffect(async () => {
+    const styles = stylesRef.value;
+    const wasPresent = prevPresentRef.value;
+    const hasPresentChanged = wasPresent !== present.value;
+    await nextTick();
+    if (hasPresentChanged) {
+      const prevAnimationName = prevAnimationNameRef.value;
+      const currentAnimationName = getAnimationName(node);
+      if (present.value) {
+        dispatch("MOUNT");
+      } else if (
+        currentAnimationName === "none" ||
+        styles?.display === "none"
+      ) {
+        // If there is no exit animation or the element is hidden, animations won't run
+        // so we unmount instantly
+        dispatch("UNMOUNT");
+      } else {
+        /**
+         * When `present` changes to `false`, we check changes to animation-name to
+         * determine whether an animation has started. We chose this approach (reading
+         * computed styles) because there is no `animationrun` event and `animationstart`
+         * fires after `animation-delay` has expired which would be too late.
+         */
+        const isAnimating = prevAnimationName !== currentAnimationName;
+        console.log(isAnimating, prevAnimationName, currentAnimationName);
+        if (wasPresent && isAnimating) {
+          dispatch("ANIMATION_OUT");
+        } else {
+          dispatch("UNMOUNT");
+        }
+      }
+
+      prevPresentRef.value = present.value;
+    }
+  });
+
+  if (node) {
+    /**
+     * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
+     * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
+     * make sure we only trigger ANIMATION_END for the currently active animation.
+     */
+    const handleAnimationEnd = (event: AnimationEvent) => {
+      const currentAnimationName = getAnimationName(node);
+      const isCurrentAnimation = currentAnimationName.includes(
+        event.animationName
+      );
+      if (event.target === node && isCurrentAnimation) {
+        // With React 18 concurrency this update is applied
+        // a frame after the animation ends, creating a flash of visible content.
+        // By manually flushing we ensure they sync within a frame, removing the flash.
+        // ReactDOM.flushSync(() => dispatch("ANIMATION_END"));
+        dispatch("ANIMATION_END");
+      }
+    };
+    const handleAnimationStart = (event: AnimationEvent) => {
+      if (event.target === node) {
+        // if animation occurred, store its name as the previous animation.
+        prevAnimationNameRef.value = getAnimationName(node);
+      }
+    };
+    node.addEventListener("animationstart", handleAnimationStart);
+    node.addEventListener("animationcancel", handleAnimationEnd);
+    node.addEventListener("animationend", handleAnimationEnd);
+
+    // node.removeEventListener("animationstart", handleAnimationStart);
+    // node.removeEventListener("animationcancel", handleAnimationEnd);
+    // node.removeEventListener("animationend", handleAnimationEnd);
+  } else {
+    // Transition to the unmounted state if the node is removed prematurely.
+    // We avoid doing so during cleanup as the node may change but still exist.
+    dispatch("ANIMATION_END");
+  }
+
+  const isPresent = computed(() =>
+    ["mounted", "unmountSuspended"].includes(state.value)
+  );
+
+  stylesRef.value = getComputedStyle(node);
+
+  return {
+    isPresent,
+  };
+}
+
+function getAnimationName(node: HTMLElement) {
+  return node ? getComputedStyle(node).animationName || "none" : "none";
+}
diff --git a/packages/radix-vue/src/shared/index.ts b/packages/radix-vue/src/shared/index.ts
index 479eb1fd1..7cc74fa1f 100644
--- a/packages/radix-vue/src/shared/index.ts
+++ b/packages/radix-vue/src/shared/index.ts
@@ -7,3 +7,4 @@ export { useCollection } from "./useCollection";
 export { useSize } from "./useSize";
 export { useId } from "./useId";
 export { trapFocus } from "./trap-focus";
+export { renderSlotFragments } from "./renderSlotFragments";

From c180edc4c8ea9a95da1f9a106f81730059888870 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sat, 15 Jul 2023 00:48:37 +0800
Subject: [PATCH 06/17] use presence

---
 .../src/Collapsible/CollapsibleContent.vue    | 67 ++++++++-----------
 .../src/Collapsible/CollapsibleRoot.vue       |  4 +-
 .../NavigationMenu/NavigationMenuContent.vue  | 26 +++----
 .../NavigationMenuIndicator.vue               | 50 +++++++-------
 .../NavigationMenu/NavigationMenuViewport.vue | 65 ++++++++++--------
 5 files changed, 106 insertions(+), 106 deletions(-)

diff --git a/packages/radix-vue/src/Collapsible/CollapsibleContent.vue b/packages/radix-vue/src/Collapsible/CollapsibleContent.vue
index dd87c891e..e8e99f1e4 100644
--- a/packages/radix-vue/src/Collapsible/CollapsibleContent.vue
+++ b/packages/radix-vue/src/Collapsible/CollapsibleContent.vue
@@ -6,40 +6,34 @@ export interface CollapsibleContentProps {
 </script>
 
 <script setup lang="ts">
-import { inject, nextTick, onMounted, ref, watch } from "vue";
+import { computed, inject, nextTick, ref, watch } from "vue";
 import {
   COLLAPSIBLE_INJECTION_KEY,
   type CollapsibleProvideValue,
 } from "./CollapsibleRoot.vue";
 import { PrimitiveDiv, usePrimitiveElement } from "@/Primitive";
+import { Presence } from "@/Presence";
 
 const injectedValue = inject<CollapsibleProvideValue>(
   COLLAPSIBLE_INJECTION_KEY
 );
 
+const presentRef = ref<InstanceType<typeof Presence>>();
 const { primitiveElement, currentElement } = usePrimitiveElement();
 
 const width = ref(0);
 const height = ref(0);
-const currentStyle = ref<Record<string, string>>();
 
 // when opening we want it to immediately open to retrieve dimensions
 // when closing we delay `present` to retrieve dimensions before closing
-const isMountAnimationPrevented = ref(injectedValue?.open.value);
-const isPresent = ref(false);
-const hasAnimations = ref(false);
+const isOpen = computed(() => injectedValue?.open.value);
+const isMountAnimationPrevented = ref(isOpen.value);
+const currentStyle = ref<Record<string, string>>();
 
 watch(
-  () => [injectedValue?.open.value, currentElement.value],
+  () => [isOpen.value, presentRef.value?.present],
   async () => {
-    if (injectedValue?.open.value) {
-      isPresent.value = true;
-    } else if (!hasAnimations.value) {
-      isPresent.value = false;
-    }
-
     await nextTick();
-
     const node = currentElement.value;
     if (!node) return;
     currentStyle.value = currentStyle.value || {
@@ -66,37 +60,30 @@ watch(
   }
 );
 
-onMounted(() => {
-  const currentElementStyle = getComputedStyle(currentElement.value!);
-  if (currentElementStyle?.animationName !== "none") {
-    hasAnimations.value = true;
-    currentElement.value?.addEventListener("animationend", () => {
-      if (!injectedValue?.open.value) {
-        isPresent.value = false;
-      }
-    });
-  }
+requestAnimationFrame(() => {
+  isMountAnimationPrevented.value = false;
+});
 
-  requestAnimationFrame(() => {
-    isMountAnimationPrevented.value = false;
-  });
+defineOptions({
+  inheritAttrs: false,
 });
 </script>
 
 <template>
-  <PrimitiveDiv
-    ref="primitiveElement"
-    :data-state="injectedValue?.open.value ? 'open' : 'closed'"
-    :data-disabled="injectedValue?.disabled?.value ? 'true' : undefined"
-    :id="injectedValue?.contentId"
-    :hidden="!isPresent"
-    :style="{
-      [`--radix-collapsible-content-height`]: `${height}px`,
-      [`--radix-collapsible-content-width`]: `${width}px`,
-    }"
-  >
-    <template v-if="isPresent">
+  <Presence ref="presentRef" :present="injectedValue!.open.value">
+    <PrimitiveDiv
+      ref="primitiveElement"
+      v-bind="$attrs"
+      :data-state="injectedValue?.open.value ? 'open' : 'closed'"
+      :data-disabled="injectedValue?.disabled?.value ? 'true' : undefined"
+      :id="injectedValue?.contentId"
+      :hidden="!injectedValue?.open"
+      :style="{
+        [`--radix-collapsible-content-height`]: `${height}px`,
+        [`--radix-collapsible-content-width`]: `${width}px`,
+      }"
+    >
       <slot />
-    </template>
-  </PrimitiveDiv>
+    </PrimitiveDiv>
+  </Presence>
 </template>
diff --git a/packages/radix-vue/src/Collapsible/CollapsibleRoot.vue b/packages/radix-vue/src/Collapsible/CollapsibleRoot.vue
index 3dd8631cf..4e8392ded 100644
--- a/packages/radix-vue/src/Collapsible/CollapsibleRoot.vue
+++ b/packages/radix-vue/src/Collapsible/CollapsibleRoot.vue
@@ -11,8 +11,8 @@ export interface CollapsibleRootProps {
 
 export interface CollapsibleProvideValue {
   contentId: string;
-  disabled?: Readonly<Ref<boolean>>;
-  open: Readonly<Ref<boolean>>;
+  disabled?: Ref<boolean>;
+  open: Ref<boolean>;
   onOpenToggle(): void;
 }
 
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
index 8bc2adcef..f39540704 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
@@ -12,6 +12,7 @@ import {
 } from "vue";
 import { getOpenState } from "./utils";
 import NavigationMenuContentImpl from "./NavigationMenuContentImpl.vue";
+import { Presence } from "@/Presence";
 
 defineOptions({
   inheritAttrs: false,
@@ -51,16 +52,17 @@ onMounted(() => {
 </script>
 
 <template>
-  <NavigationMenuContentImpl
-    v-if="!context?.viewport"
-    ref="elementRef"
-    :data-state="getOpenState(open)"
-    :style="{
-      pointerEvents: !open && context?.isRootMenu ? 'none' : undefined,
-    }"
-    v-bind="($attrs, commonProps)"
-    @escape="itemContext!.wasEscapeCloseRef.value = true"
-  >
-    <slot></slot>
-  </NavigationMenuContentImpl>
+  <Presence v-if="!context?.viewport" :present="open">
+    <NavigationMenuContentImpl
+      ref="elementRef"
+      :data-state="getOpenState(open)"
+      :style="{
+        pointerEvents: !open && context?.isRootMenu ? 'none' : undefined,
+      }"
+      v-bind="($attrs, commonProps)"
+      @escape="itemContext!.wasEscapeCloseRef.value = true"
+    >
+      <slot></slot>
+    </NavigationMenuContentImpl>
+  </Presence>
 </template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuIndicator.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuIndicator.vue
index 0438b20f7..ef510da55 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuIndicator.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuIndicator.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { computed, inject, ref, watch, watchEffect } from "vue";
+import { computed, inject, ref, watchEffect } from "vue";
 import { NAVIGATION_MENU_INJECTION_KEY } from "./NavigationMenuRoot.vue";
 import { useCollection } from "@/shared";
 import { PrimitiveDiv } from "@/Primitive";
 import { useResizeObserver } from "@vueuse/core";
+import { Presence } from "@/Presence";
 
 defineOptions({
   inheritAttrs: false,
@@ -52,28 +53,29 @@ useResizeObserver(context!.indicatorTrack, handlePositionChange);
     v-if="context?.indicatorTrack.value"
     :to="context?.indicatorTrack.value"
   >
-    <PrimitiveDiv
-      v-if="position"
-      aria-hidden
-      :data-state="isVisible ? 'visible' : 'hidden'"
-      :data-orientation="context.orientation"
-      :style="{
-        position: 'absolute',
-        ...(isHorizontal
-          ? {
-              left: 0,
-              width: position.size + 'px',
-              transform: `translateX(${position.offset}px)`,
-            }
-          : {
-              top: 0,
-              height: position.size + 'px',
-              transform: `translateY(${position.offset}px)`,
-            }),
-      }"
-      v-bind="$attrs"
-    >
-      <slot></slot>
-    </PrimitiveDiv>
+    <Presence :present="isVisible">
+      <PrimitiveDiv
+        aria-hidden
+        :data-state="isVisible ? 'visible' : 'hidden'"
+        :data-orientation="context.orientation"
+        :style="{
+          position: 'absolute',
+          ...(isHorizontal
+            ? {
+                left: 0,
+                width: position?.size + 'px',
+                transform: `translateX(${position?.offset}px)`,
+              }
+            : {
+                top: 0,
+                height: position?.size + 'px',
+                transform: `translateY(${position?.offset}px)`,
+              }),
+        }"
+        v-bind="$attrs"
+      >
+        <slot></slot>
+      </PrimitiveDiv>
+    </Presence>
   </Teleport>
 </template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue
index aafddd49e..8cbfa58f7 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue
@@ -5,6 +5,7 @@ import { computed, inject, onMounted, ref, type VNode } from "vue";
 import { PrimitiveDiv, usePrimitiveElement } from "@/Primitive";
 import { getOpenState } from "./utils";
 import { unrefElement, useResizeObserver } from "@vueuse/core";
+import { Presence } from "@/Presence";
 import NavigationMenuContentImpl from "./NavigationMenuContentImpl.vue";
 
 const { primitiveElement, currentElement } = usePrimitiveElement();
@@ -28,15 +29,14 @@ onMounted(() => {
 
 const viewportContentList = computed(() =>
   // @ts-ignore
-  Array.from(context?.viewportContent.value.values()).filter(
-    (node) => open.value && node?.props?.value === activeContentValue.value
-  )
+  Array.from(context?.viewportContent.value.values())
 );
 
+const isActive = ref(false);
 const setRef = (node: VNode) => {
   // @ts-ignore
-  const isActive = activeContentValue.value === node?.value;
-  if (isActive) {
+  isActive.value = activeContentValue.value === node?.value;
+  if (isActive.value) {
     // @ts-ignore
     content.value = unrefElement(node);
   }
@@ -51,36 +51,45 @@ useResizeObserver(content, () => {
     };
   }
 });
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <template>
-  <PrimitiveDiv
-    ref="primitiveElement"
-    :data-state="getOpenState(open)"
-    :data-orientation="context?.orientation"
-    :style="{
+  <Presence :present="open">
+    <PrimitiveDiv
+      v-bind="$attrs"
+      ref="primitiveElement"
+      :data-state="getOpenState(open)"
+      :data-orientation="context?.orientation"
+      :style="{
         // Prevent interaction when animating out
         pointerEvents: !open && context?.isRootMenu ? 'none' : undefined,
         ['--radix-navigation-menu-viewport-width' as any]: size ? size?.width + 'px' : undefined,
         ['--radix-navigation-menu-viewport-height' as any]: size ? size?.height + 'px' : undefined,
       }"
-    @pointerenter="context?.onContentEnter(activeContentValue)"
-    @pointerleave="context?.onContentLeave()"
-  >
-    <NavigationMenuContentImpl
-      v-for="node in viewportContentList"
-      :ref="setRef"
-      :key="node.props?.value"
-      v-bind="
-        //@ts-ignore
-        node.parentProps
-      "
-      :value="node.props?.value"
-      :triggerRef="node.props?.triggerRef"
-      :focusProxyRef="node.props?.focusProxyRef"
-      @escape="itemContext!.wasEscapeCloseRef.value = true"
+      @pointerenter="context?.onContentEnter(activeContentValue)"
+      @pointerleave="context?.onContentLeave()"
     >
-      <component :is="node"></component>
-    </NavigationMenuContentImpl>
-  </PrimitiveDiv>
+      <template v-for="node in viewportContentList" :key="node.props?.value">
+        <Presence :present="activeContentValue === node.props?.value">
+          <NavigationMenuContentImpl
+            :ref="setRef"
+            v-bind="
+              //@ts-ignore
+              node.parentProps
+            "
+            :value="node.props?.value"
+            :triggerRef="node.props?.triggerRef"
+            :focusProxyRef="node.props?.focusProxyRef"
+            @escape="itemContext!.wasEscapeCloseRef.value = true"
+          >
+            <component :is="node"></component>
+          </NavigationMenuContentImpl>
+        </Presence>
+      </template>
+    </PrimitiveDiv>
+  </Presence>
 </template>

From 3cdc0b25f208297a958517bbf5922a0cb96f05cc Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sat, 15 Jul 2023 01:01:33 +0800
Subject: [PATCH 07/17] update demo to test out developemnt stuff

---
 .../src/components/Demo/AccordionDemo.vue     | 57 ++++++++-----------
 .../src/components/Demo/CollapsibleDemo.vue   | 12 ++--
 2 files changed, 30 insertions(+), 39 deletions(-)

diff --git a/playground/vue3/src/components/Demo/AccordionDemo.vue b/playground/vue3/src/components/Demo/AccordionDemo.vue
index 6a2327c08..d03e37505 100644
--- a/playground/vue3/src/components/Demo/AccordionDemo.vue
+++ b/playground/vue3/src/components/Demo/AccordionDemo.vue
@@ -1,15 +1,9 @@
 <script setup lang="ts">
-import {
-  AccordionContent,
-  AccordionHeader,
-  AccordionItem,
-  AccordionRoot,
-  AccordionTrigger,
-} from 'radix-vue'
-import { ref } from 'vue'
+import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from "@/Accordion";
+import { ref } from "vue";
 
-const tabValue = ref('item-1')
-const rootDisabled = false
+const tabValue = ref("item-1");
+const rootDisabled = false;
 </script>
 
 <template>
@@ -17,48 +11,45 @@ const rootDisabled = false
     <p>Tab value: {{ tabValue }}</p>
   </div>
   <AccordionRoot
-    class="w-[300px] rounded-md bg-[--line-color] shadow-lg" default-value="item-2" type="single"
-    :disabled="rootDisabled" :collapsible="true"
+    class="w-[300px] rounded-md bg-[--line-color] shadow-lg"
+    default-value="item-2"
+    type="single"
+    :disabled="rootDisabled"
+    :collapsible="true"
   >
     <AccordionItem class="accordion-item" value="item-1">
       <AccordionHeader class="flex">
         <AccordionTrigger class="accordion-trigger" as-child>
-          <button class="custom-trigger">
-            Is it accessible?
-          </button>
+          <button class="custom-trigger">Is it accessible?</button>
         </AccordionTrigger>
       </AccordionHeader>
-      <AccordionContent class="accordion-content data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp">
-        <div class="px-5 py-4">
-          Yes. It adheres to the WAI-ARIA design pattern.
-        </div>
+      <AccordionContent
+        class="accordion-content data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp"
+      >
+        <div class="px-5 py-4">Yes. It adheres to the WAI-ARIA design pattern.</div>
       </AccordionContent>
     </AccordionItem>
 
     <AccordionItem class="accordion-item" value="item-2">
       <AccordionHeader class="flex">
-        <AccordionTrigger class="accordion-trigger">
-          Is it unstyled?
-        </AccordionTrigger>
+        <AccordionTrigger class="accordion-trigger"> Is it unstyled? </AccordionTrigger>
       </AccordionHeader>
-      <AccordionContent class="accordion-content data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp">
-        <div class="px-5 py-4">
-          Yes. It's unstyled by default, giving you freedom over the look and feel.
-        </div>
+      <AccordionContent
+        class="accordion-content data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp"
+      >
+        <div class="px-5 py-4">Yes. It's unstyled by default, giving you freedom over the look and feel.</div>
       </AccordionContent>
     </AccordionItem>
 
     <AccordionItem class="accordion-item" value="item-3">
       <AccordionHeader class="flex">
-        <AccordionTrigger class="accordion-trigger">
-          Can it be animated?
-        </AccordionTrigger>
+        <AccordionTrigger class="accordion-trigger"> Can it be animated? </AccordionTrigger>
       </AccordionHeader>
-      <AccordionContent class="accordion-content data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp">
+      <AccordionContent
+        class="accordion-content data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp"
+      >
         <div>
-          <div class="px-5 py-4">
-            Yes! You can use the transition prop to configure the animation.
-          </div>
+          <div class="px-5 py-4">Yes! You can use the transition prop to configure the animation.</div>
         </div>
       </AccordionContent>
     </AccordionItem>
diff --git a/playground/vue3/src/components/Demo/CollapsibleDemo.vue b/playground/vue3/src/components/Demo/CollapsibleDemo.vue
index 655e50cd1..ef4f4514a 100644
--- a/playground/vue3/src/components/Demo/CollapsibleDemo.vue
+++ b/playground/vue3/src/components/Demo/CollapsibleDemo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'radix-vue'
-import { Icon } from '@iconify/vue'
+import { ref } from "vue";
+import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from "@/Collapsible";
+import { Icon } from "@iconify/vue";
 
-const rootOpen = ref(false)
-const rootDisabled = ref(false)
-const open = ref(false)
+const rootOpen = ref(false);
+const rootDisabled = ref(false);
+const open = ref(false);
 </script>
 
 <template>

From 83d2147464920569062579979a679964093edfba Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sat, 15 Jul 2023 01:51:37 +0800
Subject: [PATCH 08/17] improve key nav, cleanup

---
 .../NavigationMenu/NavigationMenuContent.vue  |  6 +++-
 .../NavigationMenuContentImpl.vue             | 16 ++++++++---
 .../src/NavigationMenu/NavigationMenuItem.vue | 28 ++++++++++++++-----
 .../NavigationMenu/NavigationMenuTrigger.vue  |  1 +
 .../NavigationMenu/NavigationMenuViewport.vue | 11 ++++++--
 .../radix-vue/src/Presence/usePresence.ts     |  2 +-
 6 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
index f39540704..6cd527b76 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
@@ -49,6 +49,10 @@ onMounted(() => {
     context.onViewportContentChange(itemContext!.value, vnode);
   }
 });
+
+const handleEscape = () => {
+  itemContext!.wasEscapeCloseRef.value = true;
+};
 </script>
 
 <template>
@@ -60,7 +64,7 @@ onMounted(() => {
         pointerEvents: !open && context?.isRootMenu ? 'none' : undefined,
       }"
       v-bind="($attrs, commonProps)"
-      @escape="itemContext!.wasEscapeCloseRef.value = true"
+      @escape="handleEscape"
     >
       <slot></slot>
     </NavigationMenuContentImpl>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
index 4a9b48ecc..52b576d46 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
@@ -20,7 +20,7 @@ import {
   makeContentId,
   makeTriggerId,
 } from "./utils";
-import { useCollection } from "@/shared";
+import { useArrowNavigation, useCollection } from "@/shared";
 
 const props = defineProps<NavigationMenuContentImplProps>();
 const emits = defineEmits<{
@@ -68,11 +68,10 @@ const motionAttribute = computed(() => {
 });
 
 const handleKeydown = (ev: KeyboardEvent) => {
-  console.log(ev);
   const isMetaKey = ev.altKey || ev.ctrlKey || ev.metaKey;
   const isTabKey = ev.key === "Tab" && !isMetaKey;
+  const candidates = getTabbableCandidates(ev.currentTarget as HTMLElement);
   if (isTabKey) {
-    const candidates = getTabbableCandidates(ev.currentTarget as HTMLElement);
     const focusedElement = document.activeElement;
     const index = candidates.findIndex(
       (candidate) => candidate === focusedElement
@@ -92,6 +91,15 @@ const handleKeydown = (ev: KeyboardEvent) => {
       props.focusProxyRef.value?.focus();
     }
   }
+
+  const newSelectedElement = useArrowNavigation(
+    ev,
+    document.activeElement as HTMLElement,
+    undefined,
+    { itemsArray: candidates }
+  );
+
+  newSelectedElement?.focus();
 };
 
 const handleEscape = (ev: KeyboardEvent) => {
@@ -99,7 +107,7 @@ const handleEscape = (ev: KeyboardEvent) => {
 };
 
 defineExpose({
-  value: props.value,
+  ...props,
 });
 </script>
 
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
index f36cbc861..6b88c7329 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
@@ -57,33 +57,47 @@ provide(NAVIGATION_MENU_ITEM_INJECTION_KEY, {
     if (el) {
       // @ts-ignore
       const candidates = getTabbableCandidates(unrefElement(el));
-      console.log(el, candidates);
       if (candidates.length)
         focusFirst(side === "start" ? candidates : candidates.reverse());
     }
   },
 });
 
+const handleClose = () => {
+  context?.onItemSelect("");
+  triggerRef.value?.focus();
+};
+
 const handleKeydown = (ev: KeyboardEvent) => {
   const currentFocus = document.activeElement as HTMLElement;
   if (ev.keyCode === 32 || ev.key === "Enter") {
-    (ev.target as HTMLElement).click();
+    if (context?.modelValue.value === value) {
+      handleClose();
+      ev.preventDefault();
+      return;
+    } else {
+      (ev.target as HTMLElement).click();
+      ev.preventDefault();
+      return;
+    }
+  }
+
+  if (ev.key === "Escape") {
+    wasEscapeCloseRef.value = true;
+    triggerRef.value?.focus();
+    context!.modelValue.value = "";
     return;
   }
 
   const newSelectedElement = useArrowNavigation(ev, currentFocus, undefined, {
-    arrowKeyOptions: "horizontal",
     itemsArray: getItems(),
   });
-
   newSelectedElement?.focus();
-
-  // context?.onItemSelect(newSelectedElement?.id.split("trigger-")[1] ?? "");
 };
 </script>
 
 <template>
-  <PrimitiveLi @keydown.prevent="handleKeydown">
+  <PrimitiveLi @keydown="handleKeydown">
     <slot></slot>
   </PrimitiveLi>
 </template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue
index db76ed5e3..53989e027 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue
@@ -69,6 +69,7 @@ const handleKeydown = (ev: KeyboardEvent) => {
     itemContext!.onEntryKeyDown();
     // Prevent FocusGroupItem from handling the event
     ev.preventDefault();
+    ev.stopPropagation();
   }
 };
 </script>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue
index 8cbfa58f7..e553347ea 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { NAVIGATION_MENU_INJECTION_KEY } from "./NavigationMenuRoot.vue";
-import { NAVIGATION_MENU_ITEM_INJECTION_KEY } from "./NavigationMenuItem.vue";
 import { computed, inject, onMounted, ref, type VNode } from "vue";
 import { PrimitiveDiv, usePrimitiveElement } from "@/Primitive";
 import { getOpenState } from "./utils";
@@ -11,7 +10,6 @@ import NavigationMenuContentImpl from "./NavigationMenuContentImpl.vue";
 const { primitiveElement, currentElement } = usePrimitiveElement();
 
 const context = inject(NAVIGATION_MENU_INJECTION_KEY);
-const itemContext = inject(NAVIGATION_MENU_ITEM_INJECTION_KEY);
 
 const content = ref<HTMLElement>();
 const size = ref<{ width: number; height: number }>();
@@ -43,6 +41,12 @@ const setRef = (node: VNode) => {
   return undefined;
 };
 
+const handleClose = (node: VNode) => {
+  context!.modelValue.value = "";
+  node.props?.triggerRef?.value?.focus();
+  node.props!.wasEscapeCloseRef.value = true;
+};
+
 useResizeObserver(content, () => {
   if (content.value) {
     size.value = {
@@ -84,7 +88,8 @@ defineOptions({
             :value="node.props?.value"
             :triggerRef="node.props?.triggerRef"
             :focusProxyRef="node.props?.focusProxyRef"
-            @escape="itemContext!.wasEscapeCloseRef.value = true"
+            :wasEscapeCloseRef="node.props?.wasEscapeCloseRef"
+            @escape="handleClose(node)"
           >
             <component :is="node"></component>
           </NavigationMenuContentImpl>
diff --git a/packages/radix-vue/src/Presence/usePresence.ts b/packages/radix-vue/src/Presence/usePresence.ts
index 5dcd9ebe7..597a0d515 100644
--- a/packages/radix-vue/src/Presence/usePresence.ts
+++ b/packages/radix-vue/src/Presence/usePresence.ts
@@ -52,7 +52,7 @@ export function usePresence(present: Ref<boolean>, node: HTMLElement) {
          * fires after `animation-delay` has expired which would be too late.
          */
         const isAnimating = prevAnimationName !== currentAnimationName;
-        console.log(isAnimating, prevAnimationName, currentAnimationName);
+        // console.log(isAnimating, prevAnimationName, currentAnimationName);
         if (wasPresent && isAnimating) {
           dispatch("ANIMATION_OUT");
         } else {

From e1b2218df6f435c76adcfa89ff2db811dcdbd102 Mon Sep 17 00:00:00 2001
From: khairulhaaziq <rhycoz@yahoo.com>
Date: Sat, 15 Jul 2023 02:02:35 +0800
Subject: [PATCH 09/17] add radix colors for link bg

---
 playground/vue3/src/components/Demo/NavigationMenuDemo.vue | 2 +-
 playground/vue3/tailwind.config.js                         | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/playground/vue3/src/components/Demo/NavigationMenuDemo.vue b/playground/vue3/src/components/Demo/NavigationMenuDemo.vue
index db67d28bf..8d54a4c89 100644
--- a/playground/vue3/src/components/Demo/NavigationMenuDemo.vue
+++ b/playground/vue3/src/components/Demo/NavigationMenuDemo.vue
@@ -39,7 +39,7 @@ const currentTrigger = ref("");
         >
           <ul class="one m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[500px] sm:grid-cols-[0.75fr_1fr]">
             <li class="row-span-3 grid">
-              <NavigationMenuLink asChild>
+              <NavigationMenuLink as-child>
                 <a
                   class="focus:shadow-violet7 from-purple9 to-indigo9 flex h-full w-full select-none flex-col justify-end rounded-[6px] bg-gradient-to-b p-[25px] no-underline outline-none focus:shadow-[0_0_0_2px]"
                   href="/"
diff --git a/playground/vue3/tailwind.config.js b/playground/vue3/tailwind.config.js
index 288e65777..7b3295625 100644
--- a/playground/vue3/tailwind.config.js
+++ b/playground/vue3/tailwind.config.js
@@ -1,4 +1,4 @@
-const { blackA, green, mauve, violet, red } = require("@radix-ui/colors");
+const { blackA, green, mauve, violet, red, indigo, purple } = require("@radix-ui/colors");
 const plugin = require("tailwindcss/plugin");
 
 /** @type {import('tailwindcss').Config} */
@@ -12,6 +12,8 @@ export default {
         ...violet,
         ...green,
         ...red,
+        ...indigo,
+        ...purple,
       },
       keyframes: {
         overlayShow: {

From f2fd4960dd12f71a026ed5e637fab7248ac7967a Mon Sep 17 00:00:00 2001
From: khairulhaaziq <rhycoz@yahoo.com>
Date: Sat, 15 Jul 2023 02:09:14 +0800
Subject: [PATCH 10/17] add prevent default for navigating triggers

---
 .../radix-vue/src/NavigationMenu/NavigationMenuItem.vue   | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
index 6b88c7329..3c4c8d4a5 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
@@ -70,6 +70,14 @@ const handleClose = () => {
 
 const handleKeydown = (ev: KeyboardEvent) => {
   const currentFocus = document.activeElement as HTMLElement;
+  if (
+    ev.key === "ArrowUp" ||
+    ev.key === "ArrowDown" ||
+    ev.key === "ArrowLeft" ||
+    ev.key === "ArrowRight"
+  ) {
+    ev.preventDefault();
+  }
   if (ev.keyCode === 32 || ev.key === "Enter") {
     if (context?.modelValue.value === value) {
       handleClose();

From 45b81d29e8ad55def5477fc50adc45469c29adff Mon Sep 17 00:00:00 2001
From: khairulhaaziq <rhycoz@yahoo.com>
Date: Sat, 15 Jul 2023 02:16:25 +0800
Subject: [PATCH 11/17] disable loop for both trigger and items

---
 .../radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue  | 2 +-
 packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue    | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
index 52b576d46..a6f2cde28 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
@@ -96,7 +96,7 @@ const handleKeydown = (ev: KeyboardEvent) => {
     ev,
     document.activeElement as HTMLElement,
     undefined,
-    { itemsArray: candidates }
+    { itemsArray: candidates, loop: false }
   );
 
   newSelectedElement?.focus();
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
index 3c4c8d4a5..e710c8fe8 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
@@ -99,6 +99,7 @@ const handleKeydown = (ev: KeyboardEvent) => {
 
   const newSelectedElement = useArrowNavigation(ev, currentFocus, undefined, {
     itemsArray: getItems(),
+    loop: false,
   });
   newSelectedElement?.focus();
 };

From 14f46219a5472f6457462737caf8ca30d8d8ea5b Mon Sep 17 00:00:00 2001
From: khairulhaaziq <rhycoz@yahoo.com>
Date: Sat, 15 Jul 2023 02:42:04 +0800
Subject: [PATCH 12/17] fix shift tab contents to move back to trigger

---
 .../NavigationMenuContentImpl.vue             | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
index a6f2cde28..86d84ada2 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
@@ -71,24 +71,32 @@ const handleKeydown = (ev: KeyboardEvent) => {
   const isMetaKey = ev.altKey || ev.ctrlKey || ev.metaKey;
   const isTabKey = ev.key === "Tab" && !isMetaKey;
   const candidates = getTabbableCandidates(ev.currentTarget as HTMLElement);
+  const currentContentIndex = candidates.findIndex(
+    (i) => i === document.activeElement
+  );
+
   if (isTabKey) {
     const focusedElement = document.activeElement;
     const index = candidates.findIndex(
       (candidate) => candidate === focusedElement
     );
     const isMovingBackwards = ev.shiftKey;
-    const nextCandidates = isMovingBackwards
-      ? candidates.slice(0, index).reverse()
-      : candidates.slice(index + 1, candidates.length);
-
-    if (focusFirst(nextCandidates)) {
-      // prevent browser tab keydown because we've handled focus
-      ev.preventDefault();
+    if (isMovingBackwards && currentContentIndex === 0) {
+      props.triggerRef.value?.focus();
     } else {
-      // If we can't focus that means we're at the edges
-      // so focus the proxy and let browser handle
-      // tab/shift+tab keypress on the proxy instead
-      props.focusProxyRef.value?.focus();
+      const nextCandidates = isMovingBackwards
+        ? candidates.slice(0, index).reverse()
+        : candidates.slice(index + 1, candidates.length);
+
+      if (focusFirst(nextCandidates)) {
+        // prevent browser tab keydown because we've handled focus
+        ev.preventDefault();
+      } else {
+        // If we can't focus that means we're at the edges
+        // so focus the proxy and let browser handle
+        // tab/shift+tab keypress on the proxy instead
+        props.focusProxyRef.value?.focus();
+      }
     }
   }
 

From 4af499d6c0b94a726526a84d962ea750cafd8aab Mon Sep 17 00:00:00 2001
From: khairulhaaziq <rhycoz@yahoo.com>
Date: Sat, 15 Jul 2023 02:48:48 +0800
Subject: [PATCH 13/17] fix tab management for trigger when content opened

---
 packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue
index 53989e027..56e700a99 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue
@@ -65,7 +65,7 @@ const handleKeydown = (ev: KeyboardEvent) => {
   const entryKey = { horizontal: "ArrowDown", vertical: verticalEntryKey }[
     context!.orientation
   ];
-  if (open.value && ev.key === entryKey) {
+  if (open.value && (ev.key === entryKey || ev.key === "Tab")) {
     itemContext!.onEntryKeyDown();
     // Prevent FocusGroupItem from handling the event
     ev.preventDefault();

From db60583bcb58106ee26d6148a2a4417930560f27 Mon Sep 17 00:00:00 2001
From: khairulhaaziq <rhycoz@yahoo.com>
Date: Sat, 15 Jul 2023 03:03:49 +0800
Subject: [PATCH 14/17] fix tab last item

---
 .../NavigationMenu/NavigationMenuContentImpl.vue   | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
index 86d84ada2..e50b8d099 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
@@ -71,17 +71,25 @@ const handleKeydown = (ev: KeyboardEvent) => {
   const isMetaKey = ev.altKey || ev.ctrlKey || ev.metaKey;
   const isTabKey = ev.key === "Tab" && !isMetaKey;
   const candidates = getTabbableCandidates(ev.currentTarget as HTMLElement);
-  const currentContentIndex = candidates.findIndex(
-    (i) => i === document.activeElement
+  const triggerItems = getItems(context?.rootNavigationMenu.value);
+  const triggerButtonIndex = triggerItems.findIndex(
+    (i) => i === props.triggerRef.value
   );
+  const nextTriggerButton = triggerItems[triggerButtonIndex + 1];
 
   if (isTabKey) {
     const focusedElement = document.activeElement;
     const index = candidates.findIndex(
       (candidate) => candidate === focusedElement
     );
+    if (
+      index === candidates.length - 1 &&
+      triggerButtonIndex !== triggerItems.length - 1
+    ) {
+      return nextTriggerButton.focus();
+    }
     const isMovingBackwards = ev.shiftKey;
-    if (isMovingBackwards && currentContentIndex === 0) {
+    if (isMovingBackwards && index === 0) {
       props.triggerRef.value?.focus();
     } else {
       const nextCandidates = isMovingBackwards

From ce2022d02a6e1e36862d625478ae4e19ee0d181d Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sat, 15 Jul 2023 23:21:15 +0800
Subject: [PATCH 15/17] add visually hidden component for proxy focus

---
 .../src/VisuallyHidden/VisuallyHidden.vue     | 22 +++++++++++++++++++
 .../radix-vue/src/VisuallyHidden/index.ts     |  1 +
 2 files changed, 23 insertions(+)
 create mode 100644 packages/radix-vue/src/VisuallyHidden/VisuallyHidden.vue
 create mode 100644 packages/radix-vue/src/VisuallyHidden/index.ts

diff --git a/packages/radix-vue/src/VisuallyHidden/VisuallyHidden.vue b/packages/radix-vue/src/VisuallyHidden/VisuallyHidden.vue
new file mode 100644
index 000000000..3fa5baf65
--- /dev/null
+++ b/packages/radix-vue/src/VisuallyHidden/VisuallyHidden.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { PrimitiveSpan } from "@/Primitive";
+</script>
+
+<template>
+  <PrimitiveSpan
+    :style="{
+      // See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
+      position: 'absolute',
+      border: 0,
+      width: 1,
+      height: 1,
+      padding: 0,
+      margin: -1,
+      overflow: 'hidden',
+      clip: 'rect(0, 0, 0, 0)',
+      whiteSpace: 'nowrap',
+      wordWrap: 'normal',
+    }"
+  >
+  </PrimitiveSpan>
+</template>
diff --git a/packages/radix-vue/src/VisuallyHidden/index.ts b/packages/radix-vue/src/VisuallyHidden/index.ts
new file mode 100644
index 000000000..a98452be3
--- /dev/null
+++ b/packages/radix-vue/src/VisuallyHidden/index.ts
@@ -0,0 +1 @@
+export { default as VisuallyHidden } from "./VisuallyHidden.vue";

From 75addac8902687a2cf0b292a4f04fc32dad7abf1 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sat, 15 Jul 2023 23:21:23 +0800
Subject: [PATCH 16/17] add focus outside composables

---
 packages/radix-vue/src/shared/index.ts        |  1 +
 .../radix-vue/src/shared/onFocusOutside.ts    | 27 +++++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 packages/radix-vue/src/shared/onFocusOutside.ts

diff --git a/packages/radix-vue/src/shared/index.ts b/packages/radix-vue/src/shared/index.ts
index 7cc74fa1f..45c8c29f1 100644
--- a/packages/radix-vue/src/shared/index.ts
+++ b/packages/radix-vue/src/shared/index.ts
@@ -1,3 +1,4 @@
+export { onFocusOutside } from "./onFocusOutside";
 export { useArrowNavigation } from "./useArrowNavigation";
 export { useMouseInElement } from "./useMouseInElement";
 export { useHoverDelay } from "./useHoverDelay";
diff --git a/packages/radix-vue/src/shared/onFocusOutside.ts b/packages/radix-vue/src/shared/onFocusOutside.ts
new file mode 100644
index 000000000..05b4163d6
--- /dev/null
+++ b/packages/radix-vue/src/shared/onFocusOutside.ts
@@ -0,0 +1,27 @@
+import { type MaybeElementRef, unrefElement } from "@vueuse/core";
+import { onMounted, onUnmounted } from "vue";
+
+export const onFocusOutside = (
+  element: MaybeElementRef,
+  handler: (event: FocusEvent) => void
+) => {
+  const handleFocusOut = (ev: FocusEvent) => {
+    const el = unrefElement(element);
+    const isFocusInsideElement = el?.contains(ev.relatedTarget as Node);
+
+    if (!isFocusInsideElement) {
+      handler(ev);
+    }
+  };
+
+  onMounted(() => {
+    const el = unrefElement(element);
+    // @ts-ignore
+    el?.addEventListener("focusout", handleFocusOut);
+  });
+  onUnmounted(() => {
+    const el = unrefElement(element);
+    // @ts-ignore
+    el?.removeEventListener("focusout", handleFocusOut);
+  });
+};

From 5014df555f954d4019b478c2d08cc4a1caf40e2a Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sat, 15 Jul 2023 23:23:22 +0800
Subject: [PATCH 17/17] fix focus, and should remove content when focus outside
 from the navbar

---
 .../NavigationMenu/NavigationMenuContent.vue  |  2 +-
 .../NavigationMenuContentImpl.vue             | 55 +++++++++----------
 .../src/NavigationMenu/NavigationMenuItem.vue | 40 +++++++++-----
 .../src/NavigationMenu/NavigationMenuRoot.vue | 35 ++++++++++--
 .../NavigationMenu/NavigationMenuTrigger.vue  | 40 ++++++++++++--
 .../NavigationMenu/NavigationMenuViewport.vue |  9 +--
 6 files changed, 119 insertions(+), 62 deletions(-)

diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
index 6cd527b76..c609e7d73 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
@@ -28,7 +28,7 @@ const commonProps = computed(() => ({
   triggerRef: itemContext!.triggerRef,
   focusProxyRef: itemContext!.focusProxyRef,
   wasEscapeCloseRef: itemContext!.wasEscapeCloseRef,
-  // onContentFocusOutside: itemContext!.onContentFocusOutside,
+  onContentFocusOutside: itemContext!.onContentFocusOutside,
   // onRootContentClose: itemContext!.onRootContentClose,
 }));
 
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
index e50b8d099..9b7fe2238 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
@@ -6,7 +6,7 @@ interface NavigationMenuContentImplProps {
   triggerRef: Ref<HTMLElement | undefined>;
   focusProxyRef: Ref<HTMLElement | undefined>;
   wasEscapeCloseRef: Ref<boolean>;
-  // onContentFocusOutside(): void;
+  onContentFocusOutside(): void;
   // onRootContentClose(): void;
 }
 </script>
@@ -20,7 +20,7 @@ import {
   makeContentId,
   makeTriggerId,
 } from "./utils";
-import { useArrowNavigation, useCollection } from "@/shared";
+import { useArrowNavigation, useCollection, onFocusOutside } from "@/shared";
 
 const props = defineProps<NavigationMenuContentImplProps>();
 const emits = defineEmits<{
@@ -29,6 +29,7 @@ const emits = defineEmits<{
 
 const { getItems } = useCollection();
 
+const elementRef = ref<HTMLElement>();
 const context = inject(NAVIGATION_MENU_INJECTION_KEY);
 const triggerId = makeTriggerId(context!.baseId, props.value);
 const contentId = makeContentId(context!.baseId, props.value);
@@ -67,44 +68,37 @@ const motionAttribute = computed(() => {
   return attribute;
 });
 
+onFocusOutside(elementRef, (ev) => {
+  props.onContentFocusOutside();
+  const target = ev.target as HTMLElement;
+  // Only dismiss content when focus moves outside of the menu
+  if (context!.rootNavigationMenu?.value?.contains(target)) ev.preventDefault();
+});
+
 const handleKeydown = (ev: KeyboardEvent) => {
   const isMetaKey = ev.altKey || ev.ctrlKey || ev.metaKey;
   const isTabKey = ev.key === "Tab" && !isMetaKey;
   const candidates = getTabbableCandidates(ev.currentTarget as HTMLElement);
-  const triggerItems = getItems(context?.rootNavigationMenu.value);
-  const triggerButtonIndex = triggerItems.findIndex(
-    (i) => i === props.triggerRef.value
-  );
-  const nextTriggerButton = triggerItems[triggerButtonIndex + 1];
 
   if (isTabKey) {
     const focusedElement = document.activeElement;
     const index = candidates.findIndex(
       (candidate) => candidate === focusedElement
     );
-    if (
-      index === candidates.length - 1 &&
-      triggerButtonIndex !== triggerItems.length - 1
-    ) {
-      return nextTriggerButton.focus();
-    }
     const isMovingBackwards = ev.shiftKey;
-    if (isMovingBackwards && index === 0) {
-      props.triggerRef.value?.focus();
+    const nextCandidates = isMovingBackwards
+      ? candidates.slice(0, index).reverse()
+      : candidates.slice(index + 1, candidates.length);
+
+    if (focusFirst(nextCandidates)) {
+      // prevent browser tab keydown because we've handled focus
+      ev.preventDefault();
     } else {
-      const nextCandidates = isMovingBackwards
-        ? candidates.slice(0, index).reverse()
-        : candidates.slice(index + 1, candidates.length);
-
-      if (focusFirst(nextCandidates)) {
-        // prevent browser tab keydown because we've handled focus
-        ev.preventDefault();
-      } else {
-        // If we can't focus that means we're at the edges
-        // so focus the proxy and let browser handle
-        // tab/shift+tab keypress on the proxy instead
-        props.focusProxyRef.value?.focus();
-      }
+      // If we can't focus that means we're at the edges
+      // so focus the proxy and let browser handle
+      // tab/shift+tab keypress on the proxy instead
+      props.focusProxyRef.value?.focus();
+      return;
     }
   }
 
@@ -114,8 +108,8 @@ const handleKeydown = (ev: KeyboardEvent) => {
     undefined,
     { itemsArray: candidates, loop: false }
   );
-
   newSelectedElement?.focus();
+  ev.preventDefault();
 };
 
 const handleEscape = (ev: KeyboardEvent) => {
@@ -129,10 +123,11 @@ defineExpose({
 
 <template>
   <div
+    ref="elementRef"
     :id="contentId"
     :aria-labelledby="triggerId"
     :data-motion="motionAttribute"
-    @keydown.prevent="handleKeydown"
+    @keydown="handleKeydown"
     @keydown.escape.prevent="handleEscape"
   >
     <slot></slot>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
index e710c8fe8..9ad73652e 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
@@ -10,9 +10,9 @@ export type NavigationMenuItemContextValue = {
   focusProxyRef: Ref<HTMLElement | undefined>;
   wasEscapeCloseRef: Ref<boolean>;
   onEntryKeyDown(): void;
-  // onFocusProxyEnter(side: 'start' | 'end'): void;
+  onFocusProxyEnter(side: "start" | "end"): void;
   // onRootContentClose(): void;
-  // onContentFocusOutside(): void;
+  onContentFocusOutside(): void;
 };
 
 export const NAVIGATION_MENU_ITEM_INJECTION_KEY =
@@ -31,7 +31,7 @@ import {
 } from "vue";
 import { PrimitiveLi } from "@/Primitive";
 import { useArrowNavigation, useCollection, useId } from "@/shared";
-import { getTabbableCandidates, focusFirst } from "./utils";
+import { getTabbableCandidates, removeFromTabOrder, focusFirst } from "./utils";
 import { unrefElement } from "@vueuse/core";
 
 const props = defineProps<NavigationMenuItemProps>();
@@ -42,8 +42,29 @@ const value = props.value || useId();
 const triggerRef = ref<HTMLElement>();
 const contentRef = ref<VNode>();
 const focusProxyRef = ref<HTMLElement>();
+let restoreContentTabOrderRef: () => void = () => ({});
 
 const wasEscapeCloseRef = ref(false);
+const handleContentEntry = async (side = "start") => {
+  // @ts-ignore
+  const el = contentRef.value?.children?.[0]?.el.parentElement as HTMLElement;
+  if (el) {
+    restoreContentTabOrderRef();
+    const candidates = getTabbableCandidates(unrefElement(el) as HTMLElement);
+    if (candidates.length)
+      focusFirst(side === "start" ? candidates : candidates.reverse());
+  }
+};
+
+const handleContentExit = () => {
+  // @ts-ignore
+  const el = contentRef.value?.children?.[0]?.el.parentElement as HTMLElement;
+  if (el) {
+    const candidates = getTabbableCandidates(unrefElement(el) as HTMLElement);
+    if (candidates.length)
+      restoreContentTabOrderRef = removeFromTabOrder(candidates);
+  }
+};
 
 provide(NAVIGATION_MENU_ITEM_INJECTION_KEY, {
   value,
@@ -51,16 +72,9 @@ provide(NAVIGATION_MENU_ITEM_INJECTION_KEY, {
   contentRef,
   focusProxyRef,
   wasEscapeCloseRef,
-  onEntryKeyDown: (side = "start") => {
-    // @ts-ignore
-    const el = contentRef.value?.children?.[0]?.el.parentElement as HTMLElement;
-    if (el) {
-      // @ts-ignore
-      const candidates = getTabbableCandidates(unrefElement(el));
-      if (candidates.length)
-        focusFirst(side === "start" ? candidates : candidates.reverse());
-    }
-  },
+  onEntryKeyDown: handleContentEntry,
+  onFocusProxyEnter: handleContentEntry,
+  onContentFocusOutside: handleContentExit,
 });
 
 const handleClose = () => {
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuRoot.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuRoot.vue
index cf8d22cbc..9fa111ade 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuRoot.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuRoot.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { type InjectionKey, type Ref } from "vue";
 import type { Direction, Orientation } from "./utils";
-import { useCollection, useId } from "@/shared";
+import { onFocusOutside, useCollection, useId } from "@/shared";
 
 export interface NavigationMenuProps {
   modelValue?: string;
@@ -21,6 +21,10 @@ export interface NavigationMenuProps {
   skipDelayDuration?: number;
 }
 
+interface VNodeWithParentProps extends VNode {
+  parentProps: any;
+}
+
 export interface NavigationMenuContextValue {
   isRootMenu: boolean;
   modelValue: Ref<string>;
@@ -33,8 +37,11 @@ export interface NavigationMenuContextValue {
   onIndicatorTrackChange(indicatorTrack: HTMLElement | undefined): void;
   viewport: Ref<HTMLElement | undefined>;
   onViewportChange(viewport: HTMLElement | undefined): void;
-  viewportContent: Ref<Map<string, VNode>>;
-  onViewportContentChange(contentValue: string, contentData: VNode): void;
+  viewportContent: Ref<Map<string, VNodeWithParentProps>>;
+  onViewportContentChange(
+    contentValue: string,
+    contentData: VNodeWithParentProps
+  ): void;
   onViewportContentRemove(contentValue: string): void;
   onTriggerEnter(itemValue: string): void;
   onTriggerLeave(): void;
@@ -49,8 +56,13 @@ export const NAVIGATION_MENU_INJECTION_KEY =
 </script>
 
 <script setup lang="ts">
-import { useDebounceFn, useVModel } from "@vueuse/core";
-import { provide, ref, type VNode } from "vue";
+import {
+  onClickOutside,
+  useDebounceFn,
+  useFocusWithin,
+  useVModel,
+} from "@vueuse/core";
+import { provide, ref, watch, type VNode } from "vue";
 import { PrimitiveNav, usePrimitiveElement } from "@/Primitive";
 
 const props = withDefaults(defineProps<NavigationMenuProps>(), {
@@ -76,9 +88,20 @@ const { primitiveElement, currentElement: rootNavigationMenu } =
 const { createCollection } = useCollection();
 createCollection();
 
+const closeMenu = () => {
+  modelValue.value = "";
+};
+
+onClickOutside(rootNavigationMenu, () => {
+  closeMenu();
+});
+onFocusOutside(rootNavigationMenu, () => {
+  closeMenu();
+});
+
 const indicatorTrack = ref<HTMLElement>();
 const viewport = ref<HTMLElement>();
-const viewportContent = ref<Map<string, VNode>>(new Map());
+const viewportContent = ref<Map<string, VNodeWithParentProps>>(new Map());
 
 const debouncedFn = useDebounceFn((val: string) => {
   previousValue.value = modelValue.value;
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue
index 56e700a99..590ac35c6 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { NAVIGATION_MENU_INJECTION_KEY } from "./NavigationMenuRoot.vue";
 import { NAVIGATION_MENU_ITEM_INJECTION_KEY } from "./NavigationMenuItem.vue";
-import { computed, inject, onMounted, ref } from "vue";
+import { computed, inject, onMounted, ref, type VNode } from "vue";
 import { PrimitiveButton, usePrimitiveElement } from "@/Primitive";
+import { VisuallyHidden } from "@/VisuallyHidden";
 import { makeTriggerId, makeContentId, getOpenState } from "./utils";
+import { unrefElement } from "@vueuse/core";
 
 const props = defineProps<{
   disabled?: boolean;
@@ -56,7 +58,11 @@ const handlePointerLeave = (ev: PointerEvent) => {
 };
 
 const handleClick = (ev: MouseEvent) => {
-  context?.onItemSelect(itemContext!.value);
+  if (open.value) {
+    context?.onItemSelect("");
+  } else {
+    context?.onItemSelect(itemContext!.value);
+  }
   wasClickCloseRef.value = open.value;
 };
 
@@ -65,13 +71,33 @@ const handleKeydown = (ev: KeyboardEvent) => {
   const entryKey = { horizontal: "ArrowDown", vertical: verticalEntryKey }[
     context!.orientation
   ];
-  if (open.value && (ev.key === entryKey || ev.key === "Tab")) {
+  if (open.value && ev.key === entryKey) {
     itemContext!.onEntryKeyDown();
     // Prevent FocusGroupItem from handling the event
     ev.preventDefault();
     ev.stopPropagation();
   }
 };
+
+const setFocusProxyRef = (node: VNode) => {
+  // @ts-ignore
+  itemContext!.focusProxyRef.value = unrefElement(node);
+  return undefined;
+};
+
+const handleVisuallyHiddenFocus = (ev: FocusEvent) => {
+  const content = // @ts-ignore
+    (itemContext!.contentRef.value?.children?.[0].el as HTMLElement)
+      .parentElement;
+  const prevFocusedElement = ev.relatedTarget as HTMLElement | null;
+
+  const wasTriggerFocused = prevFocusedElement === triggerElement.value;
+  const wasFocusFromContent = content?.contains(prevFocusedElement);
+
+  if (wasTriggerFocused || !wasFocusFromContent) {
+    itemContext!.onFocusProxyEnter(wasTriggerFocused ? "start" : "end");
+  }
+};
 </script>
 
 <template>
@@ -95,7 +121,13 @@ const handleKeydown = (ev: KeyboardEvent) => {
   </PrimitiveButton>
 
   <template v-if="open">
-    <!-- VisuallyHiddenPrimitive -->
+    <VisuallyHidden
+      aria-hidden
+      :tabIndex="0"
+      :ref="setFocusProxyRef"
+      @focus="handleVisuallyHiddenFocus"
+    >
+    </VisuallyHidden>
     <span :aria-owns="contentId" v-if="context?.viewport"></span>
   </template>
 </template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue
index e553347ea..5ee19bfa7 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue
@@ -81,14 +81,7 @@ defineOptions({
         <Presence :present="activeContentValue === node.props?.value">
           <NavigationMenuContentImpl
             :ref="setRef"
-            v-bind="
-              //@ts-ignore
-              node.parentProps
-            "
-            :value="node.props?.value"
-            :triggerRef="node.props?.triggerRef"
-            :focusProxyRef="node.props?.focusProxyRef"
-            :wasEscapeCloseRef="node.props?.wasEscapeCloseRef"
+            v-bind="{ ...node.props, ...node.parentProps }"
             @escape="handleClose(node)"
           >
             <component :is="node"></component>