diff --git a/static/usage/v7/nav/modal-navigation/angular/app_module_ts.md b/static/usage/v7/nav/modal-navigation/angular/app_module_ts.md
deleted file mode 100644
index d3b8b44f6ce..00000000000
--- a/static/usage/v7/nav/modal-navigation/angular/app_module_ts.md
+++ /dev/null
@@ -1,21 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-
-import { IonicModule } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { ExampleComponent } from './example.component';
-
-import { PageOneComponent } from './page-one.component';
-import { PageTwoComponent } from './page-two.component';
-import { PageThreeComponent } from './page-three.component';
-
-@NgModule({
-  imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md
index 366dc7e246d..1c3ee806556 100644
--- a/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md
+++ b/static/usage/v7/nav/modal-navigation/angular/example_component_ts.md
@@ -1,15 +1,26 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import { IonNav } from '@ionic/angular';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonNav,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { PageOneComponent } from './page-one.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonNav, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  @ViewChild('nav') private nav: IonNav;
+  @ViewChild('nav') private nav!: IonNav;
 
   onWillPresent() {
     this.nav.setRoot(PageOneComponent);
diff --git a/static/usage/v7/nav/modal-navigation/angular/page_one_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/page_one_component_ts.md
index 3c9ec863d04..6467b66e9a0 100644
--- a/static/usage/v7/nav/modal-navigation/angular/page_one_component_ts.md
+++ b/static/usage/v7/nav/modal-navigation/angular/page_one_component_ts.md
@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonNav } from '@ionic/angular';
+import { IonButton, IonContent, IonNav } from '@ionic/angular/standalone';
 
 import { PageTwoComponent } from './page-two.component';
 
@@ -12,6 +12,7 @@ import { PageTwoComponent } from './page-two.component';
       <ion-button (click)="navigateToPageTwo()">Go to Page Two</ion-button>
     </ion-content>
   `,
+  imports: [IonButton, IonContent],
 })
 export class PageOneComponent {
   constructor(private nav: IonNav) {}
diff --git a/static/usage/v7/nav/modal-navigation/angular/page_three_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/page_three_component_ts.md
index 5b1b70c3474..03f298b15ae 100644
--- a/static/usage/v7/nav/modal-navigation/angular/page_three_component_ts.md
+++ b/static/usage/v7/nav/modal-navigation/angular/page_three_component_ts.md
@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonNav } from '@ionic/angular';
+import { IonButton, IonContent, IonNav } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-page-one',
@@ -11,6 +11,7 @@ import { IonNav } from '@ionic/angular';
       <ion-button (click)="navigateToRoot()">Go to Root</ion-button>
     </ion-content>
   `,
+  imports: [IonButton, IonContent],
 })
 export class PageThreeComponent {
   constructor(private nav: IonNav) {}
diff --git a/static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.md b/static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.md
index 0cd5713c062..769b0bc9bda 100644
--- a/static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.md
+++ b/static/usage/v7/nav/modal-navigation/angular/page_two_component_ts.md
@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonNav } from '@ionic/angular';
+import { IonButton, IonContent, IonNav } from '@ionic/angular/standalone';
 
 import { PageThreeComponent } from './page-three.component';
 
@@ -12,6 +12,7 @@ import { PageThreeComponent } from './page-three.component';
       <ion-button (click)="navigateToPageThree()">Go to Page Three</ion-button>
     </ion-content>
   `,
+  imports: [IonButton, IonContent],
 })
 export class PageTwoComponent {
   component = PageThreeComponent;
diff --git a/static/usage/v7/nav/modal-navigation/index.md b/static/usage/v7/nav/modal-navigation/index.md
index 73ce3215f66..7e443a6d98e 100644
--- a/static/usage/v7/nav/modal-navigation/index.md
+++ b/static/usage/v7/nav/modal-navigation/index.md
@@ -2,7 +2,6 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import angular_app_module_ts from './angular/app_module_ts.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_page_one_component_ts from './angular/page_one_component_ts.md';
@@ -30,7 +29,6 @@ import vue_page_three from './vue/page_three_vue.md';
         'src/app/page-one.component.ts': angular_page_one_component_ts,
         'src/app/page-two.component.ts': angular_page_two_component_ts,
         'src/app/page-three.component.ts': angular_page_three_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
       },
     },
     react: {
diff --git a/static/usage/v7/nav/nav-link/angular/app_module_ts.md b/static/usage/v7/nav/nav-link/angular/app_module_ts.md
deleted file mode 100644
index d3b8b44f6ce..00000000000
--- a/static/usage/v7/nav/nav-link/angular/app_module_ts.md
+++ /dev/null
@@ -1,21 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-
-import { IonicModule } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { ExampleComponent } from './example.component';
-
-import { PageOneComponent } from './page-one.component';
-import { PageTwoComponent } from './page-two.component';
-import { PageThreeComponent } from './page-three.component';
-
-@NgModule({
-  imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v7/nav/nav-link/angular/example_component_ts.md b/static/usage/v7/nav/nav-link/angular/example_component_ts.md
index b123a4858ce..4c364e72340 100644
--- a/static/usage/v7/nav/nav-link/angular/example_component_ts.md
+++ b/static/usage/v7/nav/nav-link/angular/example_component_ts.md
@@ -1,11 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular/standalone';
 
 import { PageOneComponent } from './page-one.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonNav],
 })
 export class ExampleComponent {
   component = PageOneComponent;
diff --git a/static/usage/v7/nav/nav-link/angular/page_one_component_ts.md b/static/usage/v7/nav/nav-link/angular/page_one_component_ts.md
index 06c42b342cf..b6a83169e18 100644
--- a/static/usage/v7/nav/nav-link/angular/page_one_component_ts.md
+++ b/static/usage/v7/nav/nav-link/angular/page_one_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 import { PageTwoComponent } from './page-two.component';
 
@@ -18,6 +19,7 @@ import { PageTwoComponent } from './page-two.component';
       </ion-nav-link>
     </ion-content>
   `,
+  imports: [IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar],
 })
 export class PageOneComponent {
   component = PageTwoComponent;
diff --git a/static/usage/v7/nav/nav-link/angular/page_three_component_ts.md b/static/usage/v7/nav/nav-link/angular/page_three_component_ts.md
index d9e95ed7218..4cc4fc01be1 100644
--- a/static/usage/v7/nav/nav-link/angular/page_three_component_ts.md
+++ b/static/usage/v7/nav/nav-link/angular/page_three_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-page-one',
@@ -16,6 +17,7 @@ import { Component } from '@angular/core';
       <h1>Page Three</h1>
     </ion-content>
   `,
+  imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar],
 })
 export class PageThreeComponent {}
 ```
diff --git a/static/usage/v7/nav/nav-link/angular/page_two_component_ts.md b/static/usage/v7/nav/nav-link/angular/page_two_component_ts.md
index d6edd90a593..d1986f19a96 100644
--- a/static/usage/v7/nav/nav-link/angular/page_two_component_ts.md
+++ b/static/usage/v7/nav/nav-link/angular/page_two_component_ts.md
@@ -1,5 +1,15 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonNavLink,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { PageThreeComponent } from './page-three.component';
 
@@ -23,6 +33,7 @@ import { PageThreeComponent } from './page-three.component';
       </div>
     </ion-content>
   `,
+  imports: [IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar],
 })
 export class PageTwoComponent {
   component = PageThreeComponent;
diff --git a/static/usage/v7/nav/nav-link/index.md b/static/usage/v7/nav/nav-link/index.md
index de4e4e01562..0456c3ca67e 100644
--- a/static/usage/v7/nav/nav-link/index.md
+++ b/static/usage/v7/nav/nav-link/index.md
@@ -2,7 +2,6 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import angular_app_module_ts from './angular/app_module_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_page_one_component_ts from './angular/page_one_component_ts.md';
@@ -30,7 +29,6 @@ import vue_page_three from './vue/page_three_vue.md';
         'src/app/page-one.component.ts': angular_page_one_component_ts,
         'src/app/page-two.component.ts': angular_page_two_component_ts,
         'src/app/page-three.component.ts': angular_page_three_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
       },
     },
     react: {
diff --git a/static/usage/v8/nav/modal-navigation/angular/app_module_ts.md b/static/usage/v8/nav/modal-navigation/angular/app_module_ts.md
deleted file mode 100644
index d3b8b44f6ce..00000000000
--- a/static/usage/v8/nav/modal-navigation/angular/app_module_ts.md
+++ /dev/null
@@ -1,21 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-
-import { IonicModule } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { ExampleComponent } from './example.component';
-
-import { PageOneComponent } from './page-one.component';
-import { PageTwoComponent } from './page-two.component';
-import { PageThreeComponent } from './page-three.component';
-
-@NgModule({
-  imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v8/nav/modal-navigation/angular/example_component_ts.md b/static/usage/v8/nav/modal-navigation/angular/example_component_ts.md
index 366dc7e246d..1c3ee806556 100644
--- a/static/usage/v8/nav/modal-navigation/angular/example_component_ts.md
+++ b/static/usage/v8/nav/modal-navigation/angular/example_component_ts.md
@@ -1,15 +1,26 @@
 ```ts
 import { Component, ViewChild } from '@angular/core';
-import { IonNav } from '@ionic/angular';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonNav,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { PageOneComponent } from './page-one.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonNav, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  @ViewChild('nav') private nav: IonNav;
+  @ViewChild('nav') private nav!: IonNav;
 
   onWillPresent() {
     this.nav.setRoot(PageOneComponent);
diff --git a/static/usage/v8/nav/modal-navigation/angular/page_one_component_ts.md b/static/usage/v8/nav/modal-navigation/angular/page_one_component_ts.md
index 3c9ec863d04..6467b66e9a0 100644
--- a/static/usage/v8/nav/modal-navigation/angular/page_one_component_ts.md
+++ b/static/usage/v8/nav/modal-navigation/angular/page_one_component_ts.md
@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonNav } from '@ionic/angular';
+import { IonButton, IonContent, IonNav } from '@ionic/angular/standalone';
 
 import { PageTwoComponent } from './page-two.component';
 
@@ -12,6 +12,7 @@ import { PageTwoComponent } from './page-two.component';
       <ion-button (click)="navigateToPageTwo()">Go to Page Two</ion-button>
     </ion-content>
   `,
+  imports: [IonButton, IonContent],
 })
 export class PageOneComponent {
   constructor(private nav: IonNav) {}
diff --git a/static/usage/v8/nav/modal-navigation/angular/page_three_component_ts.md b/static/usage/v8/nav/modal-navigation/angular/page_three_component_ts.md
index 5b1b70c3474..03f298b15ae 100644
--- a/static/usage/v8/nav/modal-navigation/angular/page_three_component_ts.md
+++ b/static/usage/v8/nav/modal-navigation/angular/page_three_component_ts.md
@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonNav } from '@ionic/angular';
+import { IonButton, IonContent, IonNav } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-page-one',
@@ -11,6 +11,7 @@ import { IonNav } from '@ionic/angular';
       <ion-button (click)="navigateToRoot()">Go to Root</ion-button>
     </ion-content>
   `,
+  imports: [IonButton, IonContent],
 })
 export class PageThreeComponent {
   constructor(private nav: IonNav) {}
diff --git a/static/usage/v8/nav/modal-navigation/angular/page_two_component_ts.md b/static/usage/v8/nav/modal-navigation/angular/page_two_component_ts.md
index 0cd5713c062..769b0bc9bda 100644
--- a/static/usage/v8/nav/modal-navigation/angular/page_two_component_ts.md
+++ b/static/usage/v8/nav/modal-navigation/angular/page_two_component_ts.md
@@ -1,6 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
-import { IonNav } from '@ionic/angular';
+import { IonButton, IonContent, IonNav } from '@ionic/angular/standalone';
 
 import { PageThreeComponent } from './page-three.component';
 
@@ -12,6 +12,7 @@ import { PageThreeComponent } from './page-three.component';
       <ion-button (click)="navigateToPageThree()">Go to Page Three</ion-button>
     </ion-content>
   `,
+  imports: [IonButton, IonContent],
 })
 export class PageTwoComponent {
   component = PageThreeComponent;
diff --git a/static/usage/v8/nav/modal-navigation/index.md b/static/usage/v8/nav/modal-navigation/index.md
index 3a6a6ab3142..e2e7320fe4d 100644
--- a/static/usage/v8/nav/modal-navigation/index.md
+++ b/static/usage/v8/nav/modal-navigation/index.md
@@ -2,7 +2,6 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import angular_app_module_ts from './angular/app_module_ts.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_page_one_component_ts from './angular/page_one_component_ts.md';
@@ -30,7 +29,6 @@ import vue_page_three from './vue/page_three_vue.md';
         'src/app/page-one.component.ts': angular_page_one_component_ts,
         'src/app/page-two.component.ts': angular_page_two_component_ts,
         'src/app/page-three.component.ts': angular_page_three_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
       },
     },
     react: {
diff --git a/static/usage/v8/nav/nav-link/angular/app_module_ts.md b/static/usage/v8/nav/nav-link/angular/app_module_ts.md
deleted file mode 100644
index d3b8b44f6ce..00000000000
--- a/static/usage/v8/nav/nav-link/angular/app_module_ts.md
+++ /dev/null
@@ -1,21 +0,0 @@
-```ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-
-import { IonicModule } from '@ionic/angular';
-
-import { AppComponent } from './app.component';
-import { ExampleComponent } from './example.component';
-
-import { PageOneComponent } from './page-one.component';
-import { PageTwoComponent } from './page-two.component';
-import { PageThreeComponent } from './page-three.component';
-
-@NgModule({
-  imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
-  declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-```
diff --git a/static/usage/v8/nav/nav-link/angular/example_component_ts.md b/static/usage/v8/nav/nav-link/angular/example_component_ts.md
index b123a4858ce..4c364e72340 100644
--- a/static/usage/v8/nav/nav-link/angular/example_component_ts.md
+++ b/static/usage/v8/nav/nav-link/angular/example_component_ts.md
@@ -1,11 +1,14 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular/standalone';
 
 import { PageOneComponent } from './page-one.component';
 
 @Component({
   selector: 'app-example',
   templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonNav],
 })
 export class ExampleComponent {
   component = PageOneComponent;
diff --git a/static/usage/v8/nav/nav-link/angular/page_one_component_ts.md b/static/usage/v8/nav/nav-link/angular/page_one_component_ts.md
index 06c42b342cf..b6a83169e18 100644
--- a/static/usage/v8/nav/nav-link/angular/page_one_component_ts.md
+++ b/static/usage/v8/nav/nav-link/angular/page_one_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 import { PageTwoComponent } from './page-two.component';
 
@@ -18,6 +19,7 @@ import { PageTwoComponent } from './page-two.component';
       </ion-nav-link>
     </ion-content>
   `,
+  imports: [IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar],
 })
 export class PageOneComponent {
   component = PageTwoComponent;
diff --git a/static/usage/v8/nav/nav-link/angular/page_three_component_ts.md b/static/usage/v8/nav/nav-link/angular/page_three_component_ts.md
index d9e95ed7218..4cc4fc01be1 100644
--- a/static/usage/v8/nav/nav-link/angular/page_three_component_ts.md
+++ b/static/usage/v8/nav/nav-link/angular/page_three_component_ts.md
@@ -1,5 +1,6 @@
 ```ts
 import { Component } from '@angular/core';
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-page-one',
@@ -16,6 +17,7 @@ import { Component } from '@angular/core';
       <h1>Page Three</h1>
     </ion-content>
   `,
+  imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar],
 })
 export class PageThreeComponent {}
 ```
diff --git a/static/usage/v8/nav/nav-link/angular/page_two_component_ts.md b/static/usage/v8/nav/nav-link/angular/page_two_component_ts.md
index d6edd90a593..d1986f19a96 100644
--- a/static/usage/v8/nav/nav-link/angular/page_two_component_ts.md
+++ b/static/usage/v8/nav/nav-link/angular/page_two_component_ts.md
@@ -1,5 +1,15 @@
 ```ts
 import { Component } from '@angular/core';
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonNavLink,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
 
 import { PageThreeComponent } from './page-three.component';
 
@@ -23,6 +33,7 @@ import { PageThreeComponent } from './page-three.component';
       </div>
     </ion-content>
   `,
+  imports: [IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar],
 })
 export class PageTwoComponent {
   component = PageThreeComponent;
diff --git a/static/usage/v8/nav/nav-link/index.md b/static/usage/v8/nav/nav-link/index.md
index eed4ca22d83..07a944aefd7 100644
--- a/static/usage/v8/nav/nav-link/index.md
+++ b/static/usage/v8/nav/nav-link/index.md
@@ -2,7 +2,6 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
-import angular_app_module_ts from './angular/app_module_ts.md';
 import angular_example_component_html from './angular/example_component_html.md';
 import angular_example_component_ts from './angular/example_component_ts.md';
 import angular_page_one_component_ts from './angular/page_one_component_ts.md';
@@ -30,7 +29,6 @@ import vue_page_three from './vue/page_three_vue.md';
         'src/app/page-one.component.ts': angular_page_one_component_ts,
         'src/app/page-two.component.ts': angular_page_two_component_ts,
         'src/app/page-three.component.ts': angular_page_three_component_ts,
-        'src/app/app.module.ts': angular_app_module_ts,
       },
     },
     react: {
diff --git a/versioned_docs/version-v7/api/nav.md b/versioned_docs/version-v7/api/nav.md
index 2c17d05f6b2..5195dc19efb 100644
--- a/versioned_docs/version-v7/api/nav.md
+++ b/versioned_docs/version-v7/api/nav.md
@@ -37,6 +37,20 @@ import NavLinkExample from '@site/static/usage/v7/nav/nav-link/index.md';
 
 <NavLinkExample />
 
+## Navigation within a Modal
+
+Modal can use Nav to offer a linear navigation that is independent of the URL.
+
+:::note
+
+The example below uses a reference to Nav and the public method APIs to push and pop views. It is recommended to use NavLink in implementations that do not require this level of granular access and control.
+
+:::
+
+import ModalNavigationExample from '@site/static/usage/v7/nav/modal-navigation/index.md';
+
+<ModalNavigationExample />
+
 ## Interfaces
 
 ### NavCustomEvent