diff --git a/docs/react/navigation.md b/docs/react/navigation.md
index 310f39635e6..34c2cdd9d6a 100644
--- a/docs/react/navigation.md
+++ b/docs/react/navigation.md
@@ -420,7 +420,7 @@ Let's start by taking a look at our `Tabs` component:
 
 ```tsx
 import { Redirect, Route } from 'react-router-dom';
-import { IonContent, IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
+import { IonPage, IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
 import { ellipse, square, triangle } from 'ionicons/icons';
 import Tab1 from './pages/Tab1';
@@ -428,7 +428,7 @@ import Tab2 from './pages/Tab2';
 import Tab3 from './pages/Tab3';
 
 const Tabs: React.FC = () => (
-  <IonContent>
+  <IonPage>
     <IonTabs>
       <IonRouterOutlet>
         <Redirect exact path="/tabs" to="/tabs/tab1" />
@@ -460,7 +460,7 @@ const Tabs: React.FC = () => (
         </IonTabButton>
       </IonTabBar>
     </IonTabs>
-  </IonContent>
+  </IonPage>
 );
 
 export default Tabs;