diff --git a/packages/radix-vue/README.md b/packages/radix-vue/README.md
index cd20a8523..a025bcaa9 100644
--- a/packages/radix-vue/README.md
+++ b/packages/radix-vue/README.md
@@ -13,4 +13,4 @@ pnpm install radix-vue
 
 ## Documentation
 
-For full documentation, visit [radix-vue.com](https://radix-vue.com).
\ No newline at end of file
+For full documentation, visit [radix-vue.com](https://radix-vue.com).
diff --git a/packages/radix-vue/package.json b/packages/radix-vue/package.json
index f2c6069a7..63e29293f 100644
--- a/packages/radix-vue/package.json
+++ b/packages/radix-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "radix-vue",
-  "version": "0.0.1-rc-.7",
+  "version": "0.0.1-rc-.8",
   "description": "Vue port for Radix UI Primitives.",
   "type": "module",
   "main": "./dist/index.umd.cjs",
diff --git a/packages/radix-vue/src/ContextMenu/ContextMenuCheckboxItem.vue b/packages/radix-vue/src/ContextMenu/ContextMenuCheckboxItem.vue
index c7f8c9614..a9259df3b 100644
--- a/packages/radix-vue/src/ContextMenu/ContextMenuCheckboxItem.vue
+++ b/packages/radix-vue/src/ContextMenu/ContextMenuCheckboxItem.vue
@@ -1,25 +1,28 @@
-<script setup lang="ts">
-import type { Ref } from "vue";
-import { inject, watchEffect, provide, toRef } from "vue";
-import {
-  CONTEXT_MENU_INJECTION_KEY,
-  type ContextMenuProvideValue,
-} from "./ContextMenuRoot.vue";
-import { PrimitiveDiv, usePrimitiveElement } from "@/Primitive";
+<script lang="ts">
+import { useVModel } from "@vueuse/core";
 
 interface ContextMenuCheckboxItemProps {
+  asChild?: boolean;
+  checked?: boolean;
+  //onCheckedChange?: void;
   modelValue?: boolean;
   id?: string;
   name?: string;
   value?: string;
   disabled?: boolean;
+  onSelect?: void;
+  textValue?: string;
 }
+</script>
 
-export type ContextMenuCheckboxProvideValue = Readonly<Ref<boolean>>;
-provide<ContextMenuCheckboxProvideValue>(
-  "modelValue",
-  toRef(() => props.modelValue)
-);
+<script setup lang="ts">
+import { inject, computed, provide } from "vue";
+import BaseMenuItem from "../shared/component/BaseMenuItem.vue";
+import { CONTEXT_MENU_ITEM_SYMBOL } from "./utils";
+import {
+  CONTEXT_MENU_INJECTION_KEY,
+  type ContextMenuProvideValue,
+} from "./ContextMenuRoot.vue";
 
 const injectedValue = inject<ContextMenuProvideValue>(
   CONTEXT_MENU_INJECTION_KEY
@@ -31,92 +34,42 @@ const emit = defineEmits<{
   (e: "update:modelValue", value: boolean): void;
 }>();
 
-const { primitiveElement, currentElement } = usePrimitiveElement();
-
-function handleKeydown(e: KeyboardEvent) {
-  if (e.key === "Escape") {
-    handleCloseMenu();
-  }
-  const allToggleItem = injectedValue!.itemsArray;
-  if (allToggleItem.length) {
-    const currentTabIndex = allToggleItem.indexOf(currentElement.value!);
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      if (!injectedValue?.selectedElement.value) {
-        injectedValue?.changeSelected(allToggleItem[0]);
-      } else if (allToggleItem[currentTabIndex + 1]) {
-        injectedValue?.changeSelected(allToggleItem[currentTabIndex + 1]);
-      } else {
-        injectedValue?.changeSelected(allToggleItem[0]);
-      }
-    }
-
-    if (e.key === "ArrowUp") {
-      e.preventDefault();
-      if (!injectedValue?.selectedElement.value) {
-        injectedValue?.changeSelected(allToggleItem[allToggleItem.length - 1]);
-      } else if (allToggleItem[currentTabIndex - 1]) {
-        injectedValue?.changeSelected(allToggleItem[currentTabIndex - 1]);
-      } else {
-        injectedValue?.changeSelected(allToggleItem[allToggleItem.length - 1]);
-      }
-    }
-
-    if (e.keyCode === 32 || e.key === "Enter") {
-      if (injectedValue?.selectedElement.value) {
-        updateModelValue();
-      }
-    }
-  }
-}
+const modelValue = useVModel(props, "modelValue", emit, {
+  passive: true,
+});
 
-watchEffect(() => {
-  if (injectedValue?.selectedElement.value === currentElement.value) {
-    currentElement.value?.focus();
-  }
+const checkboxDataState = computed(() => {
+  return modelValue.value ? "checked" : "unchecked";
 });
 
-function handleHover() {
-  if (!props.disabled) {
-    injectedValue!.changeSelected(currentElement.value!);
-  }
+function handleClick() {
+  modelValue.value = !modelValue.value;
 }
-
-function handleCloseMenu() {
+function handleEscape() {
   injectedValue?.hideTooltip();
-  document.querySelector("body")!.style.pointerEvents = "";
 }
 
-function updateModelValue() {
-  return emit("update:modelValue", !props.modelValue);
-}
+provide(CONTEXT_MENU_ITEM_SYMBOL, {
+  modelValue,
+});
 </script>
 
 <template>
-  <PrimitiveDiv
-    role="menuitem"
-    ref="primitiveElement"
-    @keydown="handleKeydown"
-    data-radix-vue-collection-item
-    @click.prevent="updateModelValue"
-    @mouseenter="handleHover"
-    @mouseleave="injectedValue!.changeSelected(undefined)"
-    :data-highlighted="
-      injectedValue?.selectedElement.value === currentElement ? '' : null
-    "
-    :aria-disabled="props.disabled ? true : undefined"
-    :data-disabled="props.disabled ? '' : undefined"
-    :data-orientation="injectedValue?.orientation"
-    :tabindex="
-      injectedValue?.selectedElement.value === currentElement ? '0' : '-1'
-    "
+  <BaseMenuItem
+    ref="currentElement"
+    :disabled="props.disabled"
+    :rootProvider="injectedValue"
+    :orientation="injectedValue?.orientation"
+    @handle-click="handleClick"
+    @escape-keydown="handleEscape"
+    role="menuitemcheckbox"
+    :data-state="checkboxDataState"
+    :aria-checked="props.modelValue ? true : false"
   >
     <input
       type="checkbox"
       :id="props.id"
-      :aria-valuenow="props.modelValue"
       v-bind="props.modelValue"
-      @change="updateModelValue"
       :checked="props.modelValue"
       :name="props.name"
       aria-hidden="true"
@@ -124,5 +77,5 @@ function updateModelValue() {
       style="opacity: 0; position: absolute; inset: 0"
     />
     <slot />
-  </PrimitiveDiv>
+  </BaseMenuItem>
 </template>
diff --git a/packages/radix-vue/src/ContextMenu/ContextMenuContent.vue b/packages/radix-vue/src/ContextMenu/ContextMenuContent.vue
index 2a60992e4..02cf5f8d0 100644
--- a/packages/radix-vue/src/ContextMenu/ContextMenuContent.vue
+++ b/packages/radix-vue/src/ContextMenu/ContextMenuContent.vue
@@ -1,102 +1,106 @@
 <script lang="ts">
+import { onClickOutside } from "@vueuse/core";
+import { useCollection } from "@/shared";
+
+export type Boundary = Element | null | Array<Element | null>;
+
 export interface ContextMenuContentProps extends PopperContentProps {
   asChild?: boolean;
-  forceMount?: boolean;
+  loop?: boolean; //false
+  //onOpenAutoFocus?: void;
+  //onCloseAutoFocus?: void;
+  //onEscapeKeyDown?: void;
+  //onPointerDownOutside?: void;
+  //onInteractOutside?: void;
 }
 </script>
 
 <script setup lang="ts">
-import { inject, watchEffect } from "vue";
-import { useClickOutside } from "../shared/useClickOutside";
-import {
-  CONTEXT_MENU_INJECTION_KEY,
-  type ContextMenuProvideValue,
-} from "./ContextMenuRoot.vue";
-import { PopperContent, type PopperContentProps } from "@/Popper";
-import { usePrimitiveElement } from "@/Primitive";
+import { inject, watchEffect, nextTick } from "vue";
+import { PrimitiveDiv, usePrimitiveElement } from "@/Primitive";
 
-const injectedValue = inject<ContextMenuProvideValue>(
-  CONTEXT_MENU_INJECTION_KEY
-);
+import { CONTEXT_MENU_INJECTION_KEY } from "./ContextMenuRoot.vue";
+import { PopperContent, type PopperContentProps } from "@/Popper";
 
 const props = withDefaults(defineProps<ContextMenuContentProps>(), {
-  side: "right",
+  side: "bottom",
   align: "start",
-  alignOffset: 3,
   avoidCollisions: true,
 });
 
+const injectedValue = inject(CONTEXT_MENU_INJECTION_KEY);
+
 const { primitiveElement, currentElement: tooltipContentElement } =
   usePrimitiveElement();
 
+const { createCollection, getItems } = useCollection();
+createCollection(tooltipContentElement);
+
 watchEffect(() => {
   if (tooltipContentElement.value) {
     if (injectedValue?.modelValue.value) {
-      setTimeout(() => {
-        focusFirstRadixElement();
-        fillItemsArray();
-      }, 0);
-
-      window.addEventListener("mousedown", closeDialogWhenClickOutside);
+      injectedValue.itemsArray = getItems(tooltipContentElement.value);
+      window.addEventListener("keydown", handleKeydown);
       window.addEventListener("scroll", closeDialogWhenScrolled);
+    } else {
+      cleanupEvents();
     }
   }
 });
 
-function closeDialogWhenClickOutside(e: MouseEvent) {
-  if (tooltipContentElement.value) {
-    const clickOutside = useClickOutside(e, tooltipContentElement.value);
-    if (clickOutside) {
-      injectedValue?.hideTooltip();
-      window.removeEventListener("mousedown", closeDialogWhenClickOutside);
-    }
+watchEffect(() => {
+  if (injectedValue?.selectedElement.value) {
+    cleanupEvents();
   }
+});
+
+function cleanupEvents() {
+  window.removeEventListener("keydown", handleKeydown);
+  window.removeEventListener("scroll", closeDialogWhenScrolled);
 }
 
+onClickOutside(tooltipContentElement, (event) => {
+  const target = event.target as HTMLElement;
+  if (target.closest('[role="menuitem"]')) return;
+  injectedValue?.hideTooltip();
+});
+
 function closeDialogWhenScrolled() {
   injectedValue?.hideTooltip();
   window.removeEventListener("scroll", closeDialogWhenScrolled);
 }
 
-function focusFirstRadixElement() {
-  if (!tooltipContentElement.value) {
-    return console.log("tooltipContentElement not found!");
-  }
-  const allToggleItem = Array.from(
-    tooltipContentElement.value.querySelectorAll(
-      "[data-radix-vue-collection-item]"
-    )
-  ) as HTMLElement[];
-  if (allToggleItem.length) {
-    injectedValue!.selectedElement.value = allToggleItem[0];
-    allToggleItem[0].focus();
+async function handleKeydown(e: KeyboardEvent) {
+  e.preventDefault();
+  if (e.key === "ArrowDown" || e.key === "Enter" || e.keyCode === 32) {
+    injectedValue?.changeSelected(injectedValue.itemsArray?.[0]);
+    injectedValue?.selectedElement.value?.focus();
+  } else if (e.key === "ArrowUp") {
+    const newSelectedElement =
+      injectedValue?.itemsArray?.[injectedValue?.itemsArray.length - 1];
+    injectedValue?.changeSelected(newSelectedElement!);
+    newSelectedElement?.focus();
   }
-}
-
-function fillItemsArray() {
-  if (!tooltipContentElement.value) {
-    return console.log("tooltipContentElement not found!");
-  }
-  const allToggleItem = Array.from(
-    tooltipContentElement.value.querySelectorAll(
-      "[data-radix-vue-collection-item]:not([data-disabled])"
-    )
-  ) as HTMLElement[];
-  injectedValue!.itemsArray = allToggleItem;
+  window.removeEventListener("keydown", handleKeydown);
 }
 </script>
 
 <template>
   <PopperContent
-    ref="primitiveElement"
-    v-if="injectedValue?.modelValue.value"
     v-bind="props"
-    :data-state="injectedValue?.modelValue.value ? 'open' : 'closed'"
-    :asChild="props.asChild"
-    data-side="bottom"
-    role="tooltip"
-    style="pointer-events: auto"
+    v-if="injectedValue?.modelValue.value"
+    prioritize-position
   >
-    <slot />
+    <PrimitiveDiv
+      ref="primitiveElement"
+      :data-state="injectedValue?.modelValue.value ? 'open' : 'closed'"
+      :data-side="props.side"
+      :data-align="props.align"
+      role="tooltip"
+      :asChild="props.asChild"
+      style="pointer-events: auto"
+    >
+      <slot />
+    </PrimitiveDiv>
   </PopperContent>
 </template>
diff --git a/packages/radix-vue/src/ContextMenu/ContextMenuGroup.vue b/packages/radix-vue/src/ContextMenu/ContextMenuGroup.vue
index db6304e2d..5d6e803fd 100644
--- a/packages/radix-vue/src/ContextMenu/ContextMenuGroup.vue
+++ b/packages/radix-vue/src/ContextMenu/ContextMenuGroup.vue
@@ -37,7 +37,7 @@ const props = withDefaults(defineProps<ContextMenuGroupProps>(), {
 
 const emits = defineEmits(["update:modelValue"]);
 
-const { primitiveElement, currentElement: parentElementRef } =
+const { primitiveElement, currentElement: parentElement } =
   usePrimitiveElement();
 
 provide<ContextMenuGroupProvideValue>(CONTEXT_MENU_GROUP_INJECTION_KEY, {
@@ -57,7 +57,7 @@ provide<ContextMenuGroupProvideValue>(CONTEXT_MENU_GROUP_INJECTION_KEY, {
       emits("update:modelValue", modelValueArray);
     }
   },
-  parentElement: parentElementRef,
+  parentElement,
 });
 </script>
 
diff --git a/packages/radix-vue/src/ContextMenu/ContextMenuItem.vue b/packages/radix-vue/src/ContextMenu/ContextMenuItem.vue
index d54fc2dc0..c36fdb029 100644
--- a/packages/radix-vue/src/ContextMenu/ContextMenuItem.vue
+++ b/packages/radix-vue/src/ContextMenu/ContextMenuItem.vue
@@ -1,97 +1,53 @@
 <script setup lang="ts">
-import { inject, watchEffect } from "vue";
+import { inject } from "vue";
+import BaseMenuItem from "../shared/component/BaseMenuItem.vue";
 import {
   CONTEXT_MENU_INJECTION_KEY,
   type ContextMenuProvideValue,
 } from "./ContextMenuRoot.vue";
-import { PrimitiveDiv, usePrimitiveElement } from "@/Primitive";
-
-const injectedValue = inject<ContextMenuProvideValue>(
-  CONTEXT_MENU_INJECTION_KEY
-);
+import {
+  CONTEXT_MENU_SUB_INJECTION_KEY,
+  type ContextMenuSubProvideValue,
+} from "./ContextMenuSub.vue";
 
-interface ToggleGroupItemProps {
+interface ContextMenuItemProps {
+  asChild?: boolean;
   value?: string;
   disabled?: boolean;
+  //onSelect?: void;
+  textValue?: string;
 }
 
-const props = defineProps<ToggleGroupItemProps>();
-
-const { primitiveElement, currentElement } = usePrimitiveElement();
-
-function handleKeydown(e: KeyboardEvent) {
-  if (e.key === "Escape") {
-    handleCloseMenu();
-  }
-  const allToggleItem = injectedValue!.itemsArray;
-  if (allToggleItem.length) {
-    const currentTabIndex = allToggleItem.indexOf(currentElement.value!);
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      if (!injectedValue?.selectedElement.value) {
-        injectedValue?.changeSelected(allToggleItem[0]);
-      } else if (allToggleItem[currentTabIndex + 1]) {
-        injectedValue?.changeSelected(allToggleItem[currentTabIndex + 1]);
-      } else {
-        injectedValue?.changeSelected(allToggleItem[0]);
-      }
-    }
-
-    if (e.key === "ArrowUp") {
-      e.preventDefault();
-      if (!injectedValue?.selectedElement.value) {
-        injectedValue?.changeSelected(allToggleItem[allToggleItem.length - 1]);
-      } else if (allToggleItem[currentTabIndex - 1]) {
-        injectedValue?.changeSelected(allToggleItem[currentTabIndex - 1]);
-      } else {
-        injectedValue?.changeSelected(allToggleItem[allToggleItem.length - 1]);
-      }
-    }
+const rootInjectedValue = inject<ContextMenuProvideValue>(
+  CONTEXT_MENU_INJECTION_KEY
+);
 
-    if (e.keyCode === 32 || e.key === "Enter") {
-      if (injectedValue?.selectedElement.value) {
-        injectedValue?.selectedElement.value.click();
-      }
-    }
-  }
-}
+const subInjectedValue = inject<ContextMenuSubProvideValue>(
+  CONTEXT_MENU_SUB_INJECTION_KEY
+);
 
-watchEffect(() => {
-  if (injectedValue?.selectedElement.value === currentElement.value) {
-    currentElement.value?.focus();
-  }
-});
+const props = defineProps<ContextMenuItemProps>();
 
-function handleHover() {
-  if (!props.disabled && currentElement.value) {
-    injectedValue!.changeSelected(currentElement.value);
+function handleClick() {
+  if (rootInjectedValue?.selectedElement.value) {
+    rootInjectedValue.hideTooltip();
   }
 }
 
-function handleCloseMenu() {
-  injectedValue?.hideTooltip();
-  document.querySelector("body")!.style.pointerEvents = "";
+function handleEscape() {
+  rootInjectedValue?.hideTooltip();
 }
 </script>
 
 <template>
-  <PrimitiveDiv
-    role="menuitem"
-    ref="primitiveElement"
-    @keydown="handleKeydown"
-    data-radix-vue-collection-item
-    @mouseenter="handleHover"
-    @mouseleave="injectedValue!.changeSelected(undefined)"
-    :data-highlighted="
-      injectedValue?.selectedElement.value === currentElement ? '' : null
-    "
-    :aria-disabled="props.disabled ? true : undefined"
-    :data-disabled="props.disabled ? '' : undefined"
-    :data-orientation="injectedValue?.orientation"
-    :tabindex="
-      injectedValue?.selectedElement.value === currentElement ? '0' : '-1'
-    "
+  <BaseMenuItem
+    :disabled="props.disabled"
+    :rootProvider="rootInjectedValue"
+    :subProvider="subInjectedValue"
+    :orientation="rootInjectedValue?.orientation"
+    @handle-click="handleClick"
+    @escape-keydown="handleEscape"
   >
     <slot />
-  </PrimitiveDiv>
+  </BaseMenuItem>
 </template>
diff --git a/packages/radix-vue/src/ContextMenu/ContextMenuItemIndicator.vue b/packages/radix-vue/src/ContextMenu/ContextMenuItemIndicator.vue
index 507091601..05a5d2f07 100644
--- a/packages/radix-vue/src/ContextMenu/ContextMenuItemIndicator.vue
+++ b/packages/radix-vue/src/ContextMenu/ContextMenuItemIndicator.vue
@@ -1,13 +1,19 @@
+<script lang="ts">
+export interface ContextMenuItemIndicatorProps {
+  asChild?: boolean;
+  forceMount?: boolean;
+}
+</script>
+
 <script setup lang="ts">
-import { PrimitiveSpan } from "@/Primitive";
 import { inject } from "vue";
-import type { ContextMenuCheckboxProvideValue } from "./ContextMenuCheckboxItem.vue";
-
-const modelValue = inject<ContextMenuCheckboxProvideValue>("modelValue");
+import { PrimitiveSpan } from "@/Primitive";
+import { CONTEXT_MENU_ITEM_SYMBOL } from "./utils";
+const context = inject(CONTEXT_MENU_ITEM_SYMBOL);
 </script>
 
 <template>
-  <PrimitiveSpan v-if="modelValue" style="pointer-events: none">
+  <PrimitiveSpan v-if="context?.modelValue.value" style="pointer-events: none">
     <slot />
   </PrimitiveSpan>
 </template>
diff --git a/packages/radix-vue/src/ContextMenu/ContextMenuLabel.vue b/packages/radix-vue/src/ContextMenu/ContextMenuLabel.vue
index 474c7dfc0..a50b1cc61 100644
--- a/packages/radix-vue/src/ContextMenu/ContextMenuLabel.vue
+++ b/packages/radix-vue/src/ContextMenu/ContextMenuLabel.vue
@@ -1,11 +1,13 @@
 <script lang="ts">
+import { PrimitiveLabel } from "@/Primitive";
+
 interface ContextMenuLabelProps {
+  asChild?: boolean;
   for?: string;
 }
 </script>
 
 <script setup lang="ts">
-import { PrimitiveLabel } from "@/Primitive";
 const props = defineProps<ContextMenuLabelProps>();
 </script>
 
diff --git a/packages/radix-vue/src/ContextMenu/ContextMenuPortal.vue b/packages/radix-vue/src/ContextMenu/ContextMenuPortal.vue
index ff4867f63..bdee234e6 100644
--- a/packages/radix-vue/src/ContextMenu/ContextMenuPortal.vue
+++ b/packages/radix-vue/src/ContextMenu/ContextMenuPortal.vue
@@ -1,3 +1,12 @@
+<!--
+<script lang="ts">
+export interface DropdwonMenuPortalProps {
+  forceMount?: boolean;
+  container?: HTMLElement | string;
+}
+</script>
+-->
+
 <template>
   <Teleport to="body">
     <slot />
diff --git a/packages/radix-vue/src/ContextMenu/ContextMenuRadioGroup.vue b/packages/radix-vue/src/ContextMenu/ContextMenuRadioGroup.vue
index 260a90699..9e1738308 100644
--- a/packages/radix-vue/src/ContextMenu/ContextMenuRadioGroup.vue
+++ b/packages/radix-vue/src/ContextMenu/ContextMenuRadioGroup.vue
@@ -1,10 +1,13 @@
 <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[];
 }
 
@@ -18,8 +21,8 @@ export interface RadioGroupProvideValue {
 </script>
 
 <script setup lang="ts">
+import { provide } from "vue";
 import { PrimitiveDiv, usePrimitiveElement } from "@/Primitive";
-import { toRef, provide } from "vue";
 
 const props = defineProps<RadioGroupRootProps>();
 
@@ -28,10 +31,14 @@ 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: toRef(() => props.modelValue),
+  modelValue,
   changeModelValue: (value?: string) => {
-    emits("update:modelValue", value);
+    modelValue.value = value;
   },
   parentElement,
 });
diff --git a/packages/radix-vue/src/ContextMenu/ContextMenuRadioItem.vue b/packages/radix-vue/src/ContextMenu/ContextMenuRadioItem.vue
index 6685d6a7c..dd18c2f2d 100644
--- a/packages/radix-vue/src/ContextMenu/ContextMenuRadioItem.vue
+++ b/packages/radix-vue/src/ContextMenu/ContextMenuRadioItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { Ref } from "vue";
-import { inject, provide, watchEffect, toRef } from "vue";
+import { inject, computed, provide } from "vue";
+import BaseMenuItem from "../shared/component/BaseMenuItem.vue";
 import {
   CONTEXT_MENU_INJECTION_KEY,
   type ContextMenuProvideValue,
@@ -9,115 +9,61 @@ import {
   RADIO_GROUP_INJECTION_KEY,
   type RadioGroupProvideValue,
 } from "./ContextMenuRadioGroup.vue";
-import { PrimitiveDiv, usePrimitiveElement } from "@/Primitive";
+import { CONTEXT_MENU_ITEM_SYMBOL } from "./utils";
 
 interface RadioGroupItemProps {
-  id?: string;
-  name?: string;
+  asChild?: boolean;
   value?: string;
   disabled?: boolean;
+  id?: string;
+  name?: string;
+  onSelect?: void;
+  textValue?: string;
 }
 
-export type ContextMenuCheckboxProvideValue = Readonly<Ref<boolean>>;
-
+const rootInjectedValue = inject<ContextMenuProvideValue>(
+  CONTEXT_MENU_INJECTION_KEY
+);
 const radioInjectedValue = inject<RadioGroupProvideValue>(
   RADIO_GROUP_INJECTION_KEY
 );
-const injectedValue = inject<ContextMenuProvideValue>(
-  CONTEXT_MENU_INJECTION_KEY
-);
 
 const props = defineProps<RadioGroupItemProps>();
 
-const { primitiveElement, currentElement } = usePrimitiveElement();
-
-function handleKeydown(e: KeyboardEvent) {
-  if (e.key === "Escape") {
-    handleCloseMenu();
-  }
-  const allToggleItem = injectedValue!.itemsArray;
-  if (allToggleItem.length) {
-    const currentTabIndex = allToggleItem.indexOf(currentElement.value!);
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      if (!injectedValue?.selectedElement.value) {
-        injectedValue?.changeSelected(allToggleItem[0]);
-      } else if (allToggleItem[currentTabIndex + 1]) {
-        injectedValue?.changeSelected(allToggleItem[currentTabIndex + 1]);
-      } else {
-        injectedValue?.changeSelected(allToggleItem[0]);
-      }
-    }
-
-    if (e.key === "ArrowUp") {
-      e.preventDefault();
-      if (!injectedValue?.selectedElement.value) {
-        injectedValue?.changeSelected(allToggleItem[allToggleItem.length - 1]);
-      } else if (allToggleItem[currentTabIndex - 1]) {
-        injectedValue?.changeSelected(allToggleItem[currentTabIndex - 1]);
-      } else {
-        injectedValue?.changeSelected(allToggleItem[allToggleItem.length - 1]);
-      }
-    }
-
-    if (e.keyCode === 32 || e.key === "Enter") {
-      if (injectedValue?.selectedElement.value) {
-        updateModelValue();
-      }
-    }
-  }
-}
-
-watchEffect(() => {
-  if (injectedValue?.selectedElement.value === currentElement.value) {
-    currentElement.value?.focus();
-  }
+const radioDataState = computed(() => {
+  return radioInjectedValue?.modelValue?.value === props.value ? "on" : "off";
 });
 
-function handleHover() {
-  if (!props.disabled) {
-    injectedValue!.changeSelected(currentElement.value!);
+function handleClick() {
+  if (rootInjectedValue?.selectedElement.value) {
+    return radioInjectedValue?.changeModelValue(props.value);
   }
 }
 
-function handleCloseMenu() {
-  injectedValue?.hideTooltip();
-  document.querySelector("body")!.style.pointerEvents = "";
+function handleEscape() {
+  rootInjectedValue?.hideTooltip();
 }
 
-function updateModelValue() {
-  return radioInjectedValue?.changeModelValue(props.value);
-}
-
-provide<ContextMenuCheckboxProvideValue>(
-  "modelValue",
-  toRef(() => radioInjectedValue?.modelValue?.value === props.value)
+const modelValue = computed(
+  () => radioInjectedValue?.modelValue?.value === props.value
 );
+provide(CONTEXT_MENU_ITEM_SYMBOL, {
+  modelValue,
+});
 </script>
 
 <template>
-  <PrimitiveDiv
-    role="menuitemradio"
-    :data-state="
-      radioInjectedValue?.modelValue?.value === props.value ? 'on' : 'off'
-    "
-    @click.prevent="updateModelValue"
-    @mouseenter="handleHover"
-    @mouseleave="injectedValue!.changeSelected(undefined)"
-    ref="primitiveElement"
-    @keydown="handleKeydown"
-    data-radix-vue-collection-item
+  <BaseMenuItem
+    :disabled="props.disabled"
+    :rootProvider="rootInjectedValue"
+    :orientation="rootInjectedValue?.orientation"
     :data-radix-vue-radio-value="props.value"
-    :data-highlighted="
-      injectedValue?.selectedElement.value === currentElement ? '' : null
-    "
-    :aria-disabled="props.disabled ? true : undefined"
-    :data-disabled="props.disabled ? '' : undefined"
-    :data-orientation="injectedValue?.orientation"
-    :tabindex="
-      injectedValue?.selectedElement.value === currentElement ? '0' : '-1'
-    "
+    @handle-click="handleClick"
+    @escape-keydown="handleEscape"
+    @click="handleClick"
+    role="menuitemradio"
+    :data-state="radioDataState"
   >
     <slot />
-  </PrimitiveDiv>
+  </BaseMenuItem>
 </template>
diff --git a/packages/radix-vue/src/ContextMenu/ContextMenuRoot.vue b/packages/radix-vue/src/ContextMenu/ContextMenuRoot.vue
index a7cf5ea96..4e88d4d95 100644
--- a/packages/radix-vue/src/ContextMenu/ContextMenuRoot.vue
+++ b/packages/radix-vue/src/ContextMenu/ContextMenuRoot.vue
@@ -1,12 +1,14 @@
 <script lang="ts">
 import type { Ref, InjectionKey } from "vue";
-import type { DataOrientation } from "../shared/types";
+import type { DataOrientation, Direction } from "../shared/types";
 
 export interface ContextMenuRootProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  //onOpenChange?: void;
   modelValue?: boolean;
-  delayDuration?: number;
-  disableHoverableContent?: boolean;
   orientation?: DataOrientation;
+  dir?: Direction;
 }
 
 export const CONTEXT_MENU_INJECTION_KEY =
@@ -14,25 +16,24 @@ export const CONTEXT_MENU_INJECTION_KEY =
 
 export type ContextMenuProvideValue = {
   selectedElement: Ref<HTMLElement | undefined>;
-  changeSelected: (value: HTMLElement | undefined) => void;
+  changeSelected: (value: HTMLElement) => void;
   modelValue: Readonly<Ref<boolean>>;
   showTooltip(): void;
   hideTooltip(): void;
+  triggerElement: Ref<HTMLElement | undefined>;
   itemsArray: HTMLElement[];
   orientation: DataOrientation;
-  positionPortalLeft?: number;
-  positionPortalTop?: number;
   clientX: Ref<number>;
   clientY: Ref<number>;
 };
 </script>
 
 <script setup lang="ts">
-import { provide, toRef, ref } from "vue";
+import { provide, ref } from "vue";
 import { PopperRoot } from "@/Popper";
+import { useVModel } from "@vueuse/core";
 
 const props = withDefaults(defineProps<ContextMenuRootProps>(), {
-  delayDuration: 700,
   orientation: "vertical",
 });
 
@@ -40,28 +41,33 @@ const emit = defineEmits<{
   (e: "update:modelValue", value: boolean): void;
 }>();
 
+const modelValue = useVModel(props, "modelValue", emit, {
+  passive: true,
+});
+
 const selectedElement = ref<HTMLElement>();
+const triggerElement = ref<HTMLElement>();
 const clientX = ref(0);
 const clientY = ref(0);
 
 provide<ContextMenuProvideValue>(CONTEXT_MENU_INJECTION_KEY, {
   selectedElement: selectedElement,
-  changeSelected: (value: HTMLElement | undefined) => {
+  changeSelected: (value: HTMLElement) => {
     selectedElement.value = value;
+    selectedElement.value!.focus();
   },
-  modelValue: toRef(() => props.modelValue),
+  modelValue,
   showTooltip: () => {
-    emit("update:modelValue", true);
+    modelValue.value = true;
   },
   hideTooltip: () => {
-    emit("update:modelValue", false);
+    modelValue.value = false;
   },
+  triggerElement,
   itemsArray: [],
   orientation: props.orientation,
-  positionPortalLeft: 0,
-  positionPortalTop: 0,
-  clientX: clientX,
-  clientY: clientY,
+  clientX,
+  clientY,
 });
 </script>
 
diff --git a/packages/radix-vue/src/ContextMenu/ContextMenuSeparator.vue b/packages/radix-vue/src/ContextMenu/ContextMenuSeparator.vue
index 8e0ffb75c..5c15cebcb 100644
--- a/packages/radix-vue/src/ContextMenu/ContextMenuSeparator.vue
+++ b/packages/radix-vue/src/ContextMenu/ContextMenuSeparator.vue
@@ -1,23 +1,21 @@
 <script lang="ts">
-type Orientation = "horizontal" | "vertical";
+import BaseSeparator from "../shared/component/BaseSeparator.vue";
+import type { DataOrientation } from "../shared/types";
 
-interface ToolbarSeparatorProps {
-  orientation?: Orientation;
+export interface ContextMenuSeparatorProps {
+  orientation?: DataOrientation;
   decorative?: boolean;
+  asChild?: boolean;
 }
 </script>
 
 <script setup lang="ts">
-import { PrimitiveDiv } from "@/Primitive";
-const props = withDefaults(defineProps<ToolbarSeparatorProps>(), {
-  orientation: "horizontal",
-  decorative: false,
-});
+const props = defineProps<ContextMenuSeparatorProps>();
 </script>
 
 <template>
-  <PrimitiveDiv
-    :data-orientation="props.orientation"
-    :role="`${decorative ? 'none' : 'separator'}`"
-  ></PrimitiveDiv>
+  <BaseSeparator
+    :orientation="props.orientation"
+    :decorative="props.decorative"
+  />
 </template>
diff --git a/packages/radix-vue/src/ContextMenu/ContextMenuSub.vue b/packages/radix-vue/src/ContextMenu/ContextMenuSub.vue
new file mode 100644
index 000000000..1b22f08ae
--- /dev/null
+++ b/packages/radix-vue/src/ContextMenu/ContextMenuSub.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 ContextMenuSubRootProps {
+  modelValue?: boolean;
+  defaultOpen?: boolean;
+  open?: boolean;
+  //onOpenChange?: void;
+  delayDuration?: number;
+  disableHoverableContent?: boolean;
+  orientation?: DataOrientation;
+}
+
+export const CONTEXT_MENU_SUB_INJECTION_KEY =
+  Symbol() as InjectionKey<ContextMenuSubProvideValue>;
+
+export type ContextMenuSubProvideValue = {
+  modelValue: Readonly<Ref<boolean>>;
+  showTooltip(): void;
+  hideTooltip(): void;
+  triggerElement: Ref<HTMLElement | undefined>;
+  itemsArray: HTMLElement[];
+  orientation: DataOrientation;
+  triggerId: string;
+  contentId: string;
+  parentContext?: ContextMenuSubProvideValue;
+};
+</script>
+
+<script setup lang="ts">
+import { inject, provide, ref } from "vue";
+import { PopperRoot } from "@/Popper";
+import { useId } from "@/shared";
+
+const props = withDefaults(defineProps<ContextMenuSubRootProps>(), {
+  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(CONTEXT_MENU_SUB_INJECTION_KEY);
+
+provide<ContextMenuSubProvideValue>(CONTEXT_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/ContextMenu/ContextMenuSubContent.vue b/packages/radix-vue/src/ContextMenu/ContextMenuSubContent.vue
new file mode 100644
index 000000000..1ac77dcd3
--- /dev/null
+++ b/packages/radix-vue/src/ContextMenu/ContextMenuSubContent.vue
@@ -0,0 +1,116 @@
+<script lang="ts">
+export type Boundary = Element | null | Array<Element | null>;
+
+export interface ContextMenuSubContentProps 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 {
+  CONTEXT_MENU_INJECTION_KEY,
+  type ContextMenuProvideValue,
+} from "./ContextMenuRoot.vue";
+import {
+  CONTEXT_MENU_SUB_INJECTION_KEY,
+  type ContextMenuSubProvideValue,
+} from "./ContextMenuSub.vue";
+import { PopperContent, type PopperContentProps } from "@/Popper";
+import { useCollection } from "@/shared";
+import { onClickOutside } from "@vueuse/core";
+
+const rootInjectedValue = inject<ContextMenuProvideValue>(
+  CONTEXT_MENU_INJECTION_KEY
+);
+
+const injectedValue = inject<ContextMenuSubProvideValue>(
+  CONTEXT_MENU_SUB_INJECTION_KEY
+);
+
+const props = withDefaults(defineProps<ContextMenuSubContentProps>(), {
+  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/ContextMenu/ContextMenuSubTrigger.vue b/packages/radix-vue/src/ContextMenu/ContextMenuSubTrigger.vue
new file mode 100644
index 000000000..08777dea3
--- /dev/null
+++ b/packages/radix-vue/src/ContextMenu/ContextMenuSubTrigger.vue
@@ -0,0 +1,86 @@
+<script lang="ts">
+export interface ContextMenuSubTriggerProps {
+  asChild?: boolean;
+  disabled?: boolean;
+  textValue?: string;
+}
+</script>
+
+<script setup lang="ts">
+import { inject, onMounted, computed, nextTick } from "vue";
+import {
+  CONTEXT_MENU_INJECTION_KEY,
+  type ContextMenuProvideValue,
+} from "./ContextMenuRoot.vue";
+import {
+  CONTEXT_MENU_SUB_INJECTION_KEY,
+  type ContextMenuSubProvideValue,
+} from "./ContextMenuSub.vue";
+import { PopperAnchor } from "@/Popper";
+import { usePrimitiveElement } from "@/Primitive";
+import BaseMenuItem from "../shared/component/BaseMenuItem.vue";
+
+const rootInjectedValue = inject<ContextMenuProvideValue>(
+  CONTEXT_MENU_INJECTION_KEY
+);
+
+const injectedValue = inject<ContextMenuSubProvideValue>(
+  CONTEXT_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();
+  }
+}
+
+const dataState = computed(() => {
+  return injectedValue?.modelValue.value ? "open" : "closed";
+});
+
+function handleMouseover() {
+  return injectedValue?.showTooltip();
+}
+</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"
+    >
+      <slot />
+    </BaseMenuItem>
+  </PopperAnchor>
+</template>
diff --git a/packages/radix-vue/src/ContextMenu/ContextMenuTrigger.vue b/packages/radix-vue/src/ContextMenu/ContextMenuTrigger.vue
index 7e051d57b..0fef4c6e4 100644
--- a/packages/radix-vue/src/ContextMenu/ContextMenuTrigger.vue
+++ b/packages/radix-vue/src/ContextMenu/ContextMenuTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { inject } from "vue";
+import { inject, onMounted } from "vue";
 import { PrimitiveButton } from "@/Primitive";
 import {
   CONTEXT_MENU_INJECTION_KEY,
@@ -34,6 +34,10 @@ function handleContextMenu(e: MouseEvent) {
     injectedValue?.showTooltip();
   }
 }
+
+onMounted(() => {
+  injectedValue!.triggerElement.value = virtualEl;
+});
 </script>
 
 <template>
diff --git a/packages/radix-vue/src/ContextMenu/index.ts b/packages/radix-vue/src/ContextMenu/index.ts
index 12520bbd3..e4cb4ba98 100644
--- a/packages/radix-vue/src/ContextMenu/index.ts
+++ b/packages/radix-vue/src/ContextMenu/index.ts
@@ -11,3 +11,6 @@ export { default as ContextMenuItemIndicator } from "./ContextMenuItemIndicator.
 export { default as ContextMenuLabel } from "./ContextMenuLabel.vue";
 export { default as ContextMenuRadioGroup } from "./ContextMenuRadioGroup.vue";
 export { default as ContextMenuRadioItem } from "./ContextMenuRadioItem.vue";
+export { default as ContextMenuSub } from "./ContextMenuSub.vue";
+export { default as ContextMenuSubContent } from "./ContextMenuSubContent.vue";
+export { default as ContextMenuSubTrigger } from "./ContextMenuSubTrigger.vue";
diff --git a/packages/radix-vue/src/ContextMenu/utils.ts b/packages/radix-vue/src/ContextMenu/utils.ts
new file mode 100644
index 000000000..e964bcb51
--- /dev/null
+++ b/packages/radix-vue/src/ContextMenu/utils.ts
@@ -0,0 +1,8 @@
+import { type InjectionKey, type Ref } from "vue";
+
+type ContextMenuItemContextValue = {
+  modelValue: Ref<boolean>;
+};
+
+export const CONTEXT_MENU_ITEM_SYMBOL =
+  Symbol() as InjectionKey<ContextMenuItemContextValue>;
diff --git a/packages/radix-vue/src/index.ts b/packages/radix-vue/src/index.ts
index 2a8c5219a..48fba85f4 100644
--- a/packages/radix-vue/src/index.ts
+++ b/packages/radix-vue/src/index.ts
@@ -131,6 +131,9 @@ export {
   ContextMenuLabel,
   ContextMenuRadioGroup,
   ContextMenuRadioItem,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
 } from "./ContextMenu";
 export {
   SelectArrow,
diff --git a/playground/vue3/src/components/Demo/ContextMenuDemo.vue b/playground/vue3/src/components/Demo/ContextMenuDemo.vue
index 719518829..6382308b8 100644
--- a/playground/vue3/src/components/Demo/ContextMenuDemo.vue
+++ b/playground/vue3/src/components/Demo/ContextMenuDemo.vue
@@ -13,7 +13,10 @@ import {
   ContextMenuRoot,
   ContextMenuSeparator,
   ContextMenuTrigger,
-} from '@/ContextMenu'
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger
+} from '../../../../../packages/radix-vue/src'
 
 const toggleState = ref(false)
 const checkboxOne = ref(false)
@@ -45,45 +48,237 @@ function handleClick() {
         :side-offset="5"
       >
         <ContextMenuItem
+          value="New Tab"
           class="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
           @click="handleClick"
         >
-          Back
-          <div class="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
-            ⌘+[
-          </div>
-        </ContextMenuItem>
-        <ContextMenuItem
-          class="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-          disabled
-        >
-          Foward
-          <div class="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
-            ⌘+]
+          New Tab
+          <div
+            class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
+          >
+            ⌘+T
           </div>
         </ContextMenuItem>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger
+            value="more toolsz"
+            class="group w-full text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:bg-violet9 data-[highlighted]:data-[state=open]:text-violet1"
+          >
+            More Tools
+            <div
+              class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
+            >
+              <Icon icon="radix-icons:chevron-right" />
+            </div>
+          </ContextMenuSubTrigger>
+          <ContextMenuPortal>
+            <ContextMenuSubContent
+              class="min-w-[220px] bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
+              :side-offset="2"
+              :align-offset="-5"
+            >
+              <ContextMenuItem
+                class="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+              >
+                Save Page As…
+                <div
+                  class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
+                >
+                  ⌘+S
+                </div>
+              </ContextMenuItem>
+              <ContextMenuItem
+                class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+              >
+                Create Shortcut…
+              </ContextMenuItem>
+              <ContextMenuItem
+                class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+              >
+                Name Window…
+              </ContextMenuItem>
+              <ContextMenuSeparator class="h-[1px] bg-violet6 m-[5px]" />
+              <ContextMenuItem
+                class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+              >
+                Developer Tools
+              </ContextMenuItem>
+            </ContextMenuSubContent>
+          </ContextMenuPortal>
+        </ContextMenuSub>
         <ContextMenuItem
+          value="New Window"
           class="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
         >
-          Reload
-          <div class="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
-            ⌘+R
+          New Window
+          <div
+            class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
+          >
+            ⌘+N
           </div>
         </ContextMenuItem>
         <ContextMenuItem
+          value="New Private Window"
           class="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+          disabled
         >
-          More Tools
-          <div class="ml-auto pl-5 text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
-            <Icon icon="radix-icons:chevron-right" />
+          New Private Window
+          <div
+            class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
+          >
+            ⇧+⌘+N
           </div>
         </ContextMenuItem>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger
+            value="more tools"
+            class="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none w-full outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:bg-violet9 data-[highlighted]:data-[state=open]:text-violet1"
+          >
+            More Tools
+            <div
+              class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
+            >
+              <Icon icon="radix-icons:chevron-right" />
+            </div>
+          </ContextMenuSubTrigger>
+          <ContextMenuPortal>
+            <ContextMenuSubContent
+              class="min-w-[220px] bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
+              :side-offset="2"
+              :align-offset="-5"
+            >
+              <ContextMenuItem
+                class="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+              >
+                Save Page As…
+                <div
+                  class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
+                >
+                  ⌘+S
+                </div>
+              </ContextMenuItem>
+              <ContextMenuItem
+                class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+              >
+                Create Shortcut…
+              </ContextMenuItem>
+              <ContextMenuItem
+                class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+              >
+                Name Window…
+              </ContextMenuItem>
+              <ContextMenuSeparator class="h-[1px] bg-violet6 m-[5px]" />
+              <ContextMenuItem
+                class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+              >
+                Developer Tools
+              </ContextMenuItem>
+              <ContextMenuSub>
+                <ContextMenuSubTrigger
+                  value="more toolsz"
+                  class="group w-full text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:bg-violet9 data-[highlighted]:data-[state=open]:text-violet1"
+                >
+                  More Tools
+                  <div
+                    class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
+                  >
+                    <Icon icon="radix-icons:chevron-right" />
+                  </div>
+                </ContextMenuSubTrigger>
+                <ContextMenuPortal>
+                  <ContextMenuSubContent
+                    class="min-w-[220px] bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
+                    :side-offset="2"
+                    :align-offset="-5"
+                  >
+                    <ContextMenuItem
+                      class="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+                    >
+                      Save Page As…
+                      <div
+                        class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
+                      >
+                        ⌘+S
+                      </div>
+                    </ContextMenuItem>
+                    <ContextMenuItem
+                      class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+                    >
+                      Create Shortcut…
+                    </ContextMenuItem>
+                    <ContextMenuItem
+                      class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+                    >
+                      Name Window…
+                    </ContextMenuItem>
+                    <ContextMenuSeparator class="h-[1px] bg-violet6 m-[5px]" />
+                    <ContextMenuItem
+                      class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+                    >
+                      Developer Tools
+                    </ContextMenuItem>
+                    <ContextMenuSub>
+                      <ContextMenuSubTrigger
+                        value="more toolsz"
+                        class="group w-full text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-violet4 data-[state=open]:text-violet11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1 data-[highlighted]:data-[state=open]:bg-violet9 data-[highlighted]:data-[state=open]:text-violet1"
+                      >
+                        More Tools
+                        <div
+                          class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
+                        >
+                          <Icon icon="radix-icons:chevron-right" />
+                        </div>
+                      </ContextMenuSubTrigger>
+                      <ContextMenuPortal>
+                        <ContextMenuSubContent
+                          class="min-w-[220px] bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
+                          :side-offset="2"
+                          :align-offset="-5"
+                        >
+                          <ContextMenuItem
+                            class="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+                          >
+                            Save Page As…
+                            <div
+                              class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
+                            >
+                              ⌘+S
+                            </div>
+                          </ContextMenuItem>
+                          <ContextMenuItem
+                            class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+                          >
+                            Create Shortcut…
+                          </ContextMenuItem>
+                          <ContextMenuItem
+                            class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+                          >
+                            Name Window…
+                          </ContextMenuItem>
+                          <ContextMenuSeparator class="h-[1px] bg-violet6 m-[5px]" />
+                          <ContextMenuItem
+                            class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+                          >
+                            Developer Tools
+                          </ContextMenuItem>
+                        </ContextMenuSubContent>
+                      </ContextMenuPortal>
+                    </ContextMenuSub>
+                  </ContextMenuSubContent>
+                </ContextMenuPortal>
+              </ContextMenuSub>
+              <ContextMenuItem
+                class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
+              >
+                Developer Tools
+              </ContextMenuItem>
+            </ContextMenuSubContent>
+          </ContextMenuPortal>
+        </ContextMenuSub>
         <ContextMenuSeparator class="h-[1px] bg-violet6 m-[5px]" />
         <ContextMenuCheckboxItem
           v-model="checkboxOne"
           class="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-          checked="{bookmarksChecked}"
-          on-checked-change="{setBookmarksChecked}"
         >
           <ContextMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
             <Icon icon="radix-icons:check" />
@@ -98,8 +293,6 @@ function handleClick() {
         <ContextMenuCheckboxItem
           v-model="checkboxTwo"
           class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
-          checked="{urlsChecked}"
-          on-checked-change="{setUrlsChecked}"
         >
           <ContextMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
             <Icon icon="radix-icons:check" />
@@ -131,6 +324,7 @@ function handleClick() {
             Colm Tuite
           </ContextMenuRadioItem>
         </ContextMenuRadioGroup>
+        <ContextMenuArrow class="fill-white" />
       </ContextMenuContent>
     </ContextMenuPortal>
   </ContextMenuRoot>