diff --git a/docs/api/nav.md b/docs/api/nav.md
index 678969eca07..5e649ae8912 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -42,7 +42,11 @@ TODO: Playground Example
## Using NavLink
-TODO: Playground Example
+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.
+
+import NavLinkExample from '@site/static/usage/nav/nav-link/index.md';
+
+
## Navigation within a Modal
diff --git a/static/usage/nav/nav-link/angular/app_component_html.md b/static/usage/nav/nav-link/angular/app_component_html.md
new file mode 100644
index 00000000000..1534ea3a6ec
--- /dev/null
+++ b/static/usage/nav/nav-link/angular/app_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/nav/nav-link/angular/app_component_ts.md b/static/usage/nav/nav-link/angular/app_component_ts.md
new file mode 100644
index 00000000000..472f41634da
--- /dev/null
+++ b/static/usage/nav/nav-link/angular/app_component_ts.md
@@ -0,0 +1,13 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageOneComponent } from './page-one.component';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: 'app.component.html',
+})
+export class AppComponent {
+ component = PageOneComponent;
+}
+```
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..17eb272293f
--- /dev/null
+++ b/static/usage/nav/nav-link/angular/app_module_ts.md
@@ -0,0 +1,20 @@
+```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 { 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, PageOneComponent, PageTwoComponent, PageThreeComponent],
+ bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
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: `
+
+
+ Page One
+
+
+
+ Page One
+
+ Go to Page Two
+
+
+ `,
+})
+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: `
+
+
+
+
+
+ Page Three
+
+
+
+ Page Three
+
+ `,
+})
+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: `
+
+
+
+
+
+ Page Two
+
+
+
+ Page Two
+
+
+ Go to Page Three
+
+
+
+ `,
+})
+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 @@
+
+
+
+
+
+
+
+ Nav | NavLink
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/nav/nav-link/index.md b/static/usage/nav/nav-link/index.md
new file mode 100644
index 00000000000..07f88bf10f1
--- /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_app_component_html from './angular/app_component_html.md';
+import angular_app_component_ts from './angular/app_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';
+
+
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
+
+
+
+
+
+```
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 }>;
+}
+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 (
+ <>
+
+
+ Page One
+
+
+
+ Page One
+ }>
+ Go to Page Two
+
+
+
+ );
+}
+
+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 (
+ <>
+
+
+
+
+
+ Page Three
+
+
+
+ Page Three
+
+
+ );
+}
+
+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 (
+ <>
+
+
+
+
+
+ Page Two
+
+
+
+ Page Two
+ }>
+ Go to Page Three
+
+
+
+ );
+}
+
+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
+
+
+
+
+
+```
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
+
+
+
+ Page One
+
+
+
+ Page One
+
+ Go to Page Two
+
+
+
+
+
+```
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
+
+
+
+
+
+
+ Page Three
+
+
+
+ Page Three
+
+
+
+
+```
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
+
+
+
+
+
+
+ Page Two
+
+
+
+ Page Two
+
+ Go to Page Three
+
+
+
+
+
+```