diff --git a/core/src/components/menu-toggle/readme.md b/core/src/components/menu-toggle/readme.md
index 08d4103c5e..4d75a4bed8 100644
--- a/core/src/components/menu-toggle/readme.md
+++ b/core/src/components/menu-toggle/readme.md
@@ -69,11 +69,11 @@ In case it's desired to keep `ion-menu-toggle` always visible, the `autoHide` pr
 
 ```tsx
 import React from 'react';
-import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonMenuToggle, IonButton } from '@ionic/react';
+import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonMenuToggle, IonButton, IonPage } from '@ionic/react';
 
 export const MenuExample: React.FC = () => (
   <>
-    <IonMenu side="start" menuId="first">
+    <IonMenu side="start" menuId="first" contentId="main">
       <IonHeader>
         <IonToolbar color="primary">
           <IonTitle>Example Menu</IonTitle>
@@ -85,11 +85,13 @@ export const MenuExample: React.FC = () => (
         </IonList>
       </IonContent>
     </IonMenu>
-    <IonContent>
-      <IonMenuToggle>
-        <IonButton>Toggle Menu</IonButton>
-      </IonMenuToggle>
-    </IonContent>
+    <IonPage id="main">
+      <IonContent>
+        <IonMenuToggle>
+          <IonButton>Toggle Menu</IonButton>
+        </IonMenuToggle>
+      </IonContent>
+    </IonPage>
   </>
 );
 ```
@@ -131,8 +133,7 @@ import {
   IonMenuToggle,
   IonButton,
   IonTitle, 
-  IonToolbar,
-  menuController
+  IonToolbar
 } from '@ionic/vue';
 import { defineComponent } from 'vue';