diff --git a/docs/api/nav-link.md b/docs/api/nav-link.md
index d0e38399092..89fd038f890 100644
--- a/docs/api/nav-link.md
+++ b/docs/api/nav-link.md
@@ -33,6 +33,8 @@ A navigation link is used to navigate to a specified component. The component ca
 
 It is the element form of calling the `push()`, `pop()`, and `setRoot()` methods on the navigation controller.
 
+For an example of how to use `ion-nav-link`, visit the [`ion-nav` docs](./nav#using-navlink).
+
 
 
 
diff --git a/docs/api/nav.md b/docs/api/nav.md
index 0903afbab34..44914633fdc 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -1,8 +1,5 @@
 ---
 title: "ion-nav"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/nav/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/nav/index.html"
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
@@ -23,18 +20,17 @@ import Slots from '@site/static/auto-generated/nav/slots.md';
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
+Nav is a standalone component for loading arbitrary components and pushing new components on to the stack.
 
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
+Unlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.
 
+## Using NavLink
 
+NavLink is a simplified API when interacting with Nav. Developers can customize the component, pass along component properties, modify the direction of the route animation or define a custom animation when navigating. 
 
-Nav is a standalone component for loading arbitrary components and pushing new components on to the stack.
+import NavLinkExample from '@site/static/usage/nav/nav-link/index.md';
 
-Unlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.
+<NavLinkExample />
 
 ## Interfaces
 
diff --git a/static/code/stackblitz/react/package-lock.json b/static/code/stackblitz/react/package-lock.json
index de8fb6108be..ed487ca7844 100644
--- a/static/code/stackblitz/react/package-lock.json
+++ b/static/code/stackblitz/react/package-lock.json
@@ -8,7 +8,7 @@
       "name": "create-react-app-typescript",
       "version": "0.1.0",
       "dependencies": {
-        "@ionic/react": "^6.0.0",
+        "@ionic/react": "^6.2.0",
         "@types/node": "^16.11.35",
         "@types/react": "^18.0.9",
         "@types/react-dom": "^18.0.4",
@@ -2201,9 +2201,9 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
     "node_modules/@ionic/core": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.0.tgz",
-      "integrity": "sha512-3qUNsVcSAdrjhIhPr5M2RRnh+1xuc9RFaxoeUgI9xQ0YjTmn2FWiH4urDCXuE/rZAwnvHF4X17P0L2EqCPSfWA==",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.2.tgz",
+      "integrity": "sha512-neE+JhtQ7Kb4nGoKR3e55edHQot5BZTw+woV9+pbyCXP1jGeyFeWWPYBYYOkm05TSEkHgh0v6NkV9y31k8GTNw==",
       "dependencies": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",
@@ -2211,11 +2211,11 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.2.0.tgz",
-      "integrity": "sha512-6RJrMpivslHszazxDV7Shmqbmgi7ki0RsqTklAXKKk40+Gglfx/fm+9H7PRJMGJ17ueGRFKN4ZWLahnzl6Y6ag==",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.2.2.tgz",
+      "integrity": "sha512-CRuDJbNDn9bbDba37/5v9aZ2gd450XGklGqXmsxEfadh1iq7iWmqcgw14S0ZDAXQt0aE/J+TeKhTyjyutjsAww==",
       "dependencies": {
-        "@ionic/core": "^6.2.0",
+        "@ionic/core": "^6.2.2",
         "ionicons": "^6.0.2",
         "tslib": "*"
       },
@@ -3138,9 +3138,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "2.17.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.17.1.tgz",
-      "integrity": "sha512-ErjQsNALgZQ9SYeBHhqwL1UO+Zbptwl3kwrRJC2tGlc3G/T6UvPuaKr+PGsqI+CZGia+0+R5EELQvFu74mYeIg==",
+      "version": "2.17.3",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.17.3.tgz",
+      "integrity": "sha512-qw2DZzOpyaltLLEfYRTj3n+XbvRtkmv4QQimYDJubC6jMY0NXK9r6H2+VyszdbbVmvK1D9GqZtyvY0NmOrztsg==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -17714,9 +17714,9 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
     "@ionic/core": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.0.tgz",
-      "integrity": "sha512-3qUNsVcSAdrjhIhPr5M2RRnh+1xuc9RFaxoeUgI9xQ0YjTmn2FWiH4urDCXuE/rZAwnvHF4X17P0L2EqCPSfWA==",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.2.tgz",
+      "integrity": "sha512-neE+JhtQ7Kb4nGoKR3e55edHQot5BZTw+woV9+pbyCXP1jGeyFeWWPYBYYOkm05TSEkHgh0v6NkV9y31k8GTNw==",
       "requires": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",
@@ -17724,11 +17724,11 @@
       }
     },
     "@ionic/react": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.2.0.tgz",
-      "integrity": "sha512-6RJrMpivslHszazxDV7Shmqbmgi7ki0RsqTklAXKKk40+Gglfx/fm+9H7PRJMGJ17ueGRFKN4ZWLahnzl6Y6ag==",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.2.2.tgz",
+      "integrity": "sha512-CRuDJbNDn9bbDba37/5v9aZ2gd450XGklGqXmsxEfadh1iq7iWmqcgw14S0ZDAXQt0aE/J+TeKhTyjyutjsAww==",
       "requires": {
-        "@ionic/core": "^6.2.0",
+        "@ionic/core": "^6.2.2",
         "ionicons": "^6.0.2",
         "tslib": "*"
       }
@@ -18393,9 +18393,9 @@
       }
     },
     "@stencil/core": {
-      "version": "2.17.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.17.1.tgz",
-      "integrity": "sha512-ErjQsNALgZQ9SYeBHhqwL1UO+Zbptwl3kwrRJC2tGlc3G/T6UvPuaKr+PGsqI+CZGia+0+R5EELQvFu74mYeIg=="
+      "version": "2.17.3",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.17.3.tgz",
+      "integrity": "sha512-qw2DZzOpyaltLLEfYRTj3n+XbvRtkmv4QQimYDJubC6jMY0NXK9r6H2+VyszdbbVmvK1D9GqZtyvY0NmOrztsg=="
     },
     "@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
diff --git a/static/usage/nav/modal-navigation/angular/app_module_ts.md b/static/usage/nav/modal-navigation/angular/app_module_ts.md
new file mode 100644
index 00000000000..d3b8b44f6ce
--- /dev/null
+++ b/static/usage/nav/modal-navigation/angular/app_module_ts.md
@@ -0,0 +1,21 @@
+```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/nav/modal-navigation/angular/example_component_html.md b/static/usage/nav/modal-navigation/angular/example_component_html.md
new file mode 100644
index 00000000000..06d46334df5
--- /dev/null
+++ b/static/usage/nav/modal-navigation/angular/example_component_html.md
@@ -0,0 +1,25 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Modal Navigation</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="openModal">Open Modal</ion-button>
+  <ion-modal #modal trigger="openModal" (willPresent)="onWillPresent()">
+    <ng-template>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button (click)="modal.dismiss()"> Close </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <ion-nav #nav></ion-nav>
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+```
diff --git a/static/usage/nav/modal-navigation/angular/example_component_ts.md b/static/usage/nav/modal-navigation/angular/example_component_ts.md
new file mode 100644
index 00000000000..366dc7e246d
--- /dev/null
+++ b/static/usage/nav/modal-navigation/angular/example_component_ts.md
@@ -0,0 +1,18 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { IonNav } from '@ionic/angular';
+
+import { PageOneComponent } from './page-one.component';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  @ViewChild('nav') private nav: IonNav;
+
+  onWillPresent() {
+    this.nav.setRoot(PageOneComponent);
+  }
+}
+```
diff --git a/static/usage/nav/modal-navigation/angular/page_one_component_ts.md b/static/usage/nav/modal-navigation/angular/page_one_component_ts.md
new file mode 100644
index 00000000000..3c9ec863d04
--- /dev/null
+++ b/static/usage/nav/modal-navigation/angular/page_one_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular';
+
+import { PageTwoComponent } from './page-two.component';
+
+@Component({
+  selector: 'app-page-one',
+  template: `
+    <ion-content class="ion-padding">
+      <h1>Page One</h1>
+      <ion-button (click)="navigateToPageTwo()">Go to Page Two</ion-button>
+    </ion-content>
+  `,
+})
+export class PageOneComponent {
+  constructor(private nav: IonNav) {}
+
+  navigateToPageTwo() {
+    this.nav.push(PageTwoComponent);
+  }
+}
+```
diff --git a/static/usage/nav/modal-navigation/angular/page_three_component_ts.md b/static/usage/nav/modal-navigation/angular/page_three_component_ts.md
new file mode 100644
index 00000000000..5b1b70c3474
--- /dev/null
+++ b/static/usage/nav/modal-navigation/angular/page_three_component_ts.md
@@ -0,0 +1,26 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular';
+
+@Component({
+  selector: 'app-page-one',
+  template: `
+    <ion-content class="ion-padding">
+      <h1>Page Three</h1>
+      <ion-button (click)="navigateBack()">Go Back</ion-button>
+      <ion-button (click)="navigateToRoot()">Go to Root</ion-button>
+    </ion-content>
+  `,
+})
+export class PageThreeComponent {
+  constructor(private nav: IonNav) {}
+
+  navigateBack() {
+    this.nav.pop();
+  }
+
+  navigateToRoot() {
+    this.nav.popToRoot();
+  }
+}
+```
diff --git a/static/usage/nav/modal-navigation/angular/page_two_component_ts.md b/static/usage/nav/modal-navigation/angular/page_two_component_ts.md
new file mode 100644
index 00000000000..0cd5713c062
--- /dev/null
+++ b/static/usage/nav/modal-navigation/angular/page_two_component_ts.md
@@ -0,0 +1,25 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular';
+
+import { PageThreeComponent } from './page-three.component';
+
+@Component({
+  selector: 'app-page-two',
+  template: `
+    <ion-content class="ion-padding">
+      <h1>Page Two</h1>
+      <ion-button (click)="navigateToPageThree()">Go to Page Three</ion-button>
+    </ion-content>
+  `,
+})
+export class PageTwoComponent {
+  component = PageThreeComponent;
+
+  constructor(private nav: IonNav) {}
+
+  navigateToPageThree() {
+    this.nav.push(PageThreeComponent);
+  }
+}
+```
diff --git a/static/usage/nav/modal-navigation/demo.html b/static/usage/nav/modal-navigation/demo.html
new file mode 100644
index 00000000000..9ef92b54a39
--- /dev/null
+++ b/static/usage/nav/modal-navigation/demo.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Nav | Modal Navigation</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Modal Navigation</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="openModal">Open Modal</ion-button>
+      <ion-modal trigger="openModal">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal</ion-title>
+            <ion-buttons slot="end">
+              <ion-button onclick="dismiss()">
+                Close
+              </ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-nav></ion-nav>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+    const nav = document.querySelector('ion-nav');
+
+    modal.addEventListener('willPresent', () => {
+      nav.setRoot('page-one');
+    });
+
+    const dismiss = () => modal.dismiss();
+
+    const navigate = (component) => {
+      nav.push(component);
+    }
+
+    const navigateBack = () => {
+      nav.pop();
+    }
+
+    const navigateToRoot = () => {
+      nav.popToRoot();
+    }
+
+    class PageOne extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-content class="ion-padding">
+          <h1>Page One</h1>
+          <ion-button onclick="navigate('page-two')">Go to Page Two</ion-button>
+        </ion-content>
+      `;
+      }
+    }
+
+    class PageTwo extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-content class="ion-padding">
+          <h1>Page Two</h1>
+          <ion-button onclick="navigate('page-three')">Go to Page Three</ion-button>
+        </ion-content>
+      `;
+      }
+    }
+
+    class PageThree extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-content class="ion-padding">
+          <h1>Page Three</h1>
+          <ion-button onclick="navigateBack()">Go Back</ion-button>
+          <ion-button onclick="navigateToRoot()">Go to Root</ion-button>
+        </ion-content>
+      `;
+      }
+    }
+
+    customElements.define('page-one', PageOne);
+    customElements.define('page-two', PageTwo);
+    customElements.define('page-three', PageThree);
+
+  </script>
+
+</body>
+
+</html>
diff --git a/static/usage/nav/modal-navigation/index.md b/static/usage/nav/modal-navigation/index.md
new file mode 100644
index 00000000000..55cfafaeeda
--- /dev/null
+++ b/static/usage/nav/modal-navigation/index.md
@@ -0,0 +1,55 @@
+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';
+import angular_page_two_component_ts from './angular/page_two_component_ts.md';
+import angular_page_three_component_ts from './angular/page_three_component_ts.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_page_one_tsx from './react/page_one_tsx.md';
+import react_page_two_tsx from './react/page_two_tsx.md';
+import react_page_three_tsx from './react/page_three_tsx.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_page_one from './vue/page_one_vue.md';
+import vue_page_two from './vue/page_two_vue.md';
+import vue_page_three from './vue/page_three_vue.md';
+
+<Playground
+  code={{
+    javascript,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        '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: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/page-one.tsx': react_page_one_tsx,
+        'src/page-two.tsx': react_page_two_tsx,
+        'src/page-three.tsx': react_page_three_tsx,
+      },
+    },
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example,
+        'src/components/PageOne.vue': vue_page_one,
+        'src/components/PageTwo.vue': vue_page_two,
+        'src/components/PageThree.vue': vue_page_three,
+      },
+    },
+  }}
+  src="usage/nav/modal-navigation/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/nav/modal-navigation/javascript.md b/static/usage/nav/modal-navigation/javascript.md
new file mode 100644
index 00000000000..5fd4e9ef13a
--- /dev/null
+++ b/static/usage/nav/modal-navigation/javascript.md
@@ -0,0 +1,86 @@
+```html
+<ion-app>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Modal Navigation</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button id="openModal">Open Modal</ion-button>
+    <ion-modal trigger="openModal">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button onclick="dismiss()"> Close </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <ion-nav></ion-nav>
+      </ion-content>
+    </ion-modal>
+  </ion-content>
+</ion-app>
+
+<script>
+  const modal = document.querySelector('ion-modal');
+  const nav = document.querySelector('ion-nav');
+
+  modal.addEventListener('willPresent', () => {
+    nav.setRoot('page-one');
+  });
+
+  var dismiss = () => modal.dismiss();
+
+  var navigate = (component) => {
+    nav.push(component);
+  };
+
+  var navigateBack = () => {
+    nav.pop();
+  };
+
+  var navigateToRoot = () => {
+    nav.popToRoot();
+  };
+
+  class PageOne extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = `
+        <ion-content class="ion-padding">
+          <h1>Page One</h1>
+          <ion-button onclick="navigate('page-two')">Go to Page Two</ion-button>
+        </ion-content>
+      `;
+    }
+  }
+
+  class PageTwo extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = `
+        <ion-content class="ion-padding">
+          <h1>Page Two</h1>
+          <ion-button onclick="navigate('page-three')">Go to Page Three</ion-button>
+        </ion-content>
+      `;
+    }
+  }
+
+  class PageThree extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = `
+        <ion-content class="ion-padding">
+          <h1>Page Three</h1>
+          <ion-button onclick="navigateBack()">Go Back</ion-button>
+          <ion-button onclick="navigateToRoot()">Go to Root</ion-button>
+        </ion-content>
+      `;
+    }
+  }
+
+  customElements.define('page-one', PageOne);
+  customElements.define('page-two', PageTwo);
+  customElements.define('page-three', PageThree);
+</script>
+```
diff --git a/static/usage/nav/modal-navigation/react/main_tsx.md b/static/usage/nav/modal-navigation/react/main_tsx.md
new file mode 100644
index 00000000000..fc6901b3d6d
--- /dev/null
+++ b/static/usage/nav/modal-navigation/react/main_tsx.md
@@ -0,0 +1,60 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+  IonNav,
+  IonPage,
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonModal,
+} from '@ionic/react';
+
+import PageOne from './page-one';
+
+function Example() {
+  const nav = useRef<HTMLIonNavElement>(null);
+  const modal = useRef<HTMLIonModalElement>(null);
+
+  const didPresent = () => {
+    if (nav.current) {
+      nav.current.setRoot(PageOne, { nav: nav.current });
+    }
+  };
+
+  const dismiss = () => {
+    if (modal.current) {
+      modal.current.dismiss();
+    }
+  };
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Modal Navigation</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <IonButton id="openModal">Open Modal</IonButton>
+        <IonModal ref={modal} trigger="openModal" onDidPresent={didPresent}>
+          <IonHeader>
+            <IonToolbar>
+              <IonTitle>Modal</IonTitle>
+              <IonButtons slot="end">
+                <IonButton onClick={dismiss}>Close</IonButton>
+              </IonButtons>
+            </IonToolbar>
+          </IonHeader>
+          <IonContent>
+            <IonNav ref={nav}></IonNav>
+          </IonContent>
+        </IonModal>
+      </IonContent>
+    </IonPage>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/nav/modal-navigation/react/page_one_tsx.md b/static/usage/nav/modal-navigation/react/page_one_tsx.md
new file mode 100644
index 00000000000..ce5c266e21b
--- /dev/null
+++ b/static/usage/nav/modal-navigation/react/page_one_tsx.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+import PageTwo from './page-two';
+
+function PageOne({ nav }: { nav: HTMLIonNavElement }) {
+  const navigateToPageTwo = () => nav.push(PageTwo, { nav });
+  return (
+    <IonContent class="ion-padding">
+      <h1>Page One</h1>
+      <IonButton onClick={navigateToPageTwo}>Go to Page Two</IonButton>
+    </IonContent>
+  );
+}
+
+export default PageOne;
+```
diff --git a/static/usage/nav/modal-navigation/react/page_three_tsx.md b/static/usage/nav/modal-navigation/react/page_three_tsx.md
new file mode 100644
index 00000000000..3613967edfd
--- /dev/null
+++ b/static/usage/nav/modal-navigation/react/page_three_tsx.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+function PageThree({ nav }: { nav: HTMLIonNavElement }) {
+  const navigateBack = () => nav.pop();
+  const navigateToRoot = () => nav.popToRoot();
+
+  return (
+    <IonContent class="ion-padding">
+      <h1>Page Three</h1>
+      <IonButton onClick={navigateBack}>Go Back</IonButton>
+      <IonButton onClick={navigateToRoot}>Go to Root</IonButton>
+    </IonContent>
+  );
+}
+
+export default PageThree;
+```
diff --git a/static/usage/nav/modal-navigation/react/page_two_tsx.md b/static/usage/nav/modal-navigation/react/page_two_tsx.md
new file mode 100644
index 00000000000..48562bd23cd
--- /dev/null
+++ b/static/usage/nav/modal-navigation/react/page_two_tsx.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+import PageThree from './page-three';
+
+function PageTwo({ nav }: { nav: HTMLIonNavElement }) {
+  const navigateToPageThree = () => nav.push(PageThree, { nav });
+
+  return (
+    <IonContent class="ion-padding">
+      <h1>Page Two</h1>
+      <IonButton onClick={navigateToPageThree}>Go to Page Three</IonButton>
+    </IonContent>
+  );
+}
+
+export default PageTwo;
+```
diff --git a/static/usage/nav/modal-navigation/vue/example_vue.md b/static/usage/nav/modal-navigation/vue/example_vue.md
new file mode 100644
index 00000000000..ad5242e5c06
--- /dev/null
+++ b/static/usage/nav/modal-navigation/vue/example_vue.md
@@ -0,0 +1,60 @@
+```html
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Modal Navigation</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="openModal">Open Modal</ion-button>
+      <ion-modal ref="modal" trigger="openModal" @will-present="onWillPresent">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal</ion-title>
+            <ion-buttons slot="end">
+              <ion-button @click="dismiss"> Close </ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-nav ref="nav"></ion-nav>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { nextTick } from 'vue';
+  import {
+    IonNav,
+    IonPage,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonButton,
+    IonModal,
+    IonButtons,
+  } from '@ionic/vue';
+  import PageOne from './PageOne.vue';
+
+  export default {
+    components: { IonNav, IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonModal, IonButtons },
+    methods: {
+      dismiss() {
+        this.$refs.modal.$el.dismiss();
+      },
+      async onWillPresent() {
+        // Need to wait two ticks before the ref is set
+        await nextTick();
+        await nextTick();
+
+        const nav = this.$refs.nav.$el;
+        nav.setRoot(PageOne, { nav });
+      },
+    },
+  };
+</script>
+```
diff --git a/static/usage/nav/modal-navigation/vue/page_one_vue.md b/static/usage/nav/modal-navigation/vue/page_one_vue.md
new file mode 100644
index 00000000000..94613725139
--- /dev/null
+++ b/static/usage/nav/modal-navigation/vue/page_one_vue.md
@@ -0,0 +1,24 @@
+```html
+<template>
+  <ion-content class="ion-padding">
+    <h1>Page One</h1>
+    <ion-button @click="navigateToPageTwo">Go to Page Two</ion-button>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonButton } from '@ionic/vue';
+  import PageTwo from './PageTwo.vue';
+
+  export default {
+    components: { IonContent, IonButton },
+    props: ['nav'],
+    methods: {
+      navigateToPageTwo() {
+        const { nav } = this;
+        nav.push(PageTwo, { nav });
+      },
+    },
+  };
+</script>
+```
diff --git a/static/usage/nav/modal-navigation/vue/page_three_vue.md b/static/usage/nav/modal-navigation/vue/page_three_vue.md
new file mode 100644
index 00000000000..9dde8817996
--- /dev/null
+++ b/static/usage/nav/modal-navigation/vue/page_three_vue.md
@@ -0,0 +1,28 @@
+```html
+<template>
+  <ion-content class="ion-padding">
+    <h1>Page Three</h1>
+    <ion-button @click="navigateBack">Go Back</ion-button>
+    <ion-button @click="navigateToRoot">Go to Root</ion-button>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonButton } from '@ionic/vue';
+
+  export default {
+    components: { IonContent, IonButton },
+    props: ['nav'],
+    methods: {
+      navigateBack() {
+        const { nav } = this;
+        nav.pop();
+      },
+      navigateToRoot() {
+        const { nav } = this;
+        nav.popToRoot();
+      },
+    },
+  };
+</script>
+```
diff --git a/static/usage/nav/modal-navigation/vue/page_two_vue.md b/static/usage/nav/modal-navigation/vue/page_two_vue.md
new file mode 100644
index 00000000000..737fa71158b
--- /dev/null
+++ b/static/usage/nav/modal-navigation/vue/page_two_vue.md
@@ -0,0 +1,24 @@
+```html
+<template>
+  <ion-content class="ion-padding">
+    <h1>Page Two</h1>
+    <ion-button @click="navigateToPageThree">Go to Page Three</ion-button>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonButton } from '@ionic/vue';
+  import PageThree from './PageThree.vue';
+
+  export default {
+    components: { IonContent, IonButton },
+    props: ['nav'],
+    methods: {
+      navigateToPageThree() {
+        const { nav } = this;
+        nav.push(PageThree, { nav });
+      },
+    },
+  };
+</script>
+```
diff --git a/static/usage/nav/nav-link/angular/app_module_ts.md b/static/usage/nav/nav-link/angular/app_module_ts.md
new file mode 100644
index 00000000000..d3b8b44f6ce
--- /dev/null
+++ b/static/usage/nav/nav-link/angular/app_module_ts.md
@@ -0,0 +1,21 @@
+```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/nav/nav-link/angular/example_component_html.md b/static/usage/nav/nav-link/angular/example_component_html.md
new file mode 100644
index 00000000000..1534ea3a6ec
--- /dev/null
+++ b/static/usage/nav/nav-link/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-nav [root]="component"></ion-nav>
+```
diff --git a/static/usage/nav/nav-link/angular/example_component_ts.md b/static/usage/nav/nav-link/angular/example_component_ts.md
new file mode 100644
index 00000000000..b123a4858ce
--- /dev/null
+++ b/static/usage/nav/nav-link/angular/example_component_ts.md
@@ -0,0 +1,13 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageOneComponent } from './page-one.component';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  component = PageOneComponent;
+}
+```
diff --git a/static/usage/nav/nav-link/angular/page_one_component_ts.md b/static/usage/nav/nav-link/angular/page_one_component_ts.md
new file mode 100644
index 00000000000..06c42b342cf
--- /dev/null
+++ b/static/usage/nav/nav-link/angular/page_one_component_ts.md
@@ -0,0 +1,25 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageTwoComponent } from './page-two.component';
+
+@Component({
+  selector: 'app-page-one',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Page One</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page One</h1>
+      <ion-nav-link router-direction="forward" [component]="component">
+        <ion-button>Go to Page Two</ion-button>
+      </ion-nav-link>
+    </ion-content>
+  `,
+})
+export class PageOneComponent {
+  component = PageTwoComponent;
+}
+```
diff --git a/static/usage/nav/nav-link/angular/page_three_component_ts.md b/static/usage/nav/nav-link/angular/page_three_component_ts.md
new file mode 100644
index 00000000000..d9e95ed7218
--- /dev/null
+++ b/static/usage/nav/nav-link/angular/page_three_component_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page-one',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Page Three</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page Three</h1>
+    </ion-content>
+  `,
+})
+export class PageThreeComponent {}
+```
diff --git a/static/usage/nav/nav-link/angular/page_two_component_ts.md b/static/usage/nav/nav-link/angular/page_two_component_ts.md
new file mode 100644
index 00000000000..d6edd90a593
--- /dev/null
+++ b/static/usage/nav/nav-link/angular/page_two_component_ts.md
@@ -0,0 +1,30 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageThreeComponent } from './page-three.component';
+
+@Component({
+  selector: 'app-page-two',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Page Two</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page Two</h1>
+      <div>
+        <ion-nav-link router-direction="forward" [component]="component">
+          <ion-button>Go to Page Three</ion-button>
+        </ion-nav-link>
+      </div>
+    </ion-content>
+  `,
+})
+export class PageTwoComponent {
+  component = PageThreeComponent;
+}
+```
diff --git a/static/usage/nav/nav-link/demo.html b/static/usage/nav/nav-link/demo.html
new file mode 100644
index 00000000000..d813dfe8a87
--- /dev/null
+++ b/static/usage/nav/nav-link/demo.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Nav | NavLink</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-nav root="page-one"></ion-nav>
+  </ion-app>
+
+  <script>
+    class PageOne extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page One</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page One</h1>
+          <ion-nav-link router-direction="forward" component="page-two">
+            <ion-button>Go to Page Two</ion-button>
+          </ion-nav-link>
+        </ion-content>
+      `;
+      }
+    }
+    class PageTwo extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-back-button></ion-back-button>
+            </ion-buttons>
+            <ion-title>Page Two</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Two</h1>
+          <div>
+            <ion-nav-link router-direction="forward" component="page-three">
+              <ion-button>Go to Page Three</ion-button>
+            </ion-nav-link>
+          </div>
+        </ion-content>
+      `;
+      }
+    }
+    class PageThree extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-back-button></ion-back-button>
+            </ion-buttons>
+            <ion-title>Page Three</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Three</h1>
+        </ion-content>
+      `;
+      }
+    }
+    customElements.define('page-one', PageOne);
+    customElements.define('page-two', PageTwo);
+    customElements.define('page-three', PageThree);
+  </script>
+
+</body>
+
+</html>
diff --git a/static/usage/nav/nav-link/index.md b/static/usage/nav/nav-link/index.md
new file mode 100644
index 00000000000..535155750f0
--- /dev/null
+++ b/static/usage/nav/nav-link/index.md
@@ -0,0 +1,54 @@
+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';
+import angular_page_two_component_ts from './angular/page_two_component_ts.md';
+import angular_page_three_component_ts from './angular/page_three_component_ts.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_page_one_tsx from './react/page_one_tsx.md';
+import react_page_two_tsx from './react/page_two_tsx.md';
+import react_page_three_tsx from './react/page_three_tsx.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_page_one from './vue/page_one_vue.md';
+import vue_page_two from './vue/page_two_vue.md';
+import vue_page_three from './vue/page_three_vue.md';
+
+<Playground
+  code={{
+    javascript,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        '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: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/page-one.tsx': react_page_one_tsx,
+        'src/page-two.tsx': react_page_two_tsx,
+        'src/page-three.tsx': react_page_three_tsx,
+      },
+    },
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example,
+        'src/components/PageOne.vue': vue_page_one,
+        'src/components/PageTwo.vue': vue_page_two,
+        'src/components/PageThree.vue': vue_page_three,
+      },
+    },
+  }}
+  src="usage/nav/nav-link/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/nav/nav-link/javascript.md b/static/usage/nav/nav-link/javascript.md
new file mode 100644
index 00000000000..faf19dc3ca7
--- /dev/null
+++ b/static/usage/nav/nav-link/javascript.md
@@ -0,0 +1,67 @@
+```html
+<ion-app>
+  <ion-nav root="page-one"></ion-nav>
+</ion-app>
+
+<script>
+  class PageOne extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page One</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page One</h1>
+          <ion-nav-link router-direction="forward" component="page-two">
+            <ion-button>Go to Page Two</ion-button>
+          </ion-nav-link>
+        </ion-content>
+      `;
+    }
+  }
+  class PageTwo extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-back-button></ion-back-button>
+            </ion-buttons>
+            <ion-title>Page Two</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Two</h1>
+          <div>
+            <ion-nav-link router-direction="forward" component="page-three">
+              <ion-button>Go to Page Three</ion-button>
+            </ion-nav-link>
+          </div>
+        </ion-content>
+      `;
+    }
+  }
+  class PageThree extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-back-button></ion-back-button>
+            </ion-buttons>
+            <ion-title>Page Three</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Three</h1>
+        </ion-content>
+      `;
+    }
+  }
+  customElements.define('page-one', PageOne);
+  customElements.define('page-two', PageTwo);
+  customElements.define('page-three', PageThree);
+</script>
+```
diff --git a/static/usage/nav/nav-link/react/main_tsx.md b/static/usage/nav/nav-link/react/main_tsx.md
new file mode 100644
index 00000000000..f6196a362e9
--- /dev/null
+++ b/static/usage/nav/nav-link/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonNav } from '@ionic/react';
+
+import PageOne from './page-one';
+
+function Example() {
+  return <IonNav root={() => <PageOne />}></IonNav>;
+}
+export default Example;
+```
diff --git a/static/usage/nav/nav-link/react/page_one_tsx.md b/static/usage/nav/nav-link/react/page_one_tsx.md
new file mode 100644
index 00000000000..303ad18547a
--- /dev/null
+++ b/static/usage/nav/nav-link/react/page_one_tsx.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonButton, IonHeader, IonContent, IonNavLink, IonToolbar, IonTitle } from '@ionic/react';
+
+import PageTwo from './page-two';
+
+function PageOne() {
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Page One</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent class="ion-padding">
+        <h1>Page One</h1>
+        <IonNavLink routerDirection="forward" component={() => <PageTwo />}>
+          <IonButton>Go to Page Two</IonButton>
+        </IonNavLink>
+      </IonContent>
+    </>
+  );
+}
+
+export default PageOne;
+```
diff --git a/static/usage/nav/nav-link/react/page_three_tsx.md b/static/usage/nav/nav-link/react/page_three_tsx.md
new file mode 100644
index 00000000000..451d30db85d
--- /dev/null
+++ b/static/usage/nav/nav-link/react/page_three_tsx.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonBackButton, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/react';
+
+function PageThree() {
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton></IonBackButton>
+          </IonButtons>
+          <IonTitle>Page Three</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent class="ion-padding">
+        <h1>Page Three</h1>
+      </IonContent>
+    </>
+  );
+}
+
+export default PageThree;
+```
diff --git a/static/usage/nav/nav-link/react/page_two_tsx.md b/static/usage/nav/nav-link/react/page_two_tsx.md
new file mode 100644
index 00000000000..fd3f8764873
--- /dev/null
+++ b/static/usage/nav/nav-link/react/page_two_tsx.md
@@ -0,0 +1,38 @@
+```tsx
+import React from 'react';
+import {
+  IonBackButton,
+  IonButtons,
+  IonButton,
+  IonHeader,
+  IonContent,
+  IonNavLink,
+  IonToolbar,
+  IonTitle,
+} from '@ionic/react';
+
+import PageThree from './page-three';
+
+function PageTwo() {
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton></IonBackButton>
+          </IonButtons>
+          <IonTitle>Page Two</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent class="ion-padding">
+        <h1>Page Two</h1>
+        <IonNavLink routerDirection="forward" component={() => <PageThree />}>
+          <IonButton>Go to Page Three</IonButton>
+        </IonNavLink>
+      </IonContent>
+    </>
+  );
+}
+
+export default PageTwo;
+```
diff --git a/static/usage/nav/nav-link/vue/example_vue.md b/static/usage/nav/nav-link/vue/example_vue.md
new file mode 100644
index 00000000000..ec054a80749
--- /dev/null
+++ b/static/usage/nav/nav-link/vue/example_vue.md
@@ -0,0 +1,19 @@
+```html
+<template>
+  <ion-nav :root="component"></ion-nav>
+</template>
+
+<script lang="ts">
+  import { IonNav } from '@ionic/vue';
+  import PageOne from './PageOne.vue';
+
+  export default {
+    components: { IonNav },
+    data() {
+      return {
+        component: PageOne,
+      };
+    },
+  };
+</script>
+```
diff --git a/static/usage/nav/nav-link/vue/page_one_vue.md b/static/usage/nav/nav-link/vue/page_one_vue.md
new file mode 100644
index 00000000000..f3635e1db37
--- /dev/null
+++ b/static/usage/nav/nav-link/vue/page_one_vue.md
@@ -0,0 +1,29 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Page One</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Page One</h1>
+    <ion-nav-link router-direction="forward" :component="component">
+      <ion-button>Go to Page Two</ion-button>
+    </ion-nav-link>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton } from '@ionic/vue';
+  import PageTwo from './PageTwo.vue';
+
+  export default {
+    components: { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton },
+    data() {
+      return {
+        component: PageTwo,
+      };
+    },
+  };
+</script>
+```
diff --git a/static/usage/nav/nav-link/vue/page_three_vue.md b/static/usage/nav/nav-link/vue/page_three_vue.md
new file mode 100644
index 00000000000..54d6acf24c9
--- /dev/null
+++ b/static/usage/nav/nav-link/vue/page_three_vue.md
@@ -0,0 +1,23 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button></ion-back-button>
+      </ion-buttons>
+      <ion-title>Page Three</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Page Three</h1>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton } from '@ionic/vue';
+
+  export default {
+    components: { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton },
+  };
+</script>
+```
diff --git a/static/usage/nav/nav-link/vue/page_two_vue.md b/static/usage/nav/nav-link/vue/page_two_vue.md
new file mode 100644
index 00000000000..0d736d69c88
--- /dev/null
+++ b/static/usage/nav/nav-link/vue/page_two_vue.md
@@ -0,0 +1,50 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button></ion-back-button>
+      </ion-buttons>
+      <ion-title>Page Two</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Page Two</h1>
+    <ion-nav-link router-direction="forward" :component="component">
+      <ion-button>Go to Page Three</ion-button>
+    </ion-nav-link>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import {
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    IonContent,
+    IonNavLink,
+    IonButton,
+    IonButtons,
+    IonBackButton,
+  } from '@ionic/vue';
+  import PageThree from './PageThree.vue';
+
+  export default {
+    components: {
+      IonHeader,
+      IonTitle,
+      IonToolbar,
+      IonContent,
+      IonNavLink,
+      IonButton,
+      IonButtons,
+      IonBackButton,
+    },
+    data() {
+      return {
+        component: PageThree,
+      };
+    },
+  };
+</script>
+```