From b886a321611f0b0cede69c3a4c4164a0c883d659 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 21 Jun 2022 22:57:32 -0400
Subject: [PATCH 1/6] docs(nav): component playground examples

---
 docs/api/nav-link.md                          |   2 +
 docs/api/nav.md                               |  22 +-
 .../reference/ReleaseNotes/release-notes.json | 204 +++---------------
 3 files changed, 49 insertions(+), 179 deletions(-)

diff --git a/docs/api/nav-link.md b/docs/api/nav-link.md
index 24fce107ee5..39ee866164a 100644
--- a/docs/api/nav-link.md
+++ b/docs/api/nav-link.md
@@ -36,6 +36,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 e8b47e335cf..678969eca07 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -1,8 +1,6 @@
 ---
 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';
@@ -38,6 +36,26 @@ Nav is a standalone component for loading arbitrary components and pushing new c
 
 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 NavController
+
+TODO: Playground Example
+
+## Using NavLink
+
+TODO: Playground Example
+
+## Navigation within a Modal
+
+TODO: Playground Example
+
+## Animations
+
+TODO: Playground Example
+
+## Event Handling
+
+TODO: Playground Example
+
 ## Interfaces
 
 ### NavCustomEvent
diff --git a/src/components/page/reference/ReleaseNotes/release-notes.json b/src/components/page/reference/ReleaseNotes/release-notes.json
index 982333d8fec..089331e7df5 100644
--- a/src/components/page/reference/ReleaseNotes/release-notes.json
+++ b/src/components/page/reference/ReleaseNotes/release-notes.json
@@ -1,202 +1,52 @@
 [
   {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.1.2...v6.1.3\">6.1.3</a> (2022-04-27)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>core:</strong> inherit aria attributes on host elements (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25156\">#25156</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/611832b0d51da295c1bf2897972c4e8baf6e23a3\">611832b</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/20127\">#20127</a></li>\n<li><strong>datetime:</strong> if no default value, don't highlight active day until one is selected (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25151\">#25151</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/98969395abd400cc44d2d3825581a63eb64a56e0\">9896939</a>)</li>\n<li><strong>picker-column-internal:</strong> center active item when rapidly opened (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25155\">#25155</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/8e17fa9d5f9b00139693e34bc93b1f9c718ea3cf\">8e17fa9</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25154\">#25154</a></li>\n<li><strong>select:</strong> avoid duplicate dialogs and backdrops when clicking (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25175\">#25175</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/70d278414eb5124d17c5ffaba5231c6bfd285656\">70d2784</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25126\">#25126</a></li>\n<li><strong>vue:</strong> canDismiss definition is now exposed (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25195\">#25195</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/e5e0e24f76c15c1a49f759b1a140e337f5393edd\">e5e0e24</a>)</li>\n<li><strong>vue:</strong> replacing routes across nested outlets preserves previous route info (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25171\">#25171</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/7b716076b66fbb5bd4620ea8ba74318bbbc1b7e8\">7b71607</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25017\">#25017</a></li>\n</ul>\n",
+    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.1.9...v6.1.10\">6.1.10</a> (2022-06-15)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>angular:</strong> router compatibility with Angular 12/13 (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25456\">#25456</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/7b105a3471e5bc588ba63f820b707e131c878b6f\">7b105a3</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25448\">#25448</a></li>\n<li><strong>fab-button:</strong> improve ripple effect behavior on click (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25413\">#25413</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/efdaf90c5a767211e0034bab7cce5bd463ff5aa0\">efdaf90</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/21772\">#21772</a></li>\n<li><strong>modal:</strong> backdrop animation when backdropBreakpoint is 1 (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25430\">#25430</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/c10df52f39c527dd7e03176c56a2e6cb0ebe455f\">c10df52</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25402\">#25402</a></li>\n<li><strong>modal:</strong> status bar color now correct with sheet modal (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25424\">#25424</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/377c4f597b972818d90132017d50c33074ddadab\">377c4f5</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/20501\">#20501</a></li>\n<li><strong>picker-column-internal:</strong> switching off an input mode column preserves scroll (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25467\">#25467</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/989429d65cf57ef8fb69854639f8eac1a12369bc\">989429d</a>)</li>\n<li><strong>popover:</strong> ensure popover does not go offscreen when adjusting top position (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25350\">#25350</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/692653842b43b5e36c51163f8261fde3b5bea40d\">6926538</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25349\">#25349</a></li>\n</ul>\n",
     "element": "Vanadium",
-    "name": "v6.1.3",
-    "published_at": "April 27 2022",
+    "name": "v6.1.10",
+    "published_at": "June 15 2022",
     "symbol": "V",
-    "tag_name": "v6.1.3",
+    "tag_name": "v6.1.10",
     "type": "patch",
-    "version": "6.1.3"
+    "version": "6.1.10"
   },
   {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.1.1...v6.1.2\">6.1.2</a> (2022-04-20)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>datetime:</strong> time picker display matches dynamically set value (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25010\">#25010</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/11493a086a4e3f2a4e9d3acdf5a9d49e810a5ef0\">11493a0</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24967\">#24967</a></li>\n<li><strong>modal:</strong> add canDismiss option to modal options (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25144\">#25144</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/2984ddf111b6acbd9e47ed90830b6522179b6cee\">2984ddf</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25143\">#25143</a></li>\n</ul>\n",
+    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.1.8...v6.1.9\">6.1.9</a> (2022-06-08)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>all:</strong> ripple effect is no longer added when scrolling (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25352\">#25352</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/0b275af5ac06f470b4d908b889f513956bf5d868\">0b275af</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/22030\">#22030</a></li>\n<li><strong>angular:</strong> add support for Angular 14 (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25403\">#25403</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/122cdcc8253e46d9537105b11045fd7d9ccd8917\">122cdcc</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25353\">#25353</a></li>\n<li><strong>datetime:</strong> emit ionChange for non-calendar picker presentation (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25380\">#25380</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/4e6a60b6a42287e5091728aecb61f6097e131b83\">4e6a60b</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25375\">#25375</a></li>\n<li><strong>datetime:</strong> ensure that default month shown is always in bounds (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25351\">#25351</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/866d4528ad1b8ffa65258595d553ea934daa4add\">866d452</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25320\">#25320</a></li>\n<li><strong>label:</strong> text contents will repaint on change (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25395\">#25395</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/52ec74193b4e2478cb84a6dfea261cb2113dcbff\">52ec741</a>)</li>\n</ul>\n",
     "element": "Vanadium",
-    "name": "v6.1.2",
-    "published_at": "April 20 2022",
+    "name": "v6.1.9",
+    "published_at": "June 8 2022",
     "symbol": "V",
-    "tag_name": "v6.1.2",
+    "tag_name": "v6.1.9",
     "type": "patch",
-    "version": "6.1.2"
+    "version": "6.1.9"
   },
   {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.1.0...v6.1.1\">6.1.1</a> (2022-04-15)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>all:</strong> import path is now correct when using ionic in a stencil app (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25123\">#25123</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/1b407abdf5d8a2a18b6a2b9daca2d58b7b0f782b\">1b407ab</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25122\">#25122</a></li>\n<li><strong>datetime:</strong> account for 30 and 45 minute timezones when getting current date (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25120\">#25120</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/96b2003b2bd5089d1faafe262e96c7445c5c3349\">96b2003</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25112\">#25112</a></li>\n<li><strong>modal, popover:</strong> do not dismiss when ionDismiss is emitted from select (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25125\">#25125</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/90115db98540a5fc67b611ac2742d1221b8e96ff\">90115db</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25124\">#25124</a></li>\n</ul>\n",
+    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.1.7...v6.1.8\">6.1.8</a> (2022-06-01)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>all:</strong> improve compatibility with vite (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25381\">#25381</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/d83bcd2b7f9937550008f995ff91517777584373\">d83bcd2</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/23823\">#23823</a></li>\n<li><strong>item-sliding:</strong> swiping inside of virtual scroller now prevents scrolling (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25345\">#25345</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/5a1a5f6b4c2ab4059158986e907fff45d03be753\">5a1a5f6</a>)</li>\n<li><strong>range:</strong> dragging knob no longer scrolls page (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25343\">#25343</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/0b92dffa92c05705ff83518c10608e3dc3651d51\">0b92dff</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/19004\">#19004</a></li>\n<li><strong>react:</strong> present controller overlays in React 18 (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25361\">#25361</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/01c40eae5509f1c150d79269a7a75c05112fa343\">01c40ea</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25247\">#25247</a></li>\n</ul>\n",
     "element": "Vanadium",
-    "name": "v6.1.1",
-    "published_at": "April 15 2022",
+    "name": "v6.1.8",
+    "published_at": "June 1 2022",
     "symbol": "V",
-    "tag_name": "v6.1.1",
+    "tag_name": "v6.1.8",
     "type": "patch",
-    "version": "6.1.1"
+    "version": "6.1.8"
   },
   {
-    "body": "<h1><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.0.16...v6.1.0\">6.1.0 Vanadium</a> (2022-04-13)</h1>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>accordion-group:</strong> only allow keyboard interaction if header is focused (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25091\">#25091</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/e1b555f286956574876924068304fc44a78c027c\">e1b555f</a>)</li>\n<li><strong>datetime:</strong> resolve warnings when importing into Stencil app (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25106\">#25106</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/a61c004fb0c10d9fb0eca0987edf798386251ec2\">a61c004</a>)</li>\n<li><strong>menu:</strong> preserve scroll position when focusing on open (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25044\">#25044</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/da896848776105ba1f7035c4412495786199bade\">da89684</a>)</li>\n<li><strong>popover:</strong> only focus trap ion-item children (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24990\">#24990</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/0cd06a675474e1893b4c0801fab8ab79813537c8\">0cd06a6</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24633\">#24633</a></li>\n<li><strong>ripple-effect:</strong> ripple displays on click or touch (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25102\">#25102</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/2a313e91179e19660a758470ed2218bbcf03e0bb\">2a313e9</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25094\">#25094</a></li>\n<li><strong>vue:</strong> ensure that only tab pages get added to the tab navigation stack (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25045\">#25045</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/a0054a7cbd52def24c18fd2dadfd2e49a42b8980\">a0054a7</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24859\">#24859</a></li>\n</ul>\n<h3>Features</h3>\n<ul>\n<li><strong>content, reorder-group, header, footer, infinite-scroll, refresher:</strong> add custom scroll target to improve compatibility with virtual scroll (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24883\">#24883</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/2a438da010ddd4d4211e1879e27d7b28409daaa2\">2a438da</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/23437\">#23437</a></li>\n<li><strong>datetime:</strong> isDateEnabled to enable/disable specific days  (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24898\">#24898</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/e932a042237e6f44bf278bcbd895d8569fc17348\">e932a04</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24209\">#24209</a></li>\n<li><strong>item:</strong> counter formatter to customize counter text display (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24336\">#24336</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/171020e9d200ccfdef0f01c427b295bb50dd1fef\">171020e</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24327\">#24327</a></li>\n<li><strong>modal:</strong> ability to programmatically set current sheet breakpoint (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24648\">#24648</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/3145c76934ac711038f9dcba98a385dfbe754953\">3145c76</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/23917\">#23917</a></li>\n<li><strong>modal:</strong> add canDismiss property to manage modal dismissing (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24928\">#24928</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/4b21958ec57019afcde786598880e1f8edada2b1\">4b21958</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/22297\">#22297</a></li>\n<li><strong>range:</strong> add knobMoveStart and knobMoveEnd events (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25011\">#25011</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/f5cb1f8444ba050042e788f9f9ec7b6309bf1b60\">f5cb1f8</a>)</li>\n<li><strong>select:</strong> add event for when overlay is dismissed (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24400\">#24400</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/b835b7c0c7840f41c54f96743cc0a779ff474ab6\">b835b7c</a>)</li>\n</ul>\n",
+    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.1.6...v6.1.7\">6.1.7</a> (2022-05-26)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>accordion:</strong> accordions expand when using binding (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25322\">#25322</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/61e571e585ed8ad9b0ca2f98f57bb16616413ba6\">61e571e</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25307\">#25307</a></li>\n<li><strong>datetime:</strong> don't update value on confirm call if no date was selected (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25338\">#25338</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/9e5b10a2155c6b9de565931da384e0e49aeca7b7\">9e5b10a</a>)</li>\n<li><strong>item, list:</strong> list aria roles are added (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25336\">#25336</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/311c634d20e9e597db676d6f54e4b79cfe742a61\">311c634</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/19939\">#19939</a></li>\n<li><strong>menu:</strong> rtl menu no longer disappears on ios 15 (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25309\">#25309</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/60054310afbab6151f6c29ff6e74666acd181a41\">6005431</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25192\">#25192</a></li>\n<li><strong>modal:</strong> swipe to close on content blocks scroll in ion-nav (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25300\">#25300</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/fdc55c072765c87ad7c783e6d8a238b007f5f3ff\">fdc55c0</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25298\">#25298</a></li>\n<li><strong>nav:</strong> swipe to go back works inside card modal (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25333\">#25333</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/0156be61cbf73b25cb3c2cba1bd20adebbb3db4f\">0156be6</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25327\">#25327</a></li>\n<li><strong>range:</strong> interfaces are now correctly exported (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25342\">#25342</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/15f0c0669f7598386edf487f408462b90ed91a08\">15f0c06</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25341\">#25341</a></li>\n<li><strong>react:</strong> add param types to useIonPopover dismiss function (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25311\">#25311</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/7111370dd787fdec78a1e3368679bc4c73570b98\">7111370</a>)</li>\n<li><strong>react:</strong> IonTabButton will call custom onClick handlers (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25313\">#25313</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/6034418b33c32fdd682c470eaf61b9fcbe86c4bb\">6034418</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/22511\">#22511</a></li>\n<li><strong>refresher:</strong> attach scroll listener to custom scroll target (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25335\">#25335</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/8f5e4cd9350b10a98afb7c98353c6719eee918bb\">8f5e4cd</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25318\">#25318</a></li>\n<li><strong>types:</strong> improve intellisense with colors (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25347\">#25347</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/97cfbbb65d3e63c32d720e01c7368c68616bb531\">97cfbbb</a>)</li>\n<li><strong>vue:</strong> correct views are now unmounted in tabs (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25270\">#25270</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/5e23fb1ce4e5b6e53828bde59268170f604167ba\">5e23fb1</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25255\">#25255</a></li>\n</ul>\n",
     "element": "Vanadium",
-    "name": "v6.1.0 Vanadium",
-    "published_at": "April 13 2022",
+    "name": "v6.1.7",
+    "published_at": "May 26 2022",
     "symbol": "V",
-    "tag_name": "v6.1.0",
-    "type": "minor",
-    "version": "6.1.0"
-  },
-  {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.0.15...v6.0.16\">6.0.16</a> (2022-04-08)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>angular:</strong> button components now route correctly without reload (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25071\">#25071</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/fb994fa9a7721a3575fb8d123be34aea4bf076a4\">fb994fa</a>)</li>\n</ul>\n",
-    "element": "Titanium",
-    "name": "v6.0.16",
-    "published_at": "April 8 2022",
-    "symbol": "Ti",
-    "tag_name": "v6.0.16",
-    "type": "patch",
-    "version": "6.0.16"
-  },
-  {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.0.14...v6.0.15\">6.0.15</a> (2022-04-06)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>angular:</strong> item styling when control has value (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24932\">#24932</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/eea25d091d7eb319d6ec1de8b793881d3a10949b\">eea25d0</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/23809\">#23809</a></li>\n<li><strong>angular:</strong> routerLink allows opening in a new tab for link elements (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25014\">#25014</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/b010f077fe51992dd9dd8ced69769a8eb91ac055\">b010f07</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24413\">#24413</a></li>\n<li><strong>datetime:</strong> warn when parsing an invalid date value (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25049\">#25049</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/982dc853befe8ccf54163a0b145e563da06f5dc1\">982dc85</a>)</li>\n<li><strong>picker-column:</strong> column renders correctly with selected value (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24988\">#24988</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/83186598ed6cf08b0f0421076c4afb3ab53e1e57\">8318659</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/17664\">#17664</a></li>\n<li><strong>popover:</strong> allow arrow on desktop (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25056\">#25056</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/bcd00c7a6ebb6a00193f04458976ff8b86395215\">bcd00c7</a>)</li>\n</ul>\n",
-    "element": "Titanium",
-    "name": "v6.0.15",
-    "published_at": "April 6 2022",
-    "symbol": "Ti",
-    "tag_name": "v6.0.15",
-    "type": "patch",
-    "version": "6.0.15"
-  },
-  {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.0.13...v6.0.14\">6.0.14</a> (2022-03-30)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>react:</strong> treeshake ionic/core bundle (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24989\">#24989</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/a296ca875c18ec01bfc57972571e95a6d79f5678\">a296ca8</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24497\">#24497</a></li>\n</ul>\n",
-    "element": "Titanium",
-    "name": "v6.0.14",
-    "published_at": "March 30 2022",
-    "symbol": "Ti",
-    "tag_name": "v6.0.14",
-    "type": "patch",
-    "version": "6.0.14"
-  },
-  {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.0.12...v6.0.13\">6.0.13</a> (2022-03-23)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>angular:</strong> ngOnDestroy runs inside angular zone (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24949\">#24949</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/a8fd2d9199ca92d62bce6abf8caccc7709fa5ca1\">a8fd2d9</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/22571\">#22571</a></li>\n<li><strong>datetime:</strong> presentation time emits ionChange once  (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24968\">#24968</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/2909b080b7020299a4554c1459b4b190ff739085\">2909b08</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24967\">#24967</a></li>\n<li><strong>popover:</strong> dismissing nested popover via backdrop now works (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24957\">#24957</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/9e84ef7f91d76ca5a1ecaffc7592287267d5368b\">9e84ef7</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24954\">#24954</a></li>\n</ul>\n",
-    "element": "Titanium",
-    "name": "v6.0.13",
-    "published_at": "March 23 2022",
-    "symbol": "Ti",
-    "tag_name": "v6.0.13",
-    "type": "patch",
-    "version": "6.0.13"
-  },
-  {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.0.11...v6.0.12\">6.0.12</a> (2022-03-16)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>datetime:</strong> reinit behavior on presentation change (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24828\">#24828</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/d46e1e8506ca5095817b421e9edb37d41451e885\">d46e1e8</a>)</li>\n<li><strong>tabs:</strong> angular, fire willChange event before selected tab changes (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24910\">#24910</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/d5efa113317eaf874712134dc9b8e4502aa4760f\">d5efa11</a>)</li>\n<li><strong>toast:</strong> screen readers now announce toasts when presented (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24937\">#24937</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/8a97f6b5c9ca1e77c1790abd1e924955b6b6ea27\">8a97f6b</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/22333\">#22333</a></li>\n<li><strong>vue:</strong> tapping the active tab button now correctly resets the tab stack (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24935\">#24935</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/4534c8bc0b2bca7ab6eecd9886243116e9a039b7\">4534c8b</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24934\">#24934</a></li>\n</ul>\n",
-    "element": "Titanium",
-    "name": "v6.0.12",
-    "published_at": "March 16 2022",
-    "symbol": "Ti",
-    "tag_name": "v6.0.12",
-    "type": "patch",
-    "version": "6.0.12"
-  },
-  {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.0.10...v6.0.11\">6.0.11</a> (2022-03-09)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>datetime:</strong> time picker now scrolls to correct value (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24879\">#24879</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/331ce6d6769900e2aec9e30d35b52cfd40cbb889\">331ce6d</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24878\">#24878</a></li>\n<li><strong>ios:</strong> swipe to go back now works in rtl mode (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24866\">#24866</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/2ac9105796a0765fabc48592b5b44ac58c568579\">2ac9105</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/19488\">#19488</a></li>\n</ul>\n<h3>Performance Improvements</h3>\n<ul>\n<li>improve treeshaking functionality (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24895\">#24895</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/805907af4e78179f1acc9cb02263b1ea10d4e3df\">805907a</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24280\">#24280</a></li>\n</ul>\n",
-    "element": "Titanium",
-    "name": "v6.0.11",
-    "published_at": "March 9 2022",
-    "symbol": "Ti",
-    "tag_name": "v6.0.11",
-    "type": "patch",
-    "version": "6.0.11"
-  },
-  {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.0.9...v6.0.10\">6.0.10</a> (2022-03-02)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>datetime:</strong> confirm method now uses selected date (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24827\">#24827</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/c35b898f1dc0fb706446b6971982df48fd72fe6d\">c35b898</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24823\">#24823</a></li>\n<li><strong>datetime:</strong> persist minutes column on hour change (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24829\">#24829</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/aacb58a3224e3cc51c731d0c9aa52f52c9276692\">aacb58a</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24821\">#24821</a></li>\n<li><strong>item-sliding:</strong> close() will maintain disabled state (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24847\">#24847</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/ea4a9bb69465f8e97746b36638f0b3a26e45da18\">ea4a9bb</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24747\">#24747</a></li>\n<li><strong>modal:</strong> .ion-page element is now correctly added (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24811\">#24811</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/3d0f99904fe192fcb5f529780858a0f25f076af7\">3d0f999</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24809\">#24809</a></li>\n<li><strong>modal:</strong> re-enable swipe gestures when modal is dismissed (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24846\">#24846</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/836c01c73e42caab0101ac4988f0a9b27cf96a5b\">836c01c</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24817\">#24817</a></li>\n<li><strong>modal:</strong> sheet modal now allows input focusing when backdrop disabled (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24840\">#24840</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/e4ec572043e22bd2626dbcfd204fc22a7335282c\">e4ec572</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24581\">#24581</a></li>\n</ul>\n",
-    "element": "Titanium",
-    "name": "v6.0.10",
-    "published_at": "March 2 2022",
-    "symbol": "Ti",
-    "tag_name": "v6.0.10",
-    "type": "patch",
-    "version": "6.0.10"
-  },
-  {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.0.8...v6.0.9\">6.0.9</a> (2022-02-23)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>datetime:</strong> improve datetime sizing in modals (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24762\">#24762</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/b0ac7de168c353ba4899cb74a2b38e25fd0cc0f1\">b0ac7de</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/23992\">#23992</a></li>\n<li><strong>datetime:</strong> month and year column order is now locale aware (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24802\">#24802</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/16647b2c7290389755a4093145788f281c84b7e2\">16647b2</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24548\">#24548</a></li>\n<li><strong>datetime:</strong> month picker no longer gives duplicate months on ios 14 and older (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24792\">#24792</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/b6d7e1c75740a61dcd02c21692e4d4632fb8df5c\">b6d7e1c</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24663\">#24663</a></li>\n<li><strong>img:</strong> draggable attribute is now inherited to inner img element (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24781\">#24781</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/19ac2389eb0843173f51a12de41ac808cd8f0569\">19ac238</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/21325\">#21325</a></li>\n<li><strong>modal:</strong> backdropBreakpoint allows interactivity behind sheet (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24798\">#24798</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/fca3f56ca4568e63fd493debda088263caa86c64\">fca3f56</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24797\">#24797</a></li>\n<li><strong>popover:</strong> default alignment to 'center' for ios mode (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24815\">#24815</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/243f67362f25699bdb373be6b72cb9c14dc95a32\">243f673</a>)</li>\n<li><strong>react, vue:</strong> scroll is no longer interrupted on ios (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24791\">#24791</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/99c91eff8764c9a1630adedab6a9765dd9754f7d\">99c91ef</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24435\">#24435</a></li>\n<li><strong>select:</strong> interface components now show correctly (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24810\">#24810</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/2fc2de51771f4a5c3f20c6071284096e5bf31ec8\">2fc2de5</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24807\">#24807</a></li>\n<li><strong>toast:</strong> toast is now correctly excluded from focus trapping (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24816\">#24816</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/8246112ca12f90edb98629ab82e27a792a1fafad\">8246112</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24733\">#24733</a></li>\n</ul>\n",
-    "element": "Titanium",
-    "name": "v6.0.9",
-    "published_at": "February 23 2022",
-    "symbol": "Ti",
-    "tag_name": "v6.0.9",
+    "tag_name": "v6.1.7",
     "type": "patch",
-    "version": "6.0.9"
+    "version": "6.1.7"
   },
   {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.0.7...v6.0.8\">6.0.8</a> (2022-02-15)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>back-button, breadcrumb, item:</strong> flip chevron icons on RTL (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24705\">#24705</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/a093544fdfc438ed03024285b2a35c5f645ea011\">a093544</a>)</li>\n<li><strong>datetime:</strong> navigate to month within min range (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24759\">#24759</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/7b3838cc670de7845bb5937d204e86cdba93b6e6\">7b3838c</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24757\">#24757</a></li>\n<li><strong>input:</strong> only set native input value if different (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24758\">#24758</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/fd031aa1c3f05b7bfa3e0a0ee2a4793e29e22df5\">fd031aa</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24753\">#24753</a></li>\n<li><strong>router-outlet:</strong> getRouteId() returns the params set in setRouteId(). (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24656\">#24656</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/be2205e5a2b2f8778bd1f7b4ea5cae0bf96f9ef3\">be2205e</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24652\">#24652</a></li>\n<li><strong>router-outlet:</strong> navigating to same route with different params now activates component (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24760\">#24760</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/abc36ae80b060a659f7557ad90efe98b78f5ead9\">abc36ae</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24653\">#24653</a></li>\n<li><strong>vue:</strong> preserve custom classes on IonPage (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24776\">#24776</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/b401de1ab3385c67cc476ff90971ce131cefcc3f\">b401de1</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24772\">#24772</a></li>\n</ul>\n",
-    "element": "Titanium",
-    "name": "v6.0.8",
-    "published_at": "February 15 2022",
-    "symbol": "Ti",
-    "tag_name": "v6.0.8",
-    "type": "patch",
-    "version": "6.0.8"
-  },
-  {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.0.6...v6.0.7\">6.0.7</a> (2022-02-09)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>angular:</strong> inline modals now add .ion-page class correctly (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24751\">#24751</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/ef46eafc9476a85ea3369e542f528d01d3cca0a8\">ef46eaf</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24750\">#24750</a></li>\n</ul>\n",
-    "element": "Titanium",
-    "name": "v6.0.7",
-    "published_at": "February 9 2022",
-    "symbol": "Ti",
-    "tag_name": "v6.0.7",
-    "type": "patch",
-    "version": "6.0.7"
-  },
-  {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.0.5...v6.0.6\">6.0.6</a> (2022-02-09)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>action-sheet:</strong> background includes safe area margin (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24700\">#24700</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/8c22646d66e2077fc88aaacf350330097733bb9b\">8c22646</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24699\">#24699</a></li>\n<li><strong>angular-server:</strong> publish only the dist directory to avoid import errors (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24701\">#24701</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/2a27befe463832b9ca7709ba22421abbdaa4cfa4\">2a27bef</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24605\">#24605</a></li>\n<li><strong>angular, react,  vue:</strong> overlays no longer throw errors when used inside tests (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24681\">#24681</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/897ae4a4546ac0dd811125d5513ef23d133a1589\">897ae4a</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24549\">#24549</a> <a href=\"https://github.com/ionic-team/ionic-framework/issues/24590\">#24590</a></li>\n<li><strong>datetime:</strong> disable intersection observer during month update (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24713\">#24713</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/aab4d306f80851bfd8a02a6361e26d60faeaadb4\">aab4d30</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24712\">#24712</a></li>\n<li><strong>datetime:</strong> minutes only filtered when max hour matches current hour (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24710\">#24710</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/231d6df622c1f5dd9ecdff6fed8f61a4bff332df\">231d6df</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24702\">#24702</a></li>\n<li><strong>input:</strong> cursor position does not jump to end (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24736\">#24736</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/4ff9524e1057aa487069b5982c5f1ecdf51d982b\">4ff9524</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24727\">#24727</a></li>\n<li><strong>input:</strong> IME composition mode (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24735\">#24735</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/c6381ce4f90707774d1c8662bba874f7b306bd1c\">c6381ce</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24669\">#24669</a></li>\n<li><strong>modal, popover:</strong> quickly opening modal/popover no longer presents duplicates (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24697\">#24697</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/928c5fbfcbf3ef1b2c3074464fc20dcf1fe143ae\">928c5fb</a>)</li>\n<li><strong>modal:</strong> inline modals inherit ion-page styling (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24723\">#24723</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/596aad435b5102307da89dd626ca4682b78db452\">596aad4</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24706\">#24706</a></li>\n<li><strong>popover:</strong> use alignment with popover options (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24711\">#24711</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/f5c5c3cffa4f34046b0e9471a9f193db3772180e\">f5c5c3c</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24709\">#24709</a></li>\n<li><strong>router:</strong> router push with relative path (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24719\">#24719</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/d40c0c3a0993eaefbe5107e98958c6b0699a62c2\">d40c0c3</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24718\">#24718</a></li>\n<li><strong>select:</strong> value is selected when given array (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24687\">#24687</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/6ee7d159ecfff3382fadb524c5c430172d40c267\">6ee7d15</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24742\">#24742</a></li>\n<li><strong>vue:</strong> replacing routes now updates location state correctly (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24721\">#24721</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/721a461073bbd8e7218cd5ce02965d673f5a03e8\">721a461</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24432\">#24432</a></li>\n<li><strong>vue:</strong> routing history is correctly replaced when overwriting browser history (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24670\">#24670</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/0b18260da64334d8211c5a0cd806f7416274fc5e\">0b18260</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/23873\">#23873</a></li>\n</ul>\n",
-    "element": "Titanium",
-    "name": "v6.0.6",
-    "published_at": "February 9 2022",
-    "symbol": "Ti",
-    "tag_name": "v6.0.6",
-    "type": "patch",
-    "version": "6.0.6"
-  },
-  {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.0.4...v6.0.5\">6.0.5</a> (2022-02-02)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>datetime:</strong> prevent navigating to disabled months (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24421\">#24421</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/b40fc4632efcdc01f1062d9bcec826afff5cf4ea\">b40fc46</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24208\">#24208</a> <a href=\"https://github.com/ionic-team/ionic-framework/issues/24482\">#24482</a></li>\n<li><strong>input:</strong> min/max compatibility with react-hook-form (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24657\">#24657</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/1f918835f437a59f7a70fc59d9305647aa9c298d\">1f91883</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24489\">#24489</a></li>\n<li><strong>react-router:</strong> remove page transition flicker on outlet mounting (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24667\">#24667</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/bdb5c421d2d1f72c123c254e50c6d31b3c1a8f42\">bdb5c42</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24666\">#24666</a></li>\n<li><strong>react:</strong> nested router outlets will not reanimate entered views (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24672\">#24672</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/43aa6c11f42fd5cf455c50419d5f5fbb327b2901\">43aa6c1</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24107\">#24107</a></li>\n<li><strong>vue:</strong> going back to a tabs outlet no loger causes classList error (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24665\">#24665</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/6d7b1444b63cca03158789fcd41b33a527f6abac\">6d7b144</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24654\">#24654</a></li>\n</ul>\n<h3>Performance Improvements</h3>\n<ul>\n<li><strong>various:</strong> don't use lazy-loaded icon names in components (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24671\">#24671</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/484de5074de212dffb4bf4f73bade7acec103fe8\">484de50</a>)</li>\n</ul>\n",
-    "element": "Titanium",
-    "name": "v6.0.5",
-    "published_at": "February 2 2022",
-    "symbol": "Ti",
-    "tag_name": "v6.0.5",
-    "type": "patch",
-    "version": "6.0.5"
-  },
-  {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.0.3...v6.0.4\">6.0.4</a> (2022-01-26)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>accordion:</strong> items inside of the content now correct display borders (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24618\">#24618</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/d3311df96765948d0a395e4ba99fb9117b44adcb\">d3311df</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24613\">#24613</a></li>\n<li><strong>angular:</strong> routerLink with null value works with Angular 13 (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24622\">#24622</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/90a9a9c3e813c8db0a9d6b3b25c152929bea80fe\">90a9a9c</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24586\">#24586</a></li>\n<li><strong>col:</strong> col no longer errors when running in non-browser environment (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24603\">#24603</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/af0135ce7dbe737b2df46094fd3dc8a41bdb60ae\">af0135c</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24446\">#24446</a></li>\n<li><strong>datetime:</strong> datetime locale with h23 will respect max time range (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24610\">#24610</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/5925e7608ef04f8877e4dd8a80b2c8bdc1cfd4bd\">5925e76</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24588\">#24588</a></li>\n<li><strong>datetime:</strong> timepicker popover will position relative to click target (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24616\">#24616</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/378c63264366964e6ea11e1a2ff8791a40f182d4\">378c632</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24531\">#24531</a> <a href=\"https://github.com/ionic-team/ionic-framework/issues/24415\">#24415</a></li>\n<li><strong>input:</strong> ion-input accepts any string value (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24606\">#24606</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/43c5977d48cb12331c1d3107eb73f29b92c5e049\">43c5977</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/19884\">#19884</a></li>\n<li><strong>item:</strong> label text aligns with input text (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24620\">#24620</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/94d033c4216ae9978aed6346c1c0ea2aec4d375b\">94d033c</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24404\">#24404</a></li>\n<li><strong>item:</strong> match material design character counter (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24335\">#24335</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/54db1a1e7c71c78e843370848fc768582768333e\">54db1a1</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24334\">#24334</a></li>\n<li><strong>menu:</strong> focus trapping with menu and overlays no longer results in errors (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24611\">#24611</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/632dafcd57de5086deebdc7d586b01710aa1a3ce\">632dafc</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24361\">#24361</a> <a href=\"https://github.com/ionic-team/ionic-framework/issues/24481\">#24481</a></li>\n<li><strong>modal:</strong> native keyboard will dismiss when bottom sheet is dragged (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24642\">#24642</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/525f01f086ebf95ab62af0162b876a25f50a3d4b\">525f01f</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/23878\">#23878</a></li>\n<li><strong>range:</strong> setting dir on ion-range to enable rtl mode now supported (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24597\">#24597</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/5dba4e5ce0a07f69a08f2b427e8010b311910f88\">5dba4e5</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/20201\">#20201</a></li>\n<li><strong>react:</strong> setupIonicReact no longer crashes in SSR environment (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24604\">#24604</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/360643d96a03b345c83b88c9ff06e9aa254dee81\">360643d</a>)</li>\n<li><strong>searchbar:</strong> setting dir on ion-searchbar to enable rtl mode now supported (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24602\">#24602</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/35e523564561c0f3323efa761c4654016b97ef69\">35e5235</a>)</li>\n<li><strong>segment:</strong> setting dir on ion-segment to enable rtl mode now supported (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24601\">#24601</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/2940e73a4504247eecb0de6c433104f529530850\">2940e73</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/23978\">#23978</a></li>\n<li><strong>spinner:</strong> ensure transform doesn't overwrite circular animation (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24643\">#24643</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/88ce010418eaca38786b51720c696860b417ab6d\">88ce010</a>)</li>\n<li><strong>toast:</strong> allow input focus while toast is visible (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24572\">#24572</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/29f1140384ae7e1402b09c3760e168cf79833619\">29f1140</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24571\">#24571</a></li>\n<li><strong>toggle:</strong> setting dir on ion-toggle to enable rtl mode now supported (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24600\">#24600</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/353dbc0537ef3b46b9ba13a365ebc5da269de4c7\">353dbc0</a>)</li>\n</ul>\n",
-    "element": "Titanium",
-    "name": "v6.0.4",
-    "published_at": "January 26 2022",
-    "symbol": "Ti",
-    "tag_name": "v6.0.4",
-    "type": "patch",
-    "version": "6.0.4"
-  },
-  {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.0.2...v6.0.3\">6.0.3</a> (2022-01-19)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>angular-server:</strong> use correct @ionic/angular dependency version (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24593\">#24593</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/be022f7de8df85ae842b0e111722b03448d60387\">be022f7</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24592\">#24592</a></li>\n<li><strong>angular:</strong> apply touch, dirty and pristine form control classes (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24558\">#24558</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/273ae2cc087b2a5a30fb50a1b0eaeb0a221900fc\">273ae2c</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24483\">#24483</a></li>\n<li><strong>datetime:</strong> showing calendar grid no longer causes month to switch on ios 15 (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24554\">#24554</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/3d2095922147ea3763e977412977edd9586fec5d\">3d20959</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24405\">#24405</a></li>\n<li><strong>item:</strong> error slot visible in Safari (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24579\">#24579</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/af01a8b3073dce784cc042923d712b9492638d32\">af01a8b</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24575\">#24575</a></li>\n<li><strong>menu:</strong> remove main attribute that was supposed to removed in v5 (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24565\">#24565</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/7704ac3a3710396248590daecb945b76825a0539\">7704ac3</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24563\">#24563</a></li>\n<li><strong>modal:</strong> life cycle events for controller modals (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24508\">#24508</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/9a15753fd95e32155abdeb490ec57cb72385ad1a\">9a15753</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24460\">#24460</a></li>\n<li><strong>overlays:</strong> getTop now returns the top-most presented overlay (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24547\">#24547</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/f5b4382fd5728365e4badf39bc1dd0c149b45c2c\">f5b4382</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/19111\">#19111</a></li>\n<li><strong>react:</strong> add useRef wrapper to useIonOverlay state to avoid stale references (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24553\">#24553</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/bce849c5f324522002eff7f8a5e5023150e9201c\">bce849c</a>)</li>\n<li><strong>react:</strong> prevent errors when dismissing inline popover after containing element is removed (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24569\">#24569</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/c8a392aef5fbf25f59a573897d970c41abac04d2\">c8a392a</a>)</li>\n</ul>\n",
-    "element": "Titanium",
-    "name": "v6.0.3",
-    "published_at": "January 19 2022",
-    "symbol": "Ti",
-    "tag_name": "v6.0.3",
-    "type": "patch",
-    "version": "6.0.3"
-  },
-  {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.0.1...v6.0.2\">6.0.2</a> (2022-01-11)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>angular:</strong> attach change detector ref for inline overlays (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24521\">#24521</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/5c54593dde64ae61347568405ebf74502cfff370\">5c54593</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24502\">#24502</a></li>\n<li><strong>angular:</strong> popover will respect side attribute value (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24470\">#24470</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/e6955a26b92fc536c5c73b60b5943881c7d58ee1\">e6955a2</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24466\">#24466</a></li>\n<li><strong>breadcrumb:</strong> support routerLink on breadcrumb (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24509\">#24509</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/5bb1414f7fa04ea07954cb3f68883ee2f162586a\">5bb1414</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24493\">#24493</a></li>\n<li><strong>css:</strong> inline css source in source maps (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24514\">#24514</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/987d46cfa6e48a932330f04f2e8eb7054b11baf8\">987d46c</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24441\">#24441</a></li>\n<li><strong>datetime:</strong> add top padding to MD calendar month grid (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24522\">#24522</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/bd82b5dc1d06ba22a5410858802d57735fdcf450\">bd82b5d</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24408\">#24408</a></li>\n<li><strong>datetime:</strong> RTL will no longer infinitely scroll (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24475\">#24475</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/8f000089c2986f292147c7f501f23c8c7d1df457\">8f00008</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24472\">#24472</a></li>\n<li><strong>datetime:</strong> time picker format with hourCycle h23 (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24476\">#24476</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/a3724e6a5662c5bc1b724d80540530472827506e\">a3724e6</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24474\">#24474</a></li>\n<li><strong>datetime:</strong> update active day styling when day is selected (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24454\">#24454</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/430439191dba824c11290d7f8622fea10ced6c40\">4304391</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24414\">#24414</a> <a href=\"https://github.com/ionic-team/ionic-framework/issues/24451\">#24451</a></li>\n<li><strong>datetime:</strong> wheel picker shows correct column order in rtl (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24546\">#24546</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/c90ce311a86ccb7c06b1cde91a4659f6682df04d\">c90ce31</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24378\">#24378</a></li>\n<li><strong>overlays:</strong> define custom element children (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24439\">#24439</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/4715b83abb30ec5930710d16e5bfe8fc88a940ce\">4715b83</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24393\">#24393</a></li>\n<li><strong>popover:</strong> allow arrow configuration with controller approach (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24512\">#24512</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/b39003a4c67cd7e01d09be012c9e12d99ca1730a\">b39003a</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24487\">#24487</a></li>\n<li><strong>radio:</strong> fix radio not showing checked state when not in a group (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24423\">#24423</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/94a781cb6a3d92c5e6cab1a7603bfe25826a753c\">94a781c</a>)</li>\n<li><strong>react,vue:</strong> backdrop for inline modal/popover overlay (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24453\">#24453</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/77f8412b746222793cd9d17f12f50d512ab5e886\">77f8412</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24449\">#24449</a></li>\n<li><strong>react:</strong> building app for production now works correctly with vite (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24515\">#24515</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/32fad3d02cb6b012a772de03eafe3e3a6b1300e0\">32fad3d</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24229\">#24229</a></li>\n<li><strong>react:</strong> scrolling to bottom of modal contents (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24510\">#24510</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/1462cef69225e20582e2f9a0b8fd655ca2066b79\">1462cef</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24478\">#24478</a></li>\n<li><strong>refresher:</strong> import icons to avoid errors in react and vue (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24525\">#24525</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/388622f9734b7b832bca3ede99820a7124faa618\">388622f</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24480\">#24480</a></li>\n<li><strong>vue:</strong> correct route is replaced when using router.replace (<a href=\"https://github.com/ionic-team/ionic-framework/issues/24533\">#24533</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/90458da406e2f7a6675be185409ea78595a35128\">90458da</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/24226\">#24226</a></li>\n</ul>\n",
-    "element": "Titanium",
-    "name": "v6.0.2",
-    "published_at": "January 11 2022",
-    "symbol": "Ti",
-    "tag_name": "v6.0.2",
-    "type": "patch",
-    "version": "6.0.2"
-  },
-  {
-    "body": "<h2><a href=\"https://github.com/ionic-team/ionic/compare/v5.9.3...v5.9.4\">5.9.4</a> (2022-04-27)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>core:</strong> inherit aria attributes on host elements (<a href=\"https://github.com/ionic-team/ionic/issues/25156\">#25156</a>) (<a href=\"https://github.com/ionic-team/ionic/issues/25169\">#25169</a>) (<a href=\"https://github.com/ionic-team/ionic/commit/ffb056d50e126a1b89f5133de1e7516d0c29a61a\">ffb056d</a>)</li>\n</ul>\n",
-    "element": "Scandium",
-    "name": "v5.9.4",
-    "published_at": "April 27 2022",
-    "symbol": "Sc",
-    "tag_name": "v5.9.4",
+    "body": "<h2><a href=\"https://github.com/ionic-team/ionic-framework/compare/v6.1.5...v6.1.6\">6.1.6</a> (2022-05-18)</h2>\n<h3>Bug Fixes</h3>\n<ul>\n<li><strong>loading:</strong> spinner now respects —spinner-color (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25261\">#25261</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/65f4c742e7a5e5756f6f72dd853e38e885f90385\">65f4c74</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25180\">#25180</a></li>\n<li><strong>modal:</strong> reset breakpoint to initial breakpoint on present (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25246\">#25246</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/2557bf3c3eed9e33e89e07a8d73489da8d81bee3\">2557bf3</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25245\">#25245</a></li>\n<li><strong>scroll-assist:</strong> touch end events continue to bubble on inputs (<a href=\"https://github.com/ionic-team/ionic-framework/issues/25282\">#25282</a>) (<a href=\"https://github.com/ionic-team/ionic-framework/commit/780f16d9e04ee5aaaf91bb7c6ef15c72cc8aeb45\">780f16d</a>), closes <a href=\"https://github.com/ionic-team/ionic-framework/issues/25229\">#25229</a></li>\n</ul>\n",
+    "element": "Vanadium",
+    "name": "v6.1.6",
+    "published_at": "May 18 2022",
+    "symbol": "V",
+    "tag_name": "v6.1.6",
     "type": "patch",
-    "version": "5.9.4"
+    "version": "6.1.6"
   }
 ]

From 550396c26ea90edf25320bf23d2a0111330b658d Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 6 Jul 2022 16:08:22 -0400
Subject: [PATCH 2/6] docs(nav): nav link component playground (#2437)

---
 docs/api/nav.md                               |  6 +-
 .../nav-link/angular/app_component_html.md    |  3 +
 .../nav/nav-link/angular/app_component_ts.md  | 13 +++
 .../nav/nav-link/angular/app_module_ts.md     | 20 +++++
 .../nav-link/angular/page_one_component_ts.md | 25 ++++++
 .../angular/page_three_component_ts.md        | 21 +++++
 .../nav-link/angular/page_two_component_ts.md | 30 +++++++
 static/usage/nav/nav-link/demo.html           | 84 +++++++++++++++++++
 static/usage/nav/nav-link/index.md            | 54 ++++++++++++
 static/usage/nav/nav-link/javascript.md       | 67 +++++++++++++++
 static/usage/nav/nav-link/react/main_tsx.md   | 11 +++
 .../usage/nav/nav-link/react/page_one_tsx.md  | 26 ++++++
 .../nav/nav-link/react/page_three_tsx.md      | 24 ++++++
 .../usage/nav/nav-link/react/page_two_tsx.md  | 38 +++++++++
 static/usage/nav/nav-link/vue/example_vue.md  | 19 +++++
 static/usage/nav/nav-link/vue/page_one_vue.md | 29 +++++++
 .../usage/nav/nav-link/vue/page_three_vue.md  | 23 +++++
 static/usage/nav/nav-link/vue/page_two_vue.md | 50 +++++++++++
 18 files changed, 542 insertions(+), 1 deletion(-)
 create mode 100644 static/usage/nav/nav-link/angular/app_component_html.md
 create mode 100644 static/usage/nav/nav-link/angular/app_component_ts.md
 create mode 100644 static/usage/nav/nav-link/angular/app_module_ts.md
 create mode 100644 static/usage/nav/nav-link/angular/page_one_component_ts.md
 create mode 100644 static/usage/nav/nav-link/angular/page_three_component_ts.md
 create mode 100644 static/usage/nav/nav-link/angular/page_two_component_ts.md
 create mode 100644 static/usage/nav/nav-link/demo.html
 create mode 100644 static/usage/nav/nav-link/index.md
 create mode 100644 static/usage/nav/nav-link/javascript.md
 create mode 100644 static/usage/nav/nav-link/react/main_tsx.md
 create mode 100644 static/usage/nav/nav-link/react/page_one_tsx.md
 create mode 100644 static/usage/nav/nav-link/react/page_three_tsx.md
 create mode 100644 static/usage/nav/nav-link/react/page_two_tsx.md
 create mode 100644 static/usage/nav/nav-link/vue/example_vue.md
 create mode 100644 static/usage/nav/nav-link/vue/page_one_vue.md
 create mode 100644 static/usage/nav/nav-link/vue/page_three_vue.md
 create mode 100644 static/usage/nav/nav-link/vue/page_two_vue.md

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';
+
+<NavLinkExample />
 
 ## 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
+<ion-nav [root]="component"></ion-nav>
+```
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: `
+    <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..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';
+
+<Playground
+  code={{
+    javascript,
+    angular: {
+      files: {
+        'src/app/app.component.html': angular_app_component_html,
+        'src/app/app.component.ts': angular_app_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>
+```

From 847a21c93137a4e58057989518af842bbd8a0958 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 17 Aug 2022 11:02:53 -0400
Subject: [PATCH 3/6] docs(nav): component playground for modal navigation 
 (#2463)

---
 docs/api/nav.md                               |  27 ++---
 .../code/stackblitz/react/package-lock.json   |  61 ++++++----
 .../angular/app_component_html.md             |  25 +++++
 .../angular/app_component_ts.md               |  18 +++
 .../modal-navigation/angular/app_module_ts.md |  20 ++++
 .../angular/page_one_component_ts.md          |  23 ++++
 .../angular/page_three_component_ts.md        |  26 +++++
 .../angular/page_two_component_ts.md          |  25 +++++
 static/usage/nav/modal-navigation/demo.html   | 106 ++++++++++++++++++
 static/usage/nav/modal-navigation/index.md    |  54 +++++++++
 .../usage/nav/modal-navigation/javascript.md  |  86 ++++++++++++++
 .../nav/modal-navigation/react/main_tsx.md    |  60 ++++++++++
 .../modal-navigation/react/page_one_tsx.md    |  18 +++
 .../modal-navigation/react/page_three_tsx.md  |  19 ++++
 .../modal-navigation/react/page_two_tsx.md    |  19 ++++
 .../nav/modal-navigation/vue/example_vue.md   |  60 ++++++++++
 .../nav/modal-navigation/vue/page_one_vue.md  |  24 ++++
 .../modal-navigation/vue/page_three_vue.md    |  28 +++++
 .../nav/modal-navigation/vue/page_two_vue.md  |  24 ++++
 19 files changed, 682 insertions(+), 41 deletions(-)
 create mode 100644 static/usage/nav/modal-navigation/angular/app_component_html.md
 create mode 100644 static/usage/nav/modal-navigation/angular/app_component_ts.md
 create mode 100644 static/usage/nav/modal-navigation/angular/app_module_ts.md
 create mode 100644 static/usage/nav/modal-navigation/angular/page_one_component_ts.md
 create mode 100644 static/usage/nav/modal-navigation/angular/page_three_component_ts.md
 create mode 100644 static/usage/nav/modal-navigation/angular/page_two_component_ts.md
 create mode 100644 static/usage/nav/modal-navigation/demo.html
 create mode 100644 static/usage/nav/modal-navigation/index.md
 create mode 100644 static/usage/nav/modal-navigation/javascript.md
 create mode 100644 static/usage/nav/modal-navigation/react/main_tsx.md
 create mode 100644 static/usage/nav/modal-navigation/react/page_one_tsx.md
 create mode 100644 static/usage/nav/modal-navigation/react/page_three_tsx.md
 create mode 100644 static/usage/nav/modal-navigation/react/page_two_tsx.md
 create mode 100644 static/usage/nav/modal-navigation/vue/example_vue.md
 create mode 100644 static/usage/nav/modal-navigation/vue/page_one_vue.md
 create mode 100644 static/usage/nav/modal-navigation/vue/page_three_vue.md
 create mode 100644 static/usage/nav/modal-navigation/vue/page_two_vue.md

diff --git a/docs/api/nav.md b/docs/api/nav.md
index 5e649ae8912..90b3bf8114c 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -1,6 +1,5 @@
 ---
 title: "ion-nav"
-hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
@@ -22,24 +21,10 @@ import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<APITOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
-/>
-
-
-
 Nav is a standalone component for loading arbitrary components and pushing new components on to the stack.
 
 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 NavController
-
-TODO: Playground Example
-
 ## 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. 
@@ -50,15 +35,17 @@ import NavLinkExample from '@site/static/usage/nav/nav-link/index.md';
 
 ## Navigation within a Modal
 
-TODO: Playground Example
+Modal can use Nav to offer a linear navigation that is independent of the URL.
+
+:::note
 
-## Animations
+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.
 
-TODO: Playground Example
+:::
 
-## Event Handling
+import ModalNavigationExample from '@site/static/usage/nav/modal-navigation/index.md';
 
-TODO: Playground Example
+<ModalNavigationExample />
 
 ## Interfaces
 
diff --git a/static/code/stackblitz/react/package-lock.json b/static/code/stackblitz/react/package-lock.json
index 4531aeadb45..614b0d32709 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",
@@ -2187,9 +2187,9 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.10",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.10.tgz",
-      "integrity": "sha512-QmQvIe+IklQhNhbq438I3eCnL6XjfTxrgO1+paOdGNKk3R3o4mqJmV0YYT5r9iwnieHgDxKbo3ovs9UnTXhI7g==",
+      "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",
@@ -2197,11 +2197,11 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "6.1.10",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.1.10.tgz",
-      "integrity": "sha512-3XivIon+43cD0QLBAkfi9+9BX0tFL1P0g34Og+DStHdXXtDBgSwqqVW8P96K45uRb7gZuBx9bccb9z9ntOCcig==",
+      "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.1.10",
+        "@ionic/core": "^6.2.2",
         "ionicons": "^6.0.2",
         "tslib": "*"
       },
@@ -3124,9 +3124,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
-      "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw==",
+      "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"
       },
@@ -8307,6 +8307,18 @@
         "@stencil/core": "~2.16.0"
       }
     },
+    "node_modules/ionicons/node_modules/@stencil/core": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
+      "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw==",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=12.10.0",
+        "npm": ">=6.0.0"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -17539,9 +17551,9 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
     "@ionic/core": {
-      "version": "6.1.10",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.10.tgz",
-      "integrity": "sha512-QmQvIe+IklQhNhbq438I3eCnL6XjfTxrgO1+paOdGNKk3R3o4mqJmV0YYT5r9iwnieHgDxKbo3ovs9UnTXhI7g==",
+      "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",
@@ -17549,11 +17561,11 @@
       }
     },
     "@ionic/react": {
-      "version": "6.1.10",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.1.10.tgz",
-      "integrity": "sha512-3XivIon+43cD0QLBAkfi9+9BX0tFL1P0g34Og+DStHdXXtDBgSwqqVW8P96K45uRb7gZuBx9bccb9z9ntOCcig==",
+      "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.1.10",
+        "@ionic/core": "^6.2.2",
         "ionicons": "^6.0.2",
         "tslib": "*"
       }
@@ -18218,9 +18230,9 @@
       }
     },
     "@stencil/core": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
-      "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw=="
+      "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",
@@ -21996,6 +22008,13 @@
       "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
       "requires": {
         "@stencil/core": "~2.16.0"
+      },
+      "dependencies": {
+        "@stencil/core": {
+          "version": "2.16.1",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
+          "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw=="
+        }
       }
     },
     "ipaddr.js": {
diff --git a/static/usage/nav/modal-navigation/angular/app_component_html.md b/static/usage/nav/modal-navigation/angular/app_component_html.md
new file mode 100644
index 00000000000..0a41e05a60c
--- /dev/null
+++ b/static/usage/nav/modal-navigation/angular/app_component_html.md
@@ -0,0 +1,25 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Modal Navigation</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <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/app_component_ts.md b/static/usage/nav/modal-navigation/angular/app_component_ts.md
new file mode 100644
index 00000000000..4d5bc2bd1c5
--- /dev/null
+++ b/static/usage/nav/modal-navigation/angular/app_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-root',
+  templateUrl: 'app.component.html',
+})
+export class AppComponent {
+  @ViewChild('nav') private nav: IonNav;
+
+  onWillPresent() {
+    this.nav.setRoot(PageOneComponent);
+  }
+}
+```
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..17eb272293f
--- /dev/null
+++ b/static/usage/nav/modal-navigation/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/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..5821f957c0c
--- /dev/null
+++ b/static/usage/nav/modal-navigation/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_ts from './angular/app_component_ts.md';
+import angular_app_component_html from './angular/app_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/app.component.html': angular_app_component_html,
+        'src/app/app.component.ts': angular_app_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
+/>
diff --git a/static/usage/nav/modal-navigation/javascript.md b/static/usage/nav/modal-navigation/javascript.md
new file mode 100644
index 00000000000..c6e571959a5
--- /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>
+    <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..be4c01e1972
--- /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>
+        <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..018fb3369d2
--- /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>
+      <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>
+```

From 8a168d779017a1d4e8524d7609acdc6371fb9edb Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 17 Aug 2022 12:12:40 -0400
Subject: [PATCH 4/6] fix(): clean-up examples

---
 .../usage/nav/modal-navigation/angular/app_module_ts.md  | 3 ++-
 .../{app_component_html.md => example_component_html.md} | 2 +-
 .../{app_component_ts.md => example_component_ts.md}     | 6 +++---
 static/usage/nav/modal-navigation/index.md               | 9 +++++----
 static/usage/nav/modal-navigation/javascript.md          | 2 +-
 static/usage/nav/modal-navigation/react/main_tsx.md      | 2 +-
 static/usage/nav/modal-navigation/vue/example_vue.md     | 2 +-
 static/usage/nav/nav-link/angular/app_module_ts.md       | 3 ++-
 .../{app_component_html.md => example_component_html.md} | 0
 .../{app_component_ts.md => example_component_ts.md}     | 6 +++---
 static/usage/nav/nav-link/index.md                       | 8 ++++----
 11 files changed, 23 insertions(+), 20 deletions(-)
 rename static/usage/nav/modal-navigation/angular/{app_component_html.md => example_component_html.md} (94%)
 rename static/usage/nav/modal-navigation/angular/{app_component_ts.md => example_component_ts.md} (74%)
 rename static/usage/nav/nav-link/angular/{app_component_html.md => example_component_html.md} (100%)
 rename static/usage/nav/nav-link/angular/{app_component_ts.md => example_component_ts.md} (61%)

diff --git a/static/usage/nav/modal-navigation/angular/app_module_ts.md b/static/usage/nav/modal-navigation/angular/app_module_ts.md
index 17eb272293f..d3b8b44f6ce 100644
--- a/static/usage/nav/modal-navigation/angular/app_module_ts.md
+++ b/static/usage/nav/modal-navigation/angular/app_module_ts.md
@@ -6,6 +6,7 @@ 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';
@@ -13,7 +14,7 @@ import { PageThreeComponent } from './page-three.component';
 
 @NgModule({
   imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
-  declarations: [AppComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
+  declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
   bootstrap: [AppComponent],
 })
 export class AppModule {}
diff --git a/static/usage/nav/modal-navigation/angular/app_component_html.md b/static/usage/nav/modal-navigation/angular/example_component_html.md
similarity index 94%
rename from static/usage/nav/modal-navigation/angular/app_component_html.md
rename to static/usage/nav/modal-navigation/angular/example_component_html.md
index 0a41e05a60c..06d46334df5 100644
--- a/static/usage/nav/modal-navigation/angular/app_component_html.md
+++ b/static/usage/nav/modal-navigation/angular/example_component_html.md
@@ -4,7 +4,7 @@
     <ion-title>Modal Navigation</ion-title>
   </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="ion-padding">
   <ion-button id="openModal">Open Modal</ion-button>
   <ion-modal #modal trigger="openModal" (willPresent)="onWillPresent()">
     <ng-template>
diff --git a/static/usage/nav/modal-navigation/angular/app_component_ts.md b/static/usage/nav/modal-navigation/angular/example_component_ts.md
similarity index 74%
rename from static/usage/nav/modal-navigation/angular/app_component_ts.md
rename to static/usage/nav/modal-navigation/angular/example_component_ts.md
index 4d5bc2bd1c5..366dc7e246d 100644
--- a/static/usage/nav/modal-navigation/angular/app_component_ts.md
+++ b/static/usage/nav/modal-navigation/angular/example_component_ts.md
@@ -5,10 +5,10 @@ import { IonNav } from '@ionic/angular';
 import { PageOneComponent } from './page-one.component';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   @ViewChild('nav') private nav: IonNav;
 
   onWillPresent() {
diff --git a/static/usage/nav/modal-navigation/index.md b/static/usage/nav/modal-navigation/index.md
index 5821f957c0c..55cfafaeeda 100644
--- a/static/usage/nav/modal-navigation/index.md
+++ b/static/usage/nav/modal-navigation/index.md
@@ -3,8 +3,8 @@ 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_ts from './angular/app_component_ts.md';
-import angular_app_component_html from './angular/app_component_html.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';
@@ -24,8 +24,8 @@ import vue_page_three from './vue/page_three_vue.md';
     javascript,
     angular: {
       files: {
-        'src/app/app.component.html': angular_app_component_html,
-        'src/app/app.component.ts': angular_app_component_ts,
+        '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,
@@ -51,4 +51,5 @@ import vue_page_three from './vue/page_three_vue.md';
   }}
   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
index c6e571959a5..5fd4e9ef13a 100644
--- a/static/usage/nav/modal-navigation/javascript.md
+++ b/static/usage/nav/modal-navigation/javascript.md
@@ -5,7 +5,7 @@
       <ion-title>Modal Navigation</ion-title>
     </ion-toolbar>
   </ion-header>
-  <ion-content>
+  <ion-content class="ion-padding">
     <ion-button id="openModal">Open Modal</ion-button>
     <ion-modal trigger="openModal">
       <ion-header>
diff --git a/static/usage/nav/modal-navigation/react/main_tsx.md b/static/usage/nav/modal-navigation/react/main_tsx.md
index be4c01e1972..fc6901b3d6d 100644
--- a/static/usage/nav/modal-navigation/react/main_tsx.md
+++ b/static/usage/nav/modal-navigation/react/main_tsx.md
@@ -37,7 +37,7 @@ function Example() {
           <IonTitle>Modal Navigation</IonTitle>
         </IonToolbar>
       </IonHeader>
-      <IonContent>
+      <IonContent className="ion-padding">
         <IonButton id="openModal">Open Modal</IonButton>
         <IonModal ref={modal} trigger="openModal" onDidPresent={didPresent}>
           <IonHeader>
diff --git a/static/usage/nav/modal-navigation/vue/example_vue.md b/static/usage/nav/modal-navigation/vue/example_vue.md
index 018fb3369d2..ad5242e5c06 100644
--- a/static/usage/nav/modal-navigation/vue/example_vue.md
+++ b/static/usage/nav/modal-navigation/vue/example_vue.md
@@ -6,7 +6,7 @@
         <ion-title>Modal Navigation</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content>
+    <ion-content class="ion-padding">
       <ion-button id="openModal">Open Modal</ion-button>
       <ion-modal ref="modal" trigger="openModal" @will-present="onWillPresent">
         <ion-header>
diff --git a/static/usage/nav/nav-link/angular/app_module_ts.md b/static/usage/nav/nav-link/angular/app_module_ts.md
index 17eb272293f..d3b8b44f6ce 100644
--- a/static/usage/nav/nav-link/angular/app_module_ts.md
+++ b/static/usage/nav/nav-link/angular/app_module_ts.md
@@ -6,6 +6,7 @@ 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';
@@ -13,7 +14,7 @@ import { PageThreeComponent } from './page-three.component';
 
 @NgModule({
   imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
-  declarations: [AppComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
+  declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
   bootstrap: [AppComponent],
 })
 export class AppModule {}
diff --git a/static/usage/nav/nav-link/angular/app_component_html.md b/static/usage/nav/nav-link/angular/example_component_html.md
similarity index 100%
rename from static/usage/nav/nav-link/angular/app_component_html.md
rename to static/usage/nav/nav-link/angular/example_component_html.md
diff --git a/static/usage/nav/nav-link/angular/app_component_ts.md b/static/usage/nav/nav-link/angular/example_component_ts.md
similarity index 61%
rename from static/usage/nav/nav-link/angular/app_component_ts.md
rename to static/usage/nav/nav-link/angular/example_component_ts.md
index 472f41634da..b123a4858ce 100644
--- a/static/usage/nav/nav-link/angular/app_component_ts.md
+++ b/static/usage/nav/nav-link/angular/example_component_ts.md
@@ -4,10 +4,10 @@ import { Component } from '@angular/core';
 import { PageOneComponent } from './page-one.component';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: 'app.component.html',
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
 })
-export class AppComponent {
+export class ExampleComponent {
   component = PageOneComponent;
 }
 ```
diff --git a/static/usage/nav/nav-link/index.md b/static/usage/nav/nav-link/index.md
index 07f88bf10f1..535155750f0 100644
--- a/static/usage/nav/nav-link/index.md
+++ b/static/usage/nav/nav-link/index.md
@@ -3,8 +3,8 @@ 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_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';
@@ -24,8 +24,8 @@ import vue_page_three from './vue/page_three_vue.md';
     javascript,
     angular: {
       files: {
-        'src/app/app.component.html': angular_app_component_html,
-        'src/app/app.component.ts': angular_app_component_ts,
+        '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,

From 2370f1d2665c1951ddc567ce5f4097bad3f09c80 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean.perkins@outsystems.com>
Date: Mon, 12 Aug 2024 17:46:37 -0400
Subject: [PATCH 5/6] chore: run prettier

---
 static/usage/nav/modal-navigation/demo.html | 154 ++++++++++----------
 static/usage/nav/nav-link/demo.html         |  65 ++++-----
 2 files changed, 105 insertions(+), 114 deletions(-)

diff --git a/static/usage/nav/modal-navigation/demo.html b/static/usage/nav/modal-navigation/demo.html
index 9ef92b54a39..6485f99618c 100644
--- a/static/usage/nav/modal-navigation/demo.html
+++ b/static/usage/nav/modal-navigation/demo.html
@@ -1,106 +1,100 @@
 <!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 = `
+  <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 = `
+      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 = `
+      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>
 
+      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/demo.html b/static/usage/nav/nav-link/demo.html
index d813dfe8a87..171067273b3 100644
--- a/static/usage/nav/nav-link/demo.html
+++ b/static/usage/nav/nav-link/demo.html
@@ -1,26 +1,25 @@
 <!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>
 
-<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>
 
-<body>
-  <ion-app>
-    <ion-nav root="page-one"></ion-nav>
-  </ion-app>
-
-  <script>
-    class PageOne extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = `
+    <script>
+      class PageOne extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
         <ion-header>
           <ion-toolbar>
             <ion-title>Page One</ion-title>
@@ -33,11 +32,11 @@ <h1>Page One</h1>
           </ion-nav-link>
         </ion-content>
       `;
+        }
       }
-    }
-    class PageTwo extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = `
+      class PageTwo extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
         <ion-header>
           <ion-toolbar>
             <ion-buttons slot="start">
@@ -55,11 +54,11 @@ <h1>Page Two</h1>
           </div>
         </ion-content>
       `;
+        }
       }
-    }
-    class PageThree extends HTMLElement {
-      connectedCallback() {
-        this.innerHTML = `
+      class PageThree extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
         <ion-header>
           <ion-toolbar>
             <ion-buttons slot="start">
@@ -72,13 +71,11 @@ <h1>Page Two</h1>
           <h1>Page Three</h1>
         </ion-content>
       `;
+        }
       }
-    }
-    customElements.define('page-one', PageOne);
-    customElements.define('page-two', PageTwo);
-    customElements.define('page-three', PageThree);
-  </script>
-
-</body>
-
+      customElements.define('page-one', PageOne);
+      customElements.define('page-two', PageTwo);
+      customElements.define('page-three', PageThree);
+    </script>
+  </body>
 </html>

From f54644ef206fa99f48666ef9b93ad05e72539aaa Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean.perkins@outsystems.com>
Date: Mon, 12 Aug 2024 17:56:21 -0400
Subject: [PATCH 6/6] fix: build

---
 docs/api/nav.md                               |  12 +--
 .../modal-navigation/angular/app_module_ts.md |  21 ----
 .../angular/example_component_html.md         |  25 -----
 .../angular/example_component_ts.md           |  18 ----
 .../angular/page_one_component_ts.md          |  23 ----
 .../angular/page_three_component_ts.md        |  26 -----
 .../angular/page_two_component_ts.md          |  25 -----
 static/usage/nav/modal-navigation/demo.html   | 100 ------------------
 static/usage/nav/modal-navigation/index.md    |  55 ----------
 .../usage/nav/modal-navigation/javascript.md  |  86 ---------------
 .../nav/modal-navigation/react/main_tsx.md    |  60 -----------
 .../modal-navigation/react/page_one_tsx.md    |  18 ----
 .../modal-navigation/react/page_three_tsx.md  |  19 ----
 .../modal-navigation/react/page_two_tsx.md    |  19 ----
 .../nav/modal-navigation/vue/example_vue.md   |  60 -----------
 .../nav/modal-navigation/vue/page_one_vue.md  |  24 -----
 .../modal-navigation/vue/page_three_vue.md    |  28 -----
 .../nav/modal-navigation/vue/page_two_vue.md  |  24 -----
 .../nav/nav-link/angular/app_module_ts.md     |  21 ----
 .../angular/example_component_html.md         |   3 -
 .../nav-link/angular/example_component_ts.md  |  13 ---
 .../nav-link/angular/page_one_component_ts.md |  25 -----
 .../angular/page_three_component_ts.md        |  21 ----
 .../nav-link/angular/page_two_component_ts.md |  30 ------
 static/usage/nav/nav-link/demo.html           |  81 --------------
 static/usage/nav/nav-link/index.md            |  54 ----------
 static/usage/nav/nav-link/javascript.md       |  67 ------------
 static/usage/nav/nav-link/react/main_tsx.md   |  11 --
 .../usage/nav/nav-link/react/page_one_tsx.md  |  26 -----
 .../nav/nav-link/react/page_three_tsx.md      |  24 -----
 .../usage/nav/nav-link/react/page_two_tsx.md  |  38 -------
 static/usage/nav/nav-link/vue/example_vue.md  |  19 ----
 static/usage/nav/nav-link/vue/page_one_vue.md |  29 -----
 .../usage/nav/nav-link/vue/page_three_vue.md  |  23 ----
 static/usage/nav/nav-link/vue/page_two_vue.md |  50 ---------
 35 files changed, 2 insertions(+), 1176 deletions(-)
 delete mode 100644 static/usage/nav/modal-navigation/angular/app_module_ts.md
 delete mode 100644 static/usage/nav/modal-navigation/angular/example_component_html.md
 delete mode 100644 static/usage/nav/modal-navigation/angular/example_component_ts.md
 delete mode 100644 static/usage/nav/modal-navigation/angular/page_one_component_ts.md
 delete mode 100644 static/usage/nav/modal-navigation/angular/page_three_component_ts.md
 delete mode 100644 static/usage/nav/modal-navigation/angular/page_two_component_ts.md
 delete mode 100644 static/usage/nav/modal-navigation/demo.html
 delete mode 100644 static/usage/nav/modal-navigation/index.md
 delete mode 100644 static/usage/nav/modal-navigation/javascript.md
 delete mode 100644 static/usage/nav/modal-navigation/react/main_tsx.md
 delete mode 100644 static/usage/nav/modal-navigation/react/page_one_tsx.md
 delete mode 100644 static/usage/nav/modal-navigation/react/page_three_tsx.md
 delete mode 100644 static/usage/nav/modal-navigation/react/page_two_tsx.md
 delete mode 100644 static/usage/nav/modal-navigation/vue/example_vue.md
 delete mode 100644 static/usage/nav/modal-navigation/vue/page_one_vue.md
 delete mode 100644 static/usage/nav/modal-navigation/vue/page_three_vue.md
 delete mode 100644 static/usage/nav/modal-navigation/vue/page_two_vue.md
 delete mode 100644 static/usage/nav/nav-link/angular/app_module_ts.md
 delete mode 100644 static/usage/nav/nav-link/angular/example_component_html.md
 delete mode 100644 static/usage/nav/nav-link/angular/example_component_ts.md
 delete mode 100644 static/usage/nav/nav-link/angular/page_one_component_ts.md
 delete mode 100644 static/usage/nav/nav-link/angular/page_three_component_ts.md
 delete mode 100644 static/usage/nav/nav-link/angular/page_two_component_ts.md
 delete mode 100644 static/usage/nav/nav-link/demo.html
 delete mode 100644 static/usage/nav/nav-link/index.md
 delete mode 100644 static/usage/nav/nav-link/javascript.md
 delete mode 100644 static/usage/nav/nav-link/react/main_tsx.md
 delete mode 100644 static/usage/nav/nav-link/react/page_one_tsx.md
 delete mode 100644 static/usage/nav/nav-link/react/page_three_tsx.md
 delete mode 100644 static/usage/nav/nav-link/react/page_two_tsx.md
 delete mode 100644 static/usage/nav/nav-link/vue/example_vue.md
 delete mode 100644 static/usage/nav/nav-link/vue/page_one_vue.md
 delete mode 100644 static/usage/nav/nav-link/vue/page_three_vue.md
 delete mode 100644 static/usage/nav/nav-link/vue/page_two_vue.md

diff --git a/docs/api/nav.md b/docs/api/nav.md
index 9a5cbc8fa2e..ff8bba63acf 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -27,17 +27,9 @@ Unlike Router Outlet, Nav is not tied to a particular router. This means that if
 
 ## 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.
-
-import NavLinkExample from '@site/static/usage/v8/nav/nav-link/index.md';
-
-<NavLinkExample />
-
-## 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. 
 
-import NavLinkExample from '@site/static/usage/nav/nav-link/index.md';
+import NavLinkExample from '@site/static/usage/v8/nav/nav-link/index.md'; 
 
 <NavLinkExample />
 
@@ -51,7 +43,7 @@ The example below uses a reference to Nav and the public method APIs to push and
 
 :::
 
-import ModalNavigationExample from '@site/static/usage/nav/modal-navigation/index.md';
+import ModalNavigationExample from '@site/static/usage/v8/nav/modal-navigation/index.md';
 
 <ModalNavigationExample />
 
diff --git a/static/usage/nav/modal-navigation/angular/app_module_ts.md b/static/usage/nav/modal-navigation/angular/app_module_ts.md
deleted file mode 100644
index d3b8b44f6ce..00000000000
--- a/static/usage/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/nav/modal-navigation/angular/example_component_html.md b/static/usage/nav/modal-navigation/angular/example_component_html.md
deleted file mode 100644
index 06d46334df5..00000000000
--- a/static/usage/nav/modal-navigation/angular/example_component_html.md
+++ /dev/null
@@ -1,25 +0,0 @@
-```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
deleted file mode 100644
index 366dc7e246d..00000000000
--- a/static/usage/nav/modal-navigation/angular/example_component_ts.md
+++ /dev/null
@@ -1,18 +0,0 @@
-```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
deleted file mode 100644
index 3c9ec863d04..00000000000
--- a/static/usage/nav/modal-navigation/angular/page_one_component_ts.md
+++ /dev/null
@@ -1,23 +0,0 @@
-```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
deleted file mode 100644
index 5b1b70c3474..00000000000
--- a/static/usage/nav/modal-navigation/angular/page_three_component_ts.md
+++ /dev/null
@@ -1,26 +0,0 @@
-```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
deleted file mode 100644
index 0cd5713c062..00000000000
--- a/static/usage/nav/modal-navigation/angular/page_two_component_ts.md
+++ /dev/null
@@ -1,25 +0,0 @@
-```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
deleted file mode 100644
index 6485f99618c..00000000000
--- a/static/usage/nav/modal-navigation/demo.html
+++ /dev/null
@@ -1,100 +0,0 @@
-<!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
deleted file mode 100644
index 55cfafaeeda..00000000000
--- a/static/usage/nav/modal-navigation/index.md
+++ /dev/null
@@ -1,55 +0,0 @@
-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
deleted file mode 100644
index 5fd4e9ef13a..00000000000
--- a/static/usage/nav/modal-navigation/javascript.md
+++ /dev/null
@@ -1,86 +0,0 @@
-```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
deleted file mode 100644
index fc6901b3d6d..00000000000
--- a/static/usage/nav/modal-navigation/react/main_tsx.md
+++ /dev/null
@@ -1,60 +0,0 @@
-```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
deleted file mode 100644
index ce5c266e21b..00000000000
--- a/static/usage/nav/modal-navigation/react/page_one_tsx.md
+++ /dev/null
@@ -1,18 +0,0 @@
-```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
deleted file mode 100644
index 3613967edfd..00000000000
--- a/static/usage/nav/modal-navigation/react/page_three_tsx.md
+++ /dev/null
@@ -1,19 +0,0 @@
-```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
deleted file mode 100644
index 48562bd23cd..00000000000
--- a/static/usage/nav/modal-navigation/react/page_two_tsx.md
+++ /dev/null
@@ -1,19 +0,0 @@
-```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
deleted file mode 100644
index ad5242e5c06..00000000000
--- a/static/usage/nav/modal-navigation/vue/example_vue.md
+++ /dev/null
@@ -1,60 +0,0 @@
-```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
deleted file mode 100644
index 94613725139..00000000000
--- a/static/usage/nav/modal-navigation/vue/page_one_vue.md
+++ /dev/null
@@ -1,24 +0,0 @@
-```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
deleted file mode 100644
index 9dde8817996..00000000000
--- a/static/usage/nav/modal-navigation/vue/page_three_vue.md
+++ /dev/null
@@ -1,28 +0,0 @@
-```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
deleted file mode 100644
index 737fa71158b..00000000000
--- a/static/usage/nav/modal-navigation/vue/page_two_vue.md
+++ /dev/null
@@ -1,24 +0,0 @@
-```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
deleted file mode 100644
index d3b8b44f6ce..00000000000
--- a/static/usage/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/nav/nav-link/angular/example_component_html.md b/static/usage/nav/nav-link/angular/example_component_html.md
deleted file mode 100644
index 1534ea3a6ec..00000000000
--- a/static/usage/nav/nav-link/angular/example_component_html.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```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
deleted file mode 100644
index b123a4858ce..00000000000
--- a/static/usage/nav/nav-link/angular/example_component_ts.md
+++ /dev/null
@@ -1,13 +0,0 @@
-```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
deleted file mode 100644
index 06c42b342cf..00000000000
--- a/static/usage/nav/nav-link/angular/page_one_component_ts.md
+++ /dev/null
@@ -1,25 +0,0 @@
-```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
deleted file mode 100644
index d9e95ed7218..00000000000
--- a/static/usage/nav/nav-link/angular/page_three_component_ts.md
+++ /dev/null
@@ -1,21 +0,0 @@
-```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
deleted file mode 100644
index d6edd90a593..00000000000
--- a/static/usage/nav/nav-link/angular/page_two_component_ts.md
+++ /dev/null
@@ -1,30 +0,0 @@
-```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
deleted file mode 100644
index 171067273b3..00000000000
--- a/static/usage/nav/nav-link/demo.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<!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
deleted file mode 100644
index 535155750f0..00000000000
--- a/static/usage/nav/nav-link/index.md
+++ /dev/null
@@ -1,54 +0,0 @@
-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
deleted file mode 100644
index faf19dc3ca7..00000000000
--- a/static/usage/nav/nav-link/javascript.md
+++ /dev/null
@@ -1,67 +0,0 @@
-```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
deleted file mode 100644
index f6196a362e9..00000000000
--- a/static/usage/nav/nav-link/react/main_tsx.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```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
deleted file mode 100644
index 303ad18547a..00000000000
--- a/static/usage/nav/nav-link/react/page_one_tsx.md
+++ /dev/null
@@ -1,26 +0,0 @@
-```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
deleted file mode 100644
index 451d30db85d..00000000000
--- a/static/usage/nav/nav-link/react/page_three_tsx.md
+++ /dev/null
@@ -1,24 +0,0 @@
-```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
deleted file mode 100644
index fd3f8764873..00000000000
--- a/static/usage/nav/nav-link/react/page_two_tsx.md
+++ /dev/null
@@ -1,38 +0,0 @@
-```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
deleted file mode 100644
index ec054a80749..00000000000
--- a/static/usage/nav/nav-link/vue/example_vue.md
+++ /dev/null
@@ -1,19 +0,0 @@
-```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
deleted file mode 100644
index f3635e1db37..00000000000
--- a/static/usage/nav/nav-link/vue/page_one_vue.md
+++ /dev/null
@@ -1,29 +0,0 @@
-```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
deleted file mode 100644
index 54d6acf24c9..00000000000
--- a/static/usage/nav/nav-link/vue/page_three_vue.md
+++ /dev/null
@@ -1,23 +0,0 @@
-```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
deleted file mode 100644
index 0d736d69c88..00000000000
--- a/static/usage/nav/nav-link/vue/page_two_vue.md
+++ /dev/null
@@ -1,50 +0,0 @@
-```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>
-```