diff --git a/docs/api/menu.md b/docs/api/menu.md
index 8549e9a88a5..71bc3acbb72 100644
--- a/docs/api/menu.md
+++ b/docs/api/menu.md
@@ -60,7 +60,7 @@ import Sides from '@site/static/usage/v7/menu/sides/index.md';
## Multiple Menus
-When multiple menus exist on the same side, we need to enable the menu that we want to open before it can be opened. This can be done by calling the `enable` method on the `MenuController`. We can then call `open` on a menu based on its `menuId` or `side`.
+When multiple menus exist on the same side, we need refer to them by ID instead of side. Otherwise, the wrong menu may be activated.
import Multiple from '@site/static/usage/v7/menu/multiple/index.md';
diff --git a/static/usage/v7/menu/multiple/angular/example_component_ts.md b/static/usage/v7/menu/multiple/angular/example_component_ts.md
index 18edbc360a5..3c4f3f1fbb8 100644
--- a/static/usage/v7/menu/multiple/angular/example_component_ts.md
+++ b/static/usage/v7/menu/multiple/angular/example_component_ts.md
@@ -10,19 +10,29 @@ export class ExampleComponent {
constructor(private menuCtrl: MenuController) {}
openFirstMenu() {
- // Open the menu by menu-id
- this.menuCtrl.enable(true, 'first-menu');
+ /**
+ * Open the menu by menu-id
+ * We refer to the menu using an ID
+ * because multiple "start" menus exist.
+ */
this.menuCtrl.open('first-menu');
}
openSecondMenu() {
- // Open the menu by menu-id
- this.menuCtrl.enable(true, 'second-menu');
+ /**
+ * Open the menu by menu-id
+ * We refer to the menu using an ID
+ * because multiple "start" menus exist.
+ */
this.menuCtrl.open('second-menu');
}
openEndMenu() {
- // Open the menu by side
+ /**
+ * Open the menu by side
+ * We can refer to the menu by side
+ * here because only one "end" menu exists
+ */
this.menuCtrl.open('end');
}
}
diff --git a/static/usage/v7/menu/multiple/demo.html b/static/usage/v7/menu/multiple/demo.html
index 2845db551d8..911160d8663 100644
--- a/static/usage/v7/menu/multiple/demo.html
+++ b/static/usage/v7/menu/multiple/demo.html
@@ -62,19 +62,29 @@
diff --git a/static/usage/v7/menu/multiple/javascript.md b/static/usage/v7/menu/multiple/javascript.md
index 240b4a79157..cecfc4c71af 100644
--- a/static/usage/v7/menu/multiple/javascript.md
+++ b/static/usage/v7/menu/multiple/javascript.md
@@ -43,19 +43,29 @@
diff --git a/static/usage/v7/menu/multiple/react.md b/static/usage/v7/menu/multiple/react.md
index 9ba2357603c..d77ae05a8a8 100644
--- a/static/usage/v7/menu/multiple/react.md
+++ b/static/usage/v7/menu/multiple/react.md
@@ -5,19 +5,29 @@ import { menuController } from '@ionic/core/components';
function Example() {
async function openFirstMenu() {
- // Open the menu by menu-id
- await menuController.enable(true, 'first-menu');
+ /**
+ * Open the menu by menu-id
+ * We refer to the menu using an ID
+ * because multiple "start" menus exist.
+ */
await menuController.open('first-menu');
}
async function openSecondMenu() {
- // Open the menu by menu-id
- await menuController.enable(true, 'second-menu');
+ /**
+ * Open the menu by menu-id
+ * We refer to the menu using an ID
+ * because multiple "start" menus exist.
+ */
await menuController.open('second-menu');
}
async function openEndMenu() {
- // Open the menu by side
+ /**
+ * Open the menu by side
+ * We can refer to the menu by side
+ * here because only one "end" menu exists
+ */
await menuController.open('end');
}
diff --git a/static/usage/v7/menu/multiple/vue.md b/static/usage/v7/menu/multiple/vue.md
index f9a4932767f..1fb4e986f44 100644
--- a/static/usage/v7/menu/multiple/vue.md
+++ b/static/usage/v7/menu/multiple/vue.md
@@ -51,19 +51,29 @@
components: { IonButton, IonContent, IonHeader, IonMenu, IonPage, IonTitle, IonToolbar, menuController },
setup() {
const openFirstMenu = async () => {
- // Open the menu by menu-id
- await menuController.enable(true, 'first-menu');
+ /**
+ * Open the menu by menu-id
+ * We refer to the menu using an ID
+ * because multiple "start" menus exist.
+ */
await menuController.open('first-menu');
};
const openSecondMenu = async () => {
- // Open the menu by menu-id
- await menuController.enable(true, 'second-menu');
+ /**
+ * Open the menu by menu-id
+ * We refer to the menu using an ID
+ * because multiple "start" menus exist.
+ */
await menuController.open('second-menu');
};
const openEndMenu = async () => {
- // Open the menu by side
+ /**
+ * Open the menu by side
+ * We can refer to the menu by side
+ * here because only one "end" menu exists
+ */
await menuController.open('end');
};