diff --git a/common/modules/mixly-modules/common/dropdown-menu-group.js b/common/modules/mixly-modules/common/dropdown-menu-group.js
index 9984832d..4003496a 100644
--- a/common/modules/mixly-modules/common/dropdown-menu-group.js
+++ b/common/modules/mixly-modules/common/dropdown-menu-group.js
@@ -18,13 +18,13 @@ const {
 
 
 class DropdownMenuGroup {
-    #shown_ = false;
     #singleton_ = null;
     #menuItems_ = [];
     #ids_ = {};
     #instanceIds_ = {};
     #activeInstance_ = null;
-    #hided_ = false;
+    #instanceShown_ = false;
+    #menuShown_ = false;
     #trigged_ = false;
     #$instancePopper_ = null;
     #$instanceContent_ = null;
@@ -44,27 +44,28 @@ class DropdownMenuGroup {
             delay: [200, null],
             onShow: () => {
                 if (this.#activeInstance_) {
-                    this.show(this.#activeInstance_.id);
+                    this.showMenu(this.#activeInstance_.id);
                 }
-                this.#shown_ = true;
+                this.#instanceShown_ = true;
             },
             onTrigger: (_, event) => {
                 const id = $(event.currentTarget).attr('data-id');
-                if (this.#shown_) {
+                if (this.#instanceShown_) {
                     if (this.#activeInstance_) {
                         this.#trigged_ = true;
-                        this.hide(this.#activeInstance_.id);
+                        this.hideMenu(this.#activeInstance_.id);
                         this.#activeInstance_ = null;
                     }
-                    this.show(id);
+                    this.showMenu(id);
                 }
                 this.#activeInstance_ = this.#instanceIds_[id].instance;
             },
             onHide: () => {
-                if (this.#hided_) {
-                    this.#shown_ = false;
+                if (this.#menuShown_) {
+                    return false;
                 }
-                return this.#hided_;
+                this.#instanceShown_ = false;
+                return true;
             }
         });
         this.#$instancePopper_ = $(this.#singleton_.popper);
@@ -102,15 +103,15 @@ class DropdownMenuGroup {
             },
             events: {
                 show: (opt) => {
-                    this.#hided_ = false;
+                    this.#menuShown_ = true;
                     this.#singleton_.setProps({});
                 },
                 hide: (opt) => {
-                    if (this.trigged_) {
-                        this.trigged_ = false;
+                    if (this.#trigged_) {
+                        this.#trigged_ = false;
                         return true;
                     }
-                    this.#hided_ = true;
+                    this.#menuShown_ = false;
                     this.#singleton_.hide();
                 }
             }
@@ -176,12 +177,12 @@ class DropdownMenuGroup {
         item = null;
     }
 
-    show(instanceId) {
+    showMenu(instanceId) {
         const item = this.#instanceIds_[instanceId];
         item.$menu.contextMenu();
     }
 
-    hide(instanceId) {
+    hideMenu(instanceId) {
         const item = this.#instanceIds_[instanceId];
         item.$menu.contextMenu('hide');
     }
diff --git a/common/modules/mixly-modules/deps.json b/common/modules/mixly-modules/deps.json
index c6ce55c6..cd87f11e 100644
--- a/common/modules/mixly-modules/deps.json
+++ b/common/modules/mixly-modules/deps.json
@@ -23,13 +23,15 @@
         "path": "/common/app.js",
         "require": [
             "path",
-            "layui",
+            "hotkeys",
             "Mixly.Url",
             "Mixly.Config",
             "Mixly.Env",
             "Mixly.Msg",
             "Mixly.Drag",
             "Mixly.Nav",
+            "Mixly.Menu",
+            "Mixly.ContextMenu",
             "Mixly.Workspace",
             "Mixly.FooterBar",
             "Mixly.HTMLTemplate",
@@ -187,6 +189,20 @@
             "Mixly.DragV"
         ]
     },
+    {
+        "path": "/common/dropdown-menu-group.js",
+        "require": [
+            "tippy",
+            "Mixly.Menu",
+            "Mixly.Registry",
+            "Mixly.IdGenerator",
+            "Mixly.ContextMenu",
+            "Mixly.DropdownMenu"
+        ],
+        "provide": [
+            "Mixly.DropdownMenuGroup"
+        ]
+    },
     {
         "path": "/common/dropdown-menu.js",
         "require": [
@@ -462,6 +478,7 @@
         "path": "/common/footerlayer-board-config.js",
         "require": [
             "path",
+            "tippy",
             "Blockly",
             "layui",
             "$.select2",
@@ -769,7 +786,10 @@
             "Mixly.XML",
             "Mixly.Msg",
             "Mixly.HTMLTemplate",
-            "Mixly.Component"
+            "Mixly.Component",
+            "Mixly.Menu",
+            "Mixly.ContextMenu",
+            "Mixly.DropdownMenuGroup"
         ],
         "provide": [
             "Mixly.Nav"
diff --git a/common/templates/html/nav/nav-item-container.html b/common/templates/html/nav/nav-item-container.html
index b51f3403..831fd90a 100644
--- a/common/templates/html/nav/nav-item-container.html
+++ b/common/templates/html/nav/nav-item-container.html
@@ -1,4 +1,4 @@
-<li class="layui-nav-item mixly-scrollbar" lay-unselect m-id={{d.mId}}>
+<li class="layui-nav-item mixly-scrollbar" lay-unselect m-id="{{d.mId}}">
     <a style="white-space: nowrap;">
         {{d.text}}
     </a>