diff --git a/src/lib/components/menu/menu.svelte b/src/lib/components/menu/menu.svelte
index 6e7e3a030..8b4811e10 100644
--- a/src/lib/components/menu/menu.svelte
+++ b/src/lib/components/menu/menu.svelte
@@ -1,23 +1,39 @@
 <script lang="ts">
+    import { setContext, onMount } from 'svelte';
     import { Card } from '@appwrite.io/pink-svelte';
     import { createMenubar, melt } from '@melt-ui/svelte';
-    import { menuOpen } from '$lib/components/menu/store';
+    import { activeMenuId, menuOpen } from '$lib/components/menu/store';
 
+    const menuId = Math.random().toString(36).slice(2);
     const {
         elements: { menubar },
         builders: { createMenu }
     } = createMenubar();
 
     const {
-        elements: { trigger: trigger, menu: menu, separator: separator },
-        states: { open }
+        elements: { trigger, menu, separator },
+        states: { open },
+        builders // for submenu for same toggle state
     } = createMenu();
 
     function toggle() {
         open.update((state) => !state);
     }
 
+    open.subscribe((state) => {
+        if (state) activeMenuId.set(menuId);
+        else activeMenuId.update((current) => (current === menuId ? null : current));
+    });
+
+    onMount(() => {
+        return activeMenuId.subscribe((id) => {
+            if (id !== menuId) open.set(false);
+        });
+    });
+
     $: menuOpen.set($open);
+
+    setContext('menuBuilder', builders);
 </script>
 
 <div use:melt={$menubar}>
diff --git a/src/lib/components/menu/store.ts b/src/lib/components/menu/store.ts
index 571b30b82..a03dcb7c7 100644
--- a/src/lib/components/menu/store.ts
+++ b/src/lib/components/menu/store.ts
@@ -1,3 +1,5 @@
 import { writable } from 'svelte/store';
 
 export const menuOpen = writable(false);
+
+export const activeMenuId = writable<string | null>(null);
diff --git a/src/lib/components/menu/subMenu.svelte b/src/lib/components/menu/subMenu.svelte
index 66186bf2a..71c97cf6e 100644
--- a/src/lib/components/menu/subMenu.svelte
+++ b/src/lib/components/menu/subMenu.svelte
@@ -1,15 +1,11 @@
 <script lang="ts">
+    import { getContext } from 'svelte';
+    import { melt } from '@melt-ui/svelte';
     import { Card } from '@appwrite.io/pink-svelte';
-    import { createMenubar, melt } from '@melt-ui/svelte';
 
-    const {
-        builders: { createMenu }
-    } = createMenubar();
-
-    const {
-        elements: { separator: separator },
-        builders: { createSubmenu: createSubmenu }
-    } = createMenu();
+    // get parent builder for toggle state!
+    const builders = getContext('menuBuilder');
+    const { createSubmenu, separator } = builders;
 
     const {
         elements: { subMenu: subMenu, subTrigger: subTrigger }