From acbeb4cc2728bfab8b2001c7649bec14c1aef4c2 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Thu, 12 Nov 2026 16:36:02 -0800
Subject: [PATCH 1/5] docs(header, footer, tab-bar): document the scrollEffect
 prop

---
 docs/angular/add-to-existing.mdx              |   2 +-
 docs/angular/quickstart.mdx                   |   4 +-
 docs/angular/your-first-app.mdx               |   6 +-
 .../your-first-app/2-taking-photos.mdx        |   4 +-
 docs/angular/your-first-app/7-live-reload.mdx |   2 +-
 docs/api/buttons.mdx                          |   8 +-
 docs/api/footer.mdx                           |  12 ++-
 docs/api/header.mdx                           |  14 ++-
 docs/api/tab-bar.mdx                          |  10 ++
 docs/api/title.mdx                            |   6 --
 docs/react/add-to-existing.mdx                |   2 +-
 docs/react/quickstart.mdx                     |   4 +-
 docs/react/your-first-app.mdx                 |   6 +-
 docs/react/your-first-app/2-taking-photos.mdx |   4 +-
 docs/react/your-first-app/7-live-reload.mdx   |   2 +-
 docs/vue/add-to-existing.mdx                  |   2 +-
 docs/vue/quickstart.mdx                       |   4 +-
 docs/vue/your-first-app.mdx                   |   6 +-
 docs/vue/your-first-app/2-taking-photos.mdx   |   4 +-
 docs/vue/your-first-app/7-live-reload.mdx     |   2 +-
 .../angular/example_component_html.md         |   2 +-
 .../v10/footer/custom-scroll-target/demo.html |  12 ++-
 .../v10/footer/custom-scroll-target/index.mdx |   1 -
 .../footer/custom-scroll-target/javascript.md |   2 +-
 .../custom-scroll-target/react/main_tsx.md    |   2 +-
 .../v10/footer/custom-scroll-target/vue.md    |   2 +-
 .../fade/angular/example_component_html.md    |   2 +-
 static/usage/v10/footer/fade/demo.html        |  12 ++-
 static/usage/v10/footer/fade/index.mdx        |   1 -
 static/usage/v10/footer/fade/javascript.md    |   2 +-
 static/usage/v10/footer/fade/react.md         |   2 +-
 static/usage/v10/footer/fade/vue.md           |   2 +-
 .../hide/angular/example_component_html.md    |  67 ++++++++++++
 .../hide/angular/example_component_ts.md      |  12 +++
 static/usage/v10/footer/hide/demo.html        |  88 +++++++++++++++
 static/usage/v10/footer/hide/index.mdx        |  26 +++++
 static/usage/v10/footer/hide/javascript.md    |  67 ++++++++++++
 static/usage/v10/footer/hide/react.md         |  77 +++++++++++++
 static/usage/v10/footer/hide/vue.md           |  73 +++++++++++++
 .../angular/example_component_html.md         |   2 +-
 static/usage/v10/header/condense/demo.html    |  12 ++-
 static/usage/v10/header/condense/index.mdx    |   1 -
 .../usage/v10/header/condense/javascript.md   |   2 +-
 static/usage/v10/header/condense/react.md     |   2 +-
 static/usage/v10/header/condense/vue.md       |   2 +-
 .../angular/example_component_html.md         |   2 +-
 .../v10/header/custom-scroll-target/demo.html |  12 ++-
 .../v10/header/custom-scroll-target/index.mdx |   1 -
 .../header/custom-scroll-target/javascript.md |   2 +-
 .../custom-scroll-target/react/main_tsx.md    |   2 +-
 .../v10/header/custom-scroll-target/vue.md    |   2 +-
 .../fade/angular/example_component_html.md    |   2 +-
 static/usage/v10/header/fade/demo.html        |  12 ++-
 static/usage/v10/header/fade/index.mdx        |   1 -
 static/usage/v10/header/fade/javascript.md    |   2 +-
 static/usage/v10/header/fade/react.md         |   2 +-
 static/usage/v10/header/fade/vue.md           |   2 +-
 .../hide/angular/example_component_html.md    |  67 ++++++++++++
 .../hide/angular/example_component_ts.md      |  12 +++
 static/usage/v10/header/hide/demo.html        |  88 +++++++++++++++
 static/usage/v10/header/hide/index.mdx        |  26 +++++
 static/usage/v10/header/hide/javascript.md    |  67 ++++++++++++
 static/usage/v10/header/hide/react.md         |  77 +++++++++++++
 static/usage/v10/header/hide/vue.md           |  73 +++++++++++++
 .../hide/angular/example_component_html.md    |  81 ++++++++++++++
 .../hide/angular/example_component_ts.md      |  27 +++++
 static/usage/v10/tab-bar/hide/demo.html       | 102 ++++++++++++++++++
 static/usage/v10/tab-bar/hide/index.mdx       |  26 +++++
 static/usage/v10/tab-bar/hide/javascript.md   |  81 ++++++++++++++
 static/usage/v10/tab-bar/hide/react.md        |  92 ++++++++++++++++
 static/usage/v10/tab-bar/hide/vue.md          |  88 +++++++++++++++
 .../basic/angular/example_component_html.md   |   2 +-
 .../collapsible-large-title/basic/demo.html   |  12 ++-
 .../collapsible-large-title/basic/index.mdx   |   2 -
 .../basic/javascript.md                       |   2 +-
 .../collapsible-large-title/basic/react.md    |   2 +-
 .../collapsible-large-title/basic/vue.md      |   2 +-
 .../buttons/angular/example_component_html.md |   2 +-
 .../collapsible-large-title/buttons/demo.html |  12 ++-
 .../collapsible-large-title/buttons/index.mdx |   1 -
 .../buttons/javascript.md                     |   2 +-
 .../collapsible-large-title/buttons/react.md  |   2 +-
 .../collapsible-large-title/buttons/vue.md    |   2 +-
 .../angular/example_component_html.md         |   2 +-
 .../title/theming/css-properties/demo.html    |  12 ++-
 .../theming/css-properties/javascript.md      |   2 +-
 .../theming/css-properties/react/main_tsx.md  |   2 +-
 .../v10/title/theming/css-properties/vue.md   |   2 +-
 88 files changed, 1481 insertions(+), 108 deletions(-)
 create mode 100644 static/usage/v10/footer/hide/angular/example_component_html.md
 create mode 100644 static/usage/v10/footer/hide/angular/example_component_ts.md
 create mode 100644 static/usage/v10/footer/hide/demo.html
 create mode 100644 static/usage/v10/footer/hide/index.mdx
 create mode 100644 static/usage/v10/footer/hide/javascript.md
 create mode 100644 static/usage/v10/footer/hide/react.md
 create mode 100644 static/usage/v10/footer/hide/vue.md
 create mode 100644 static/usage/v10/header/hide/angular/example_component_html.md
 create mode 100644 static/usage/v10/header/hide/angular/example_component_ts.md
 create mode 100644 static/usage/v10/header/hide/demo.html
 create mode 100644 static/usage/v10/header/hide/index.mdx
 create mode 100644 static/usage/v10/header/hide/javascript.md
 create mode 100644 static/usage/v10/header/hide/react.md
 create mode 100644 static/usage/v10/header/hide/vue.md
 create mode 100644 static/usage/v10/tab-bar/hide/angular/example_component_html.md
 create mode 100644 static/usage/v10/tab-bar/hide/angular/example_component_ts.md
 create mode 100644 static/usage/v10/tab-bar/hide/demo.html
 create mode 100644 static/usage/v10/tab-bar/hide/index.mdx
 create mode 100644 static/usage/v10/tab-bar/hide/javascript.md
 create mode 100644 static/usage/v10/tab-bar/hide/react.md
 create mode 100644 static/usage/v10/tab-bar/hide/vue.md

diff --git a/docs/angular/add-to-existing.mdx b/docs/angular/add-to-existing.mdx
index 2ef3d723578..dbeaf8f08a9 100644
--- a/docs/angular/add-to-existing.mdx
+++ b/docs/angular/add-to-existing.mdx
@@ -230,7 +230,7 @@ Start by adding a template at `src/app/home/home.html`:
 </ion-header>
 
 <ion-content fullscreen="true">
-  <ion-header collapse="condense">
+  <ion-header scrollEffect="condense">
     <ion-toolbar>
       <ion-title size="large">Home</ion-title>
     </ion-toolbar>
diff --git a/docs/angular/quickstart.mdx b/docs/angular/quickstart.mdx
index e043b556dda..72401efcaaf 100644
--- a/docs/angular/quickstart.mdx
+++ b/docs/angular/quickstart.mdx
@@ -158,7 +158,7 @@ And the template, in the `home.page.html` file, uses those components:
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+  <ion-header scrollEffect="condense">
     <ion-toolbar>
       <ion-title size="large">Blank</ion-title>
     </ion-toolbar>
@@ -317,7 +317,7 @@ Update the `ion-content` in your `new.page.html` to include a button and some it
 
 ```html title="src/app/new/new.page.html"
 <ion-content [fullscreen]="true" #content>
-  <ion-header collapse="condense">
+  <ion-header scrollEffect="condense">
     <ion-toolbar>
       <ion-title size="large">new</ion-title>
     </ion-toolbar>
diff --git a/docs/angular/your-first-app.mdx b/docs/angular/your-first-app.mdx
index 7db2aaac485..244dafe998c 100644
--- a/docs/angular/your-first-app.mdx
+++ b/docs/angular/your-first-app.mdx
@@ -158,7 +158,7 @@ Open `/src/app/tab2/tab2.page.html`. It contains:
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+  <ion-header scrollEffect="condense">
     <ion-toolbar>
       <ion-title size="large">Tab 2</ion-title>
     </ion-toolbar>
@@ -179,7 +179,7 @@ Open `/src/app/tab2/tab2.page.html`. It contains:
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+  <ion-header scrollEffect="condense">
     <ion-toolbar>
       <!-- CHANGE: Update title -->
       <ion-title size="large">Photo Gallery</ion-title>
@@ -200,7 +200,7 @@ We put the visual aspects of our app into `<ion-content>`. In this case, it’s
 </ion-header>
 
 <ion-content>
-  <ion-header collapse="condense">
+  <ion-header scrollEffect="condense">
     <ion-toolbar>
       <ion-title size="large">Photo Gallery</ion-title>
     </ion-toolbar>
diff --git a/docs/angular/your-first-app/2-taking-photos.mdx b/docs/angular/your-first-app/2-taking-photos.mdx
index 898e2d6fc99..bc94fd4ca69 100644
--- a/docs/angular/your-first-app/2-taking-photos.mdx
+++ b/docs/angular/your-first-app/2-taking-photos.mdx
@@ -120,7 +120,7 @@ Then, open `tab2.page.html` and call the `addPhotoToGallery()` method when the F
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+  <ion-header scrollEffect="condense">
     <ion-toolbar>
       <ion-title size="large">Photo Gallery</ion-title>
     </ion-toolbar>
@@ -241,7 +241,7 @@ Next, switch to `tab2.page.html` to display the images. We'll add a [Grid compon
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+  <ion-header scrollEffect="condense">
     <ion-toolbar>
       <ion-title size="large">Photo Gallery</ion-title>
     </ion-toolbar>
diff --git a/docs/angular/your-first-app/7-live-reload.mdx b/docs/angular/your-first-app/7-live-reload.mdx
index 74dac3b0cf0..4e3becbc920 100644
--- a/docs/angular/your-first-app/7-live-reload.mdx
+++ b/docs/angular/your-first-app/7-live-reload.mdx
@@ -166,7 +166,7 @@ Open `tab2.page.html` and wrap each image in a `<button>` element with a click h
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+  <ion-header scrollEffect="condense">
     <ion-toolbar>
       <ion-title size="large">Photo Gallery</ion-title>
     </ion-toolbar>
diff --git a/docs/api/buttons.mdx b/docs/api/buttons.mdx
index 2fa0e42d5be..9e9811fe8fa 100644
--- a/docs/api/buttons.mdx
+++ b/docs/api/buttons.mdx
@@ -54,13 +54,7 @@ import Types from '@site/static/usage/v10/buttons/types/index.mdx';
 
 ## Collapsible Buttons {/* #collapsible-buttons */}
 
-The `collapse` property can be set on the buttons to collapse them when the header collapses. This is typically used with [collapsible large titles](./title#collapsible-large-titles).
-
-:::info
-
-This feature is only available for iOS.
-
-:::
+The `collapse` property can be set on the buttons to collapse them when the header collapses. This is typically used with [collapsible large titles](./title.mdx#collapsible-large-titles).
 
 {/* Reuse the playground from the Title directory */}
 import CollapsibleLargeTitleButtons from '@site/static/usage/v10/title/collapsible-large-title/buttons/index.mdx';
diff --git a/docs/api/footer.mdx b/docs/api/footer.mdx
index 5d323525e63..8f4460a240c 100644
--- a/docs/api/footer.mdx
+++ b/docs/api/footer.mdx
@@ -37,7 +37,7 @@ import Translucent from '@site/static/usage/v10/footer/translucent/index.mdx';
 
 ## Fade Footer {/* #fade-footer */}
 
-Many native iOS applications have a fade effect on the toolbar. This can be achieved by setting the `collapse` property on the footer to `"fade"`. When the content is scrolled to the end, the background and border on the footer will fade away. This effect will only apply when the mode is `"ios"`.
+Many native iOS applications have a fade effect on the toolbar. This can be achieved by setting the `scrollEffect` property on the footer to `"fade"`. When the content is scrolled to the end, the background and border on the footer will fade away.
 
 import Fade from '@site/static/usage/v10/footer/fade/index.mdx';
 
@@ -51,6 +51,16 @@ import CustomScrollTarget from '@site/static/usage/v10/footer/custom-scroll-targ
 
 <CustomScrollTarget />
 
+## Hide Footer {/* #hide-footer */}
+
+The footer can slide out of view as the content is scrolled down, giving the content more room, and slide back in as soon as the content is scrolled up. This can be achieved by setting the `scrollEffect` property on the footer to `"hide"`.
+
+When the footer contains a [tab bar](./tab-bar.mdx), set `scrollEffect` on the footer rather than the tab bar so the whole footer hides together.
+
+import Hide from '@site/static/usage/v10/footer/hide/index.mdx';
+
+<Hide />
+
 ## Borders {/* #borders */}
 
 In `"md"` mode, the footer will have a `box-shadow` on the top. In `"ios"` mode, it will receive a `border` on the top. These can be removed by adding the `.ion-no-border` class to the footer.
diff --git a/docs/api/header.mdx b/docs/api/header.mdx
index ee4f2af2d06..25cdc60fd6f 100644
--- a/docs/api/header.mdx
+++ b/docs/api/header.mdx
@@ -37,7 +37,7 @@ import Translucent from '@site/static/usage/v10/header/translucent/index.mdx';
 
 ## Condensed Header {/* #condensed-header */}
 
-Ionic provides the functionality found in native iOS applications to show a large toolbar title and then collapse it to a small title when scrolling. This can be done by adding two headers, one above the content and one inside of the content, and then setting the `collapse` property to `"condense"` on the header inside of the content. This effect will only apply when the mode is "ios".
+Ionic provides the functionality found in native iOS applications to show a large toolbar title and then collapse it to a small title when scrolling. This can be done by adding two headers, one above the content and one inside of the content, and then setting the `scrollEffect` property to `"condense"` on the header inside of the content.
 
 import Condense from '@site/static/usage/v10/header/condense/index.mdx';
 
@@ -45,9 +45,9 @@ import Condense from '@site/static/usage/v10/header/condense/index.mdx';
 
 ## Fade Header {/* #fade-header */}
 
-Many native iOS applications have a fade effect on the toolbar. This can be achieved by setting the `collapse` property on the header to `"fade"`. When the page is first loaded, the background and border on the header will be hidden. As the content is scrolled, the header will fade back in. This effect will only apply when the mode is "ios".
+Many native iOS applications have a fade effect on the toolbar. This can be achieved by setting the `scrollEffect` property on the header to `"fade"`. When the page is first loaded, the background and border on the header will be hidden. As the content is scrolled, the header will fade back in.
 
-This functionality can be combined with a [Condensed Header](#condensed-header) as well. The `collapse` property with a value set to `"fade"` should be on the header outside of the content.
+This functionality can be combined with a [Condensed Header](#condensed-header) as well. The `scrollEffect` property with a value set to `"fade"` should be on the header outside of the content.
 
 import Fade from '@site/static/usage/v10/header/fade/index.mdx';
 
@@ -61,6 +61,14 @@ import CustomScrollTarget from '@site/static/usage/v10/header/custom-scroll-targ
 
 <CustomScrollTarget />
 
+## Hide Header {/* #hide-header */}
+
+The header can slide out of view as the content is scrolled down, giving the content more room, and slide back in as soon as the content is scrolled up. This can be achieved by setting the `scrollEffect` property on the header to `"hide"`.
+
+import Hide from '@site/static/usage/v10/header/hide/index.mdx';
+
+<Hide />
+
 ## Borders {/* #borders */}
 
 In `"md"` mode, the header will have a `box-shadow` on the bottom. In `"ios"` mode, it will receive a `border` on the bottom. These can be removed by adding the `.ion-no-border` class to the header.
diff --git a/docs/api/tab-bar.mdx b/docs/api/tab-bar.mdx
index 4179cea2a01..513584fc6a1 100644
--- a/docs/api/tab-bar.mdx
+++ b/docs/api/tab-bar.mdx
@@ -150,6 +150,16 @@ import InsideTabBar from '@site/static/usage/v10/badge/inside-tab-bar/index.mdx'
 
 <InsideTabBar />
 
+## Hide Tab Bar {/* #hide-tab-bar */}
+
+The tab bar can slide out of view as the content is scrolled down, giving the content more room, and slide back in as soon as the content is scrolled up. This can be achieved by setting the `scrollEffect` property on the tab bar to `"hide"`.
+
+When the tab bar is inside a [footer](./footer.mdx), `scrollEffect` on the tab bar is ignored. Set it on the footer instead so the whole footer hides together.
+
+import Hide from '@site/static/usage/v10/tab-bar/hide/index.mdx';
+
+<Hide />
+
 ## Properties {/* #properties */}
 
 <Props />
diff --git a/docs/api/title.mdx b/docs/api/title.mdx
index c3d5077b68d..297420e0ef4 100644
--- a/docs/api/title.mdx
+++ b/docs/api/title.mdx
@@ -33,12 +33,6 @@ import Basic from '@site/static/usage/v10/title/basic/index.mdx';
 
 The large title will display when the [content](./content) is scrolled to the start of the scroll container. When the title is scrolled behind the header, the condensed title will fade in.
 
-:::info
-
-This feature is only available for iOS.
-
-:::
-
 import CollapsibleLargeTitle from '@site/static/usage/v10/title/collapsible-large-title/basic/index.mdx';
 
 <CollapsibleLargeTitle />
diff --git a/docs/react/add-to-existing.mdx b/docs/react/add-to-existing.mdx
index d74edc57776..0af2584f7ee 100644
--- a/docs/react/add-to-existing.mdx
+++ b/docs/react/add-to-existing.mdx
@@ -243,7 +243,7 @@ const Home = () => {
       </IonHeader>
 
       <IonContent fullscreen={true}>
-        <IonHeader collapse="condense">
+        <IonHeader scrollEffect="condense">
           <IonToolbar>
             <IonTitle size="large">Home</IonTitle>
           </IonToolbar>
diff --git a/docs/react/quickstart.mdx b/docs/react/quickstart.mdx
index 972203a096a..194468d86ed 100644
--- a/docs/react/quickstart.mdx
+++ b/docs/react/quickstart.mdx
@@ -136,7 +136,7 @@ const Home: React.FC = () => {
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
-        <IonHeader collapse="condense">
+        <IonHeader scrollEffect="condense">
           <IonToolbar>
             <IonTitle size="large">Blank</IonTitle>
           </IonToolbar>
@@ -205,7 +205,7 @@ const New: React.FC = () => {
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
-        <IonHeader collapse="condense">
+        <IonHeader scrollEffect="condense">
           <IonToolbar>
             <IonTitle size="large">New</IonTitle>
           </IonToolbar>
diff --git a/docs/react/your-first-app.mdx b/docs/react/your-first-app.mdx
index fa052a476d2..775b0af10fb 100644
--- a/docs/react/your-first-app.mdx
+++ b/docs/react/your-first-app.mdx
@@ -155,7 +155,7 @@ const Tab2: React.FC = () => {
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
-        <IonHeader collapse="condense">
+        <IonHeader scrollEffect="condense">
           <IonToolbar>
             <IonTitle size="large">Tab 2</IonTitle>
           </IonToolbar>
@@ -180,7 +180,7 @@ export default Tab2;
     </IonToolbar>
   </IonHeader>
   <IonContent>
-    <IonHeader collapse="condense">
+    <IonHeader scrollEffect="condense">
       <IonToolbar>
         {/* CHANGE: Update title */}
         <IonTitle size="large">Photo Gallery</IonTitle>
@@ -212,7 +212,7 @@ const Tab2: React.FC = () => {
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
-        <IonHeader collapse="condense">
+        <IonHeader scrollEffect="condense">
           <IonToolbar>
             <IonTitle size="large">Photo Gallery</IonTitle>
           </IonToolbar>
diff --git a/docs/react/your-first-app/2-taking-photos.mdx b/docs/react/your-first-app/2-taking-photos.mdx
index b65238b780b..0120608ab08 100644
--- a/docs/react/your-first-app/2-taking-photos.mdx
+++ b/docs/react/your-first-app/2-taking-photos.mdx
@@ -63,7 +63,7 @@ const Tab2: React.FC = () => {
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
-        <IonHeader collapse="condense">
+        <IonHeader scrollEffect="condense">
           <IonToolbar>
             <IonTitle size="large">Photo Gallery</IonTitle>
           </IonToolbar>
@@ -233,7 +233,7 @@ const Tab2: React.FC = () => {
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
-        <IonHeader collapse="condense">
+        <IonHeader scrollEffect="condense">
           <IonToolbar>
             <IonTitle size="large">Photo Gallery</IonTitle>
           </IonToolbar>
diff --git a/docs/react/your-first-app/7-live-reload.mdx b/docs/react/your-first-app/7-live-reload.mdx
index f93cf02adb3..29381ae0d47 100644
--- a/docs/react/your-first-app/7-live-reload.mdx
+++ b/docs/react/your-first-app/7-live-reload.mdx
@@ -122,7 +122,7 @@ const Tab2: React.FC = () => {
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
-        <IonHeader collapse="condense">
+        <IonHeader scrollEffect="condense">
           <IonToolbar>
             <IonTitle size="large">Photo Gallery</IonTitle>
           </IonToolbar>
diff --git a/docs/vue/add-to-existing.mdx b/docs/vue/add-to-existing.mdx
index 863fdd2358b..2adc19f3c05 100644
--- a/docs/vue/add-to-existing.mdx
+++ b/docs/vue/add-to-existing.mdx
@@ -194,7 +194,7 @@ Create a new file at `src/views/HomePage.vue` with the following:
     </ion-header>
 
     <ion-content :fullscreen="true">
-      <ion-header collapse="condense">
+      <ion-header scroll-effect="condense">
         <ion-toolbar>
           <ion-title size="large">Home</ion-title>
         </ion-toolbar>
diff --git a/docs/vue/quickstart.mdx b/docs/vue/quickstart.mdx
index 9be48c4edb8..6e52dc20e99 100644
--- a/docs/vue/quickstart.mdx
+++ b/docs/vue/quickstart.mdx
@@ -136,7 +136,7 @@ The Home page component, defined in `HomePage.vue`, imports the Ionic components
     </ion-header>
 
     <ion-content :fullscreen="true">
-      <ion-header collapse="condense">
+      <ion-header scroll-effect="condense">
         <ion-toolbar>
           <ion-title size="large">Blank</ion-title>
         </ion-toolbar>
@@ -207,7 +207,7 @@ Create a new page at `NewPage.vue`:
     </ion-header>
 
     <ion-content :fullscreen="true">
-      <ion-header collapse="condense">
+      <ion-header scroll-effect="condense">
         <ion-toolbar>
           <ion-title size="large">New</ion-title>
         </ion-toolbar>
diff --git a/docs/vue/your-first-app.mdx b/docs/vue/your-first-app.mdx
index 9bccc512350..5660e519054 100644
--- a/docs/vue/your-first-app.mdx
+++ b/docs/vue/your-first-app.mdx
@@ -155,7 +155,7 @@ Open `/src/views/Tab2Page.vue`. It contains:
       </ion-toolbar>
     </ion-header>
     <ion-content :fullscreen="true">
-      <ion-header collapse="condense">
+      <ion-header scroll-effect="condense">
         <ion-toolbar>
           <ion-title size="large">Tab 2</ion-title>
         </ion-toolbar>
@@ -184,7 +184,7 @@ import ExploreContainer from '@/components/ExploreContainer.vue';
       </ion-toolbar>
     </ion-header>
     <ion-content :fullscreen="true">
-      <ion-header collapse="condense">
+      <ion-header scroll-effect="condense">
         <ion-toolbar>
           <!-- CHANGE: Update title -->
           <ion-title size="large">Photo Gallery</ion-title>
@@ -208,7 +208,7 @@ We put the visual aspects of our app into `<ion-content>`. In this case, it’s
       </ion-toolbar>
     </ion-header>
     <ion-content :fullscreen="true">
-      <ion-header collapse="condense">
+      <ion-header scroll-effect="condense">
         <ion-toolbar>
           <ion-title size="large">Photo Gallery</ion-title>
         </ion-toolbar>
diff --git a/docs/vue/your-first-app/2-taking-photos.mdx b/docs/vue/your-first-app/2-taking-photos.mdx
index 4aafcf8da82..41ec2ea9fb8 100644
--- a/docs/vue/your-first-app/2-taking-photos.mdx
+++ b/docs/vue/your-first-app/2-taking-photos.mdx
@@ -53,7 +53,7 @@ Next, in `Tab2Page.vue`, import the `usePhotoGallery()` method and destructure i
       </ion-toolbar>
     </ion-header>
     <ion-content :fullscreen="true">
-      <ion-header collapse="condense">
+      <ion-header scroll-effect="condense">
         <ion-toolbar>
           <ion-title size="large">Photo Gallery</ion-title>
         </ion-toolbar>
@@ -203,7 +203,7 @@ Next, switch to `Tab2Page.vue` to display the images. We'll add a [Grid componen
       </ion-toolbar>
     </ion-header>
     <ion-content :fullscreen="true">
-      <ion-header collapse="condense">
+      <ion-header scroll-effect="condense">
         <ion-toolbar>
           <ion-title size="large">Photo Gallery</ion-title>
         </ion-toolbar>
diff --git a/docs/vue/your-first-app/7-live-reload.mdx b/docs/vue/your-first-app/7-live-reload.mdx
index 214a6735b2f..4a5f2069a36 100644
--- a/docs/vue/your-first-app/7-live-reload.mdx
+++ b/docs/vue/your-first-app/7-live-reload.mdx
@@ -146,7 +146,7 @@ Wrap each image in a `<button>` element with a click handler. When the app user
       </ion-toolbar>
     </ion-header>
     <ion-content :fullscreen="true">
-      <ion-header collapse="condense">
+      <ion-header scroll-effect="condense">
         <ion-toolbar>
           <ion-title size="large">Photo Gallery</ion-title>
         </ion-toolbar>
diff --git a/static/usage/v10/footer/custom-scroll-target/angular/example_component_html.md b/static/usage/v10/footer/custom-scroll-target/angular/example_component_html.md
index a0429f5e23b..96bd30313be 100644
--- a/static/usage/v10/footer/custom-scroll-target/angular/example_component_html.md
+++ b/static/usage/v10/footer/custom-scroll-target/angular/example_component_html.md
@@ -61,7 +61,7 @@
     </p>
   </div>
 </ion-content>
-<ion-footer collapse="fade">
+<ion-footer scrollEffect="fade">
   <ion-toolbar>
     <ion-title>Footer</ion-title>
   </ion-toolbar>
diff --git a/static/usage/v10/footer/custom-scroll-target/demo.html b/static/usage/v10/footer/custom-scroll-target/demo.html
index 36ebba2f55a..ca48981ded5 100644
--- a/static/usage/v10/footer/custom-scroll-target/demo.html
+++ b/static/usage/v10/footer/custom-scroll-target/demo.html
@@ -6,8 +6,14 @@
     <title>Footer</title>
     <link rel="stylesheet" href="../../common.css" />
     <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@9/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@9/css/ionic.bundle.css" />
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/dist/ionic/ionic.esm.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/css/ionic.bundle.css"
+    />
 
     <style>
       .ion-content-scroll-host {
@@ -88,7 +94,7 @@ <h2>Dolphin</h2>
           </p>
         </div>
       </ion-content>
-      <ion-footer collapse="fade">
+      <ion-footer scroll-effect="fade">
         <ion-toolbar>
           <ion-title>Footer</ion-title>
         </ion-toolbar>
diff --git a/static/usage/v10/footer/custom-scroll-target/index.mdx b/static/usage/v10/footer/custom-scroll-target/index.mdx
index bc6d592bede..108401e553d 100644
--- a/static/usage/v10/footer/custom-scroll-target/index.mdx
+++ b/static/usage/v10/footer/custom-scroll-target/index.mdx
@@ -33,5 +33,4 @@ import angular_example_component_ts from './angular/example_component_ts.md';
   src="usage/v10/footer/custom-scroll-target/demo.html"
   devicePreview
   includeIonContent={false}
-  mode="ios"
 />
diff --git a/static/usage/v10/footer/custom-scroll-target/javascript.md b/static/usage/v10/footer/custom-scroll-target/javascript.md
index 411ccb1df59..8c7ed995fc4 100644
--- a/static/usage/v10/footer/custom-scroll-target/javascript.md
+++ b/static/usage/v10/footer/custom-scroll-target/javascript.md
@@ -61,7 +61,7 @@
     </p>
   </div>
 </ion-content>
-<ion-footer collapse="fade">
+<ion-footer scroll-effect="fade">
   <ion-toolbar>
     <ion-title>Footer</ion-title>
   </ion-toolbar>
diff --git a/static/usage/v10/footer/custom-scroll-target/react/main_tsx.md b/static/usage/v10/footer/custom-scroll-target/react/main_tsx.md
index 9066d4c4a91..8aeb082698a 100644
--- a/static/usage/v10/footer/custom-scroll-target/react/main_tsx.md
+++ b/static/usage/v10/footer/custom-scroll-target/react/main_tsx.md
@@ -71,7 +71,7 @@ function Example() {
           </p>
         </div>
       </IonContent>
-      <IonFooter collapse="fade">
+      <IonFooter scrollEffect="fade">
         <IonToolbar>
           <IonTitle>Footer</IonTitle>
         </IonToolbar>
diff --git a/static/usage/v10/footer/custom-scroll-target/vue.md b/static/usage/v10/footer/custom-scroll-target/vue.md
index 9aa360476fd..89b977652d9 100644
--- a/static/usage/v10/footer/custom-scroll-target/vue.md
+++ b/static/usage/v10/footer/custom-scroll-target/vue.md
@@ -62,7 +62,7 @@
       </p>
     </div>
   </ion-content>
-  <ion-footer collapse="fade">
+  <ion-footer scroll-effect="fade">
     <ion-toolbar>
       <ion-title>Footer</ion-title>
     </ion-toolbar>
diff --git a/static/usage/v10/footer/fade/angular/example_component_html.md b/static/usage/v10/footer/fade/angular/example_component_html.md
index f600e4511df..dd32ad91581 100644
--- a/static/usage/v10/footer/fade/angular/example_component_html.md
+++ b/static/usage/v10/footer/fade/angular/example_component_html.md
@@ -59,7 +59,7 @@
     pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
   </p>
 </ion-content>
-<ion-footer collapse="fade">
+<ion-footer scrollEffect="fade">
   <ion-toolbar>
     <ion-title>Footer</ion-title>
   </ion-toolbar>
diff --git a/static/usage/v10/footer/fade/demo.html b/static/usage/v10/footer/fade/demo.html
index bedede48322..03b704d6ff9 100644
--- a/static/usage/v10/footer/fade/demo.html
+++ b/static/usage/v10/footer/fade/demo.html
@@ -6,8 +6,14 @@
     <title>Footer</title>
     <link rel="stylesheet" href="../../common.css" />
     <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@9/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@9/css/ionic.bundle.css" />
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/dist/ionic/ionic.esm.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/css/ionic.bundle.css"
+    />
   </head>
 
   <body>
@@ -72,7 +78,7 @@ <h2>Dolphin</h2>
           opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
         </p>
       </ion-content>
-      <ion-footer collapse="fade">
+      <ion-footer scroll-effect="fade">
         <ion-toolbar>
           <ion-title>Footer</ion-title>
         </ion-toolbar>
diff --git a/static/usage/v10/footer/fade/index.mdx b/static/usage/v10/footer/fade/index.mdx
index 6370fc9280e..c9aa34d16ad 100644
--- a/static/usage/v10/footer/fade/index.mdx
+++ b/static/usage/v10/footer/fade/index.mdx
@@ -23,5 +23,4 @@ import angular_example_component_ts from './angular/example_component_ts.md';
   src="usage/v10/footer/fade/demo.html"
   devicePreview
   includeIonContent={false}
-  mode="ios"
 />
diff --git a/static/usage/v10/footer/fade/javascript.md b/static/usage/v10/footer/fade/javascript.md
index f600e4511df..f044aa86529 100644
--- a/static/usage/v10/footer/fade/javascript.md
+++ b/static/usage/v10/footer/fade/javascript.md
@@ -59,7 +59,7 @@
     pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
   </p>
 </ion-content>
-<ion-footer collapse="fade">
+<ion-footer scroll-effect="fade">
   <ion-toolbar>
     <ion-title>Footer</ion-title>
   </ion-toolbar>
diff --git a/static/usage/v10/footer/fade/react.md b/static/usage/v10/footer/fade/react.md
index d7142f57ecd..156a8003175 100644
--- a/static/usage/v10/footer/fade/react.md
+++ b/static/usage/v10/footer/fade/react.md
@@ -65,7 +65,7 @@ function Example() {
           opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
         </p>
       </IonContent>
-      <IonFooter collapse="fade">
+      <IonFooter scrollEffect="fade">
         <IonToolbar>
           <IonTitle>Footer</IonTitle>
         </IonToolbar>
diff --git a/static/usage/v10/footer/fade/vue.md b/static/usage/v10/footer/fade/vue.md
index b08b461fb2e..b2253b12e63 100644
--- a/static/usage/v10/footer/fade/vue.md
+++ b/static/usage/v10/footer/fade/vue.md
@@ -60,7 +60,7 @@
       reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
     </p>
   </ion-content>
-  <ion-footer collapse="fade">
+  <ion-footer scroll-effect="fade">
     <ion-toolbar>
       <ion-title>Footer</ion-title>
     </ion-toolbar>
diff --git a/static/usage/v10/footer/hide/angular/example_component_html.md b/static/usage/v10/footer/hide/angular/example_component_html.md
new file mode 100644
index 00000000000..b19cf726c64
--- /dev/null
+++ b/static/usage/v10/footer/hide/angular/example_component_html.md
@@ -0,0 +1,67 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Animal Facts</h1>
+
+  <h2>Rhinoceros</h2>
+  <img
+    alt="rhino standing near grass"
+    src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+  />
+  <p>
+    The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+    Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+    species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while
+    the Javan rhino and one-horned rhino have one horn.
+  </p>
+
+  <h2>Sea Turtle</h2>
+  <img
+    alt="brown sea turtle in water"
+    src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
+  />
+  <p>
+    Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles,
+    sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for
+    swimming, so they are vulnerable while on land.
+  </p>
+
+  <h2>Giraffe</h2>
+  <img
+    alt="giraffe sticking its tongue out"
+    src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80"
+  />
+  <p>
+    Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+    spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+    giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+  </p>
+
+  <h2>Elephant</h2>
+  <img
+    alt="two grey elephants on grass plains during sunset"
+    src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80"
+  />
+  <p>
+    Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+    trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+    water for drinking or bathing.
+  </p>
+
+  <h2>Dolphin</h2>
+  <img
+    alt="black and white dolphin in water"
+    src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+  />
+  <p>
+    Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue,
+    and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth
+    and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a
+    pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+  </p>
+</ion-content>
+<ion-footer scrollEffect="hide">
+  <ion-toolbar>
+    <ion-title>Footer</ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v10/footer/hide/angular/example_component_ts.md b/static/usage/v10/footer/hide/angular/example_component_ts.md
new file mode 100644
index 00000000000..7198fd986ce
--- /dev/null
+++ b/static/usage/v10/footer/hide/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonFooter, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v10/footer/hide/demo.html b/static/usage/v10/footer/hide/demo.html
new file mode 100644
index 00000000000..a049dbbfae0
--- /dev/null
+++ b/static/usage/v10/footer/hide/demo.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Footer</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/dist/ionic/ionic.esm.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/css/ionic.bundle.css"
+    />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content class="ion-padding">
+        <h1>Animal Facts</h1>
+
+        <h2>Rhinoceros</h2>
+        <img
+          alt="rhino standing near grass"
+          src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+        />
+        <p>
+          The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+          the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+          the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+          horns, while the Javan rhino and one-horned rhino have one horn.
+        </p>
+
+        <h2>Sea Turtle</h2>
+        <img
+          alt="brown sea turtle in water"
+          src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
+        />
+        <p>
+          Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+          turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+          adapted for swimming, so they are vulnerable while on land.
+        </p>
+
+        <h2>Giraffe</h2>
+        <img
+          alt="giraffe sticking its tongue out"
+          src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80"
+        />
+        <p>
+          Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+          a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+          called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+        </p>
+
+        <h2>Elephant</h2>
+        <img
+          alt="two grey elephants on grass plains during sunset"
+          src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80"
+        />
+        <p>
+          Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+          long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+          suck up water for drinking or bathing.
+        </p>
+
+        <h2>Dolphin</h2>
+        <img
+          alt="black and white dolphin in water"
+          src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+        />
+        <p>
+          Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+          blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+          100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that
+          opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+        </p>
+      </ion-content>
+      <ion-footer scroll-effect="hide">
+        <ion-toolbar>
+          <ion-title>Footer</ion-title>
+        </ion-toolbar>
+      </ion-footer>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v10/footer/hide/index.mdx b/static/usage/v10/footer/hide/index.mdx
new file mode 100644
index 00000000000..0aba6b84ed8
--- /dev/null
+++ b/static/usage/v10/footer/hide/index.mdx
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="10"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v10/footer/hide/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v10/footer/hide/javascript.md b/static/usage/v10/footer/hide/javascript.md
new file mode 100644
index 00000000000..0d8db53dc67
--- /dev/null
+++ b/static/usage/v10/footer/hide/javascript.md
@@ -0,0 +1,67 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Animal Facts</h1>
+
+  <h2>Rhinoceros</h2>
+  <img
+    alt="rhino standing near grass"
+    src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+  />
+  <p>
+    The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+    Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+    species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while
+    the Javan rhino and one-horned rhino have one horn.
+  </p>
+
+  <h2>Sea Turtle</h2>
+  <img
+    alt="brown sea turtle in water"
+    src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
+  />
+  <p>
+    Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles,
+    sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for
+    swimming, so they are vulnerable while on land.
+  </p>
+
+  <h2>Giraffe</h2>
+  <img
+    alt="giraffe sticking its tongue out"
+    src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80"
+  />
+  <p>
+    Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+    spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+    giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+  </p>
+
+  <h2>Elephant</h2>
+  <img
+    alt="two grey elephants on grass plains during sunset"
+    src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80"
+  />
+  <p>
+    Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+    trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+    water for drinking or bathing.
+  </p>
+
+  <h2>Dolphin</h2>
+  <img
+    alt="black and white dolphin in water"
+    src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+  />
+  <p>
+    Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue,
+    and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth
+    and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a
+    pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+  </p>
+</ion-content>
+<ion-footer scroll-effect="hide">
+  <ion-toolbar>
+    <ion-title>Footer</ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/v10/footer/hide/react.md b/static/usage/v10/footer/hide/react.md
new file mode 100644
index 00000000000..b52b554642b
--- /dev/null
+++ b/static/usage/v10/footer/hide/react.md
@@ -0,0 +1,77 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonContent className="ion-padding">
+        <h1>Animal Facts</h1>
+
+        <h2>Rhinoceros</h2>
+        <img
+          alt="rhino standing near grass"
+          src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+        />
+        <p>
+          The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+          the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+          the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+          horns, while the Javan rhino and one-horned rhino have one horn.
+        </p>
+
+        <h2>Sea Turtle</h2>
+        <img
+          alt="brown sea turtle in water"
+          src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
+        />
+        <p>
+          Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+          turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+          adapted for swimming, so they are vulnerable while on land.
+        </p>
+
+        <h2>Giraffe</h2>
+        <img
+          alt="giraffe sticking its tongue out"
+          src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80"
+        />
+        <p>
+          Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+          a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+          called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+        </p>
+
+        <h2>Elephant</h2>
+        <img
+          alt="two grey elephants on grass plains during sunset"
+          src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80"
+        />
+        <p>
+          Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+          long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+          suck up water for drinking or bathing.
+        </p>
+
+        <h2>Dolphin</h2>
+        <img
+          alt="black and white dolphin in water"
+          src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+        />
+        <p>
+          Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+          blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+          100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that
+          opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+        </p>
+      </IonContent>
+      <IonFooter scrollEffect="hide">
+        <IonToolbar>
+          <IonTitle>Footer</IonTitle>
+        </IonToolbar>
+      </IonFooter>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v10/footer/hide/vue.md b/static/usage/v10/footer/hide/vue.md
new file mode 100644
index 00000000000..8bdb470a3a6
--- /dev/null
+++ b/static/usage/v10/footer/hide/vue.md
@@ -0,0 +1,73 @@
+```html
+<template>
+  <ion-content class="ion-padding">
+    <h1>Animal Facts</h1>
+
+    <h2>Rhinoceros</h2>
+    <img
+      alt="rhino standing near grass"
+      src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+    />
+    <p>
+      The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+      Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+      species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns,
+      while the Javan rhino and one-horned rhino have one horn.
+    </p>
+
+    <h2>Sea Turtle</h2>
+    <img
+      alt="brown sea turtle in water"
+      src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
+    />
+    <p>
+      Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+      turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+      adapted for swimming, so they are vulnerable while on land.
+    </p>
+
+    <h2>Giraffe</h2>
+    <img
+      alt="giraffe sticking its tongue out"
+      src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80"
+    />
+    <p>
+      Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+      spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+      giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+    </p>
+
+    <h2>Elephant</h2>
+    <img
+      alt="two grey elephants on grass plains during sunset"
+      src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80"
+    />
+    <p>
+      Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+      trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+      water for drinking or bathing.
+    </p>
+
+    <h2>Dolphin</h2>
+    <img
+      alt="black and white dolphin in water"
+      src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+    />
+    <p>
+      Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+      blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100
+      teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to
+      reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+    </p>
+  </ion-content>
+  <ion-footer scroll-effect="hide">
+    <ion-toolbar>
+      <ion-title>Footer</ion-title>
+    </ion-toolbar>
+  </ion-footer>
+</template>
+
+<script setup lang="ts">
+  import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
+</script>
+```
diff --git a/static/usage/v10/header/condense/angular/example_component_html.md b/static/usage/v10/header/condense/angular/example_component_html.md
index 1741b1f1706..2c6b7a5bcb5 100644
--- a/static/usage/v10/header/condense/angular/example_component_html.md
+++ b/static/usage/v10/header/condense/angular/example_component_html.md
@@ -5,7 +5,7 @@
   </ion-toolbar>
 </ion-header>
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+  <ion-header scrollEffect="condense">
     <ion-toolbar>
       <ion-title size="large">Header</ion-title>
     </ion-toolbar>
diff --git a/static/usage/v10/header/condense/demo.html b/static/usage/v10/header/condense/demo.html
index 57418c058ee..648d4259208 100644
--- a/static/usage/v10/header/condense/demo.html
+++ b/static/usage/v10/header/condense/demo.html
@@ -6,8 +6,14 @@
     <title>Header</title>
     <link rel="stylesheet" href="../../common.css" />
     <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@9/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@9/css/ionic.bundle.css" />
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/dist/ionic/ionic.esm.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/css/ionic.bundle.css"
+    />
   </head>
 
   <body>
@@ -18,7 +24,7 @@
         </ion-toolbar>
       </ion-header>
       <ion-content fullscreen="true">
-        <ion-header collapse="condense">
+        <ion-header scroll-effect="condense">
           <ion-toolbar>
             <ion-title size="large">Header</ion-title>
           </ion-toolbar>
diff --git a/static/usage/v10/header/condense/index.mdx b/static/usage/v10/header/condense/index.mdx
index 1cd36150fd7..f361a4e5bbf 100644
--- a/static/usage/v10/header/condense/index.mdx
+++ b/static/usage/v10/header/condense/index.mdx
@@ -23,5 +23,4 @@ import angular_example_component_ts from './angular/example_component_ts.md';
   src="usage/v10/header/condense/demo.html"
   devicePreview
   includeIonContent={false}
-  mode="ios"
 />
diff --git a/static/usage/v10/header/condense/javascript.md b/static/usage/v10/header/condense/javascript.md
index f2e2a1d53cc..116bf91e989 100644
--- a/static/usage/v10/header/condense/javascript.md
+++ b/static/usage/v10/header/condense/javascript.md
@@ -5,7 +5,7 @@
   </ion-toolbar>
 </ion-header>
 <ion-content fullscreen="true">
-  <ion-header collapse="condense">
+  <ion-header scroll-effect="condense">
     <ion-toolbar>
       <ion-title size="large">Header</ion-title>
     </ion-toolbar>
diff --git a/static/usage/v10/header/condense/react.md b/static/usage/v10/header/condense/react.md
index 6dc06c54cff..bd26bc59965 100644
--- a/static/usage/v10/header/condense/react.md
+++ b/static/usage/v10/header/condense/react.md
@@ -11,7 +11,7 @@ function Example() {
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen={true}>
-        <IonHeader collapse="condense">
+        <IonHeader scrollEffect="condense">
           <IonToolbar>
             <IonTitle size="large">Header</IonTitle>
           </IonToolbar>
diff --git a/static/usage/v10/header/condense/vue.md b/static/usage/v10/header/condense/vue.md
index bd860dda6cf..dcab46023c4 100644
--- a/static/usage/v10/header/condense/vue.md
+++ b/static/usage/v10/header/condense/vue.md
@@ -6,7 +6,7 @@
     </ion-toolbar>
   </ion-header>
   <ion-content :fullscreen="true">
-    <ion-header collapse="condense">
+    <ion-header scroll-effect="condense">
       <ion-toolbar>
         <ion-title size="large">Header</ion-title>
       </ion-toolbar>
diff --git a/static/usage/v10/header/custom-scroll-target/angular/example_component_html.md b/static/usage/v10/header/custom-scroll-target/angular/example_component_html.md
index 742d531cb9d..ca6157544e1 100644
--- a/static/usage/v10/header/custom-scroll-target/angular/example_component_html.md
+++ b/static/usage/v10/header/custom-scroll-target/angular/example_component_html.md
@@ -1,5 +1,5 @@
 ```html
-<ion-header collapse="fade">
+<ion-header scrollEffect="fade">
   <ion-toolbar>
     <ion-title>Header</ion-title>
   </ion-toolbar>
diff --git a/static/usage/v10/header/custom-scroll-target/demo.html b/static/usage/v10/header/custom-scroll-target/demo.html
index 582df7ee8a2..caf8da0cbdc 100644
--- a/static/usage/v10/header/custom-scroll-target/demo.html
+++ b/static/usage/v10/header/custom-scroll-target/demo.html
@@ -6,8 +6,14 @@
     <title>Header</title>
     <link rel="stylesheet" href="../../common.css" />
     <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@9/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@9/css/ionic.bundle.css" />
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/dist/ionic/ionic.esm.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/css/ionic.bundle.css"
+    />
 
     <style>
       .ion-content-scroll-host {
@@ -24,7 +30,7 @@
 
   <body>
     <ion-app>
-      <ion-header collapse="fade">
+      <ion-header scroll-effect="fade">
         <ion-toolbar>
           <ion-title>Header</ion-title>
         </ion-toolbar>
diff --git a/static/usage/v10/header/custom-scroll-target/index.mdx b/static/usage/v10/header/custom-scroll-target/index.mdx
index c39fe95cd6b..94ab7104f34 100644
--- a/static/usage/v10/header/custom-scroll-target/index.mdx
+++ b/static/usage/v10/header/custom-scroll-target/index.mdx
@@ -33,5 +33,4 @@ import angular_example_component_ts from './angular/example_component_ts.md';
   src="usage/v10/header/custom-scroll-target/demo.html"
   devicePreview
   includeIonContent={false}
-  mode="ios"
 />
diff --git a/static/usage/v10/header/custom-scroll-target/javascript.md b/static/usage/v10/header/custom-scroll-target/javascript.md
index 64077515677..8f037bb39e8 100644
--- a/static/usage/v10/header/custom-scroll-target/javascript.md
+++ b/static/usage/v10/header/custom-scroll-target/javascript.md
@@ -1,5 +1,5 @@
 ```html
-<ion-header collapse="fade">
+<ion-header scroll-effect="fade">
   <ion-toolbar>
     <ion-title>Header</ion-title>
   </ion-toolbar>
diff --git a/static/usage/v10/header/custom-scroll-target/react/main_tsx.md b/static/usage/v10/header/custom-scroll-target/react/main_tsx.md
index 923ea715aa7..2bee6d2424b 100644
--- a/static/usage/v10/header/custom-scroll-target/react/main_tsx.md
+++ b/static/usage/v10/header/custom-scroll-target/react/main_tsx.md
@@ -7,7 +7,7 @@ import './main.css';
 function Example() {
   return (
     <>
-      <IonHeader collapse="fade">
+      <IonHeader scrollEffect="fade">
         <IonToolbar>
           <IonTitle>Header</IonTitle>
         </IonToolbar>
diff --git a/static/usage/v10/header/custom-scroll-target/vue.md b/static/usage/v10/header/custom-scroll-target/vue.md
index 1129415b233..ae6f0b9bf92 100644
--- a/static/usage/v10/header/custom-scroll-target/vue.md
+++ b/static/usage/v10/header/custom-scroll-target/vue.md
@@ -1,6 +1,6 @@
 ```html
 <template>
-  <ion-header collapse="fade">
+  <ion-header scroll-effect="fade">
     <ion-toolbar>
       <ion-title>Header</ion-title>
     </ion-toolbar>
diff --git a/static/usage/v10/header/fade/angular/example_component_html.md b/static/usage/v10/header/fade/angular/example_component_html.md
index 473ad54c8da..6f518599afd 100644
--- a/static/usage/v10/header/fade/angular/example_component_html.md
+++ b/static/usage/v10/header/fade/angular/example_component_html.md
@@ -1,5 +1,5 @@
 ```html
-<ion-header collapse="fade">
+<ion-header scrollEffect="fade">
   <ion-toolbar>
     <ion-title>Header</ion-title>
   </ion-toolbar>
diff --git a/static/usage/v10/header/fade/demo.html b/static/usage/v10/header/fade/demo.html
index 302975d8b10..8e82c0f292c 100644
--- a/static/usage/v10/header/fade/demo.html
+++ b/static/usage/v10/header/fade/demo.html
@@ -6,13 +6,19 @@
     <title>Header</title>
     <link rel="stylesheet" href="../../common.css" />
     <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@9/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@9/css/ionic.bundle.css" />
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/dist/ionic/ionic.esm.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/css/ionic.bundle.css"
+    />
   </head>
 
   <body>
     <ion-app>
-      <ion-header collapse="fade">
+      <ion-header scroll-effect="fade">
         <ion-toolbar>
           <ion-title>Header</ion-title>
         </ion-toolbar>
diff --git a/static/usage/v10/header/fade/index.mdx b/static/usage/v10/header/fade/index.mdx
index 159426e3b13..dd58a494f57 100644
--- a/static/usage/v10/header/fade/index.mdx
+++ b/static/usage/v10/header/fade/index.mdx
@@ -23,5 +23,4 @@ import angular_example_component_ts from './angular/example_component_ts.md';
   src="usage/v10/header/fade/demo.html"
   devicePreview
   includeIonContent={false}
-  mode="ios"
 />
diff --git a/static/usage/v10/header/fade/javascript.md b/static/usage/v10/header/fade/javascript.md
index 473ad54c8da..30ec535d64f 100644
--- a/static/usage/v10/header/fade/javascript.md
+++ b/static/usage/v10/header/fade/javascript.md
@@ -1,5 +1,5 @@
 ```html
-<ion-header collapse="fade">
+<ion-header scroll-effect="fade">
   <ion-toolbar>
     <ion-title>Header</ion-title>
   </ion-toolbar>
diff --git a/static/usage/v10/header/fade/react.md b/static/usage/v10/header/fade/react.md
index 085bea0296d..34381e264f9 100644
--- a/static/usage/v10/header/fade/react.md
+++ b/static/usage/v10/header/fade/react.md
@@ -5,7 +5,7 @@ import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
 function Example() {
   return (
     <>
-      <IonHeader collapse="fade">
+      <IonHeader scrollEffect="fade">
         <IonToolbar>
           <IonTitle>Header</IonTitle>
         </IonToolbar>
diff --git a/static/usage/v10/header/fade/vue.md b/static/usage/v10/header/fade/vue.md
index e18de2b186b..c99c258a5be 100644
--- a/static/usage/v10/header/fade/vue.md
+++ b/static/usage/v10/header/fade/vue.md
@@ -1,6 +1,6 @@
 ```html
 <template>
-  <ion-header collapse="fade">
+  <ion-header scroll-effect="fade">
     <ion-toolbar>
       <ion-title>Header</ion-title>
     </ion-toolbar>
diff --git a/static/usage/v10/header/hide/angular/example_component_html.md b/static/usage/v10/header/hide/angular/example_component_html.md
new file mode 100644
index 00000000000..4598f423aaa
--- /dev/null
+++ b/static/usage/v10/header/hide/angular/example_component_html.md
@@ -0,0 +1,67 @@
+```html
+<ion-header scrollEffect="hide">
+  <ion-toolbar>
+    <ion-title>Header</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <h1>Animal Facts</h1>
+
+  <h2>Rhinoceros</h2>
+  <img
+    alt="rhino standing near grass"
+    src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+  />
+  <p>
+    The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+    Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+    species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while
+    the Javan rhino and one-horned rhino have one horn.
+  </p>
+
+  <h2>Sea Turtle</h2>
+  <img
+    alt="brown sea turtle in water"
+    src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
+  />
+  <p>
+    Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles,
+    sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for
+    swimming, so they are vulnerable while on land.
+  </p>
+
+  <h2>Giraffe</h2>
+  <img
+    alt="giraffe sticking its tongue out"
+    src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80"
+  />
+  <p>
+    Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+    spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+    giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+  </p>
+
+  <h2>Elephant</h2>
+  <img
+    alt="two grey elephants on grass plains during sunset"
+    src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80"
+  />
+  <p>
+    Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+    trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+    water for drinking or bathing.
+  </p>
+
+  <h2>Dolphin</h2>
+  <img
+    alt="black and white dolphin in water"
+    src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+  />
+  <p>
+    Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue,
+    and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth
+    and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a
+    pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+  </p>
+</ion-content>
+```
diff --git a/static/usage/v10/header/hide/angular/example_component_ts.md b/static/usage/v10/header/hide/angular/example_component_ts.md
new file mode 100644
index 00000000000..afba56786aa
--- /dev/null
+++ b/static/usage/v10/header/hide/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v10/header/hide/demo.html b/static/usage/v10/header/hide/demo.html
new file mode 100644
index 00000000000..406a40db7cd
--- /dev/null
+++ b/static/usage/v10/header/hide/demo.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Header</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/dist/ionic/ionic.esm.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/css/ionic.bundle.css"
+    />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header scroll-effect="hide">
+        <ion-toolbar>
+          <ion-title>Header</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <h1>Animal Facts</h1>
+
+        <h2>Rhinoceros</h2>
+        <img
+          alt="rhino standing near grass"
+          src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+        />
+        <p>
+          The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+          the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+          the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+          horns, while the Javan rhino and one-horned rhino have one horn.
+        </p>
+
+        <h2>Sea Turtle</h2>
+        <img
+          alt="brown sea turtle in water"
+          src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
+        />
+        <p>
+          Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+          turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+          adapted for swimming, so they are vulnerable while on land.
+        </p>
+
+        <h2>Giraffe</h2>
+        <img
+          alt="giraffe sticking its tongue out"
+          src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80"
+        />
+        <p>
+          Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+          a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+          called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+        </p>
+
+        <h2>Elephant</h2>
+        <img
+          alt="two grey elephants on grass plains during sunset"
+          src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80"
+        />
+        <p>
+          Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+          long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+          suck up water for drinking or bathing.
+        </p>
+
+        <h2>Dolphin</h2>
+        <img
+          alt="black and white dolphin in water"
+          src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+        />
+        <p>
+          Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+          blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+          100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that
+          opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+        </p>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v10/header/hide/index.mdx b/static/usage/v10/header/hide/index.mdx
new file mode 100644
index 00000000000..cd4f5cfb704
--- /dev/null
+++ b/static/usage/v10/header/hide/index.mdx
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="10"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v10/header/hide/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v10/header/hide/javascript.md b/static/usage/v10/header/hide/javascript.md
new file mode 100644
index 00000000000..167db2e76c9
--- /dev/null
+++ b/static/usage/v10/header/hide/javascript.md
@@ -0,0 +1,67 @@
+```html
+<ion-header scroll-effect="hide">
+  <ion-toolbar>
+    <ion-title>Header</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <h1>Animal Facts</h1>
+
+  <h2>Rhinoceros</h2>
+  <img
+    alt="rhino standing near grass"
+    src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+  />
+  <p>
+    The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+    Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+    species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while
+    the Javan rhino and one-horned rhino have one horn.
+  </p>
+
+  <h2>Sea Turtle</h2>
+  <img
+    alt="brown sea turtle in water"
+    src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
+  />
+  <p>
+    Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles,
+    sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for
+    swimming, so they are vulnerable while on land.
+  </p>
+
+  <h2>Giraffe</h2>
+  <img
+    alt="giraffe sticking its tongue out"
+    src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80"
+  />
+  <p>
+    Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+    spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+    giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+  </p>
+
+  <h2>Elephant</h2>
+  <img
+    alt="two grey elephants on grass plains during sunset"
+    src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80"
+  />
+  <p>
+    Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+    trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+    water for drinking or bathing.
+  </p>
+
+  <h2>Dolphin</h2>
+  <img
+    alt="black and white dolphin in water"
+    src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+  />
+  <p>
+    Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue,
+    and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth
+    and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a
+    pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+  </p>
+</ion-content>
+```
diff --git a/static/usage/v10/header/hide/react.md b/static/usage/v10/header/hide/react.md
new file mode 100644
index 00000000000..0ea6f83e4ab
--- /dev/null
+++ b/static/usage/v10/header/hide/react.md
@@ -0,0 +1,77 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonHeader scrollEffect="hide">
+        <IonToolbar>
+          <IonTitle>Header</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <h1>Animal Facts</h1>
+
+        <h2>Rhinoceros</h2>
+        <img
+          alt="rhino standing near grass"
+          src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+        />
+        <p>
+          The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+          the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+          the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+          horns, while the Javan rhino and one-horned rhino have one horn.
+        </p>
+
+        <h2>Sea Turtle</h2>
+        <img
+          alt="brown sea turtle in water"
+          src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
+        />
+        <p>
+          Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+          turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+          adapted for swimming, so they are vulnerable while on land.
+        </p>
+
+        <h2>Giraffe</h2>
+        <img
+          alt="giraffe sticking its tongue out"
+          src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80"
+        />
+        <p>
+          Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+          a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+          called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+        </p>
+
+        <h2>Elephant</h2>
+        <img
+          alt="two grey elephants on grass plains during sunset"
+          src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80"
+        />
+        <p>
+          Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+          long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+          suck up water for drinking or bathing.
+        </p>
+
+        <h2>Dolphin</h2>
+        <img
+          alt="black and white dolphin in water"
+          src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+        />
+        <p>
+          Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+          blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+          100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that
+          opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+        </p>
+      </IonContent>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v10/header/hide/vue.md b/static/usage/v10/header/hide/vue.md
new file mode 100644
index 00000000000..67b20fdf3e9
--- /dev/null
+++ b/static/usage/v10/header/hide/vue.md
@@ -0,0 +1,73 @@
+```html
+<template>
+  <ion-header scroll-effect="hide">
+    <ion-toolbar>
+      <ion-title>Header</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Animal Facts</h1>
+
+    <h2>Rhinoceros</h2>
+    <img
+      alt="rhino standing near grass"
+      src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+    />
+    <p>
+      The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+      Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+      species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns,
+      while the Javan rhino and one-horned rhino have one horn.
+    </p>
+
+    <h2>Sea Turtle</h2>
+    <img
+      alt="brown sea turtle in water"
+      src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
+    />
+    <p>
+      Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+      turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+      adapted for swimming, so they are vulnerable while on land.
+    </p>
+
+    <h2>Giraffe</h2>
+    <img
+      alt="giraffe sticking its tongue out"
+      src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80"
+    />
+    <p>
+      Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+      spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+      giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+    </p>
+
+    <h2>Elephant</h2>
+    <img
+      alt="two grey elephants on grass plains during sunset"
+      src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80"
+    />
+    <p>
+      Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+      trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+      water for drinking or bathing.
+    </p>
+
+    <h2>Dolphin</h2>
+    <img
+      alt="black and white dolphin in water"
+      src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+    />
+    <p>
+      Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+      blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100
+      teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to
+      reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+    </p>
+  </ion-content>
+</template>
+
+<script setup lang="ts">
+  import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
+</script>
+```
diff --git a/static/usage/v10/tab-bar/hide/angular/example_component_html.md b/static/usage/v10/tab-bar/hide/angular/example_component_html.md
new file mode 100644
index 00000000000..99d0fcac76d
--- /dev/null
+++ b/static/usage/v10/tab-bar/hide/angular/example_component_html.md
@@ -0,0 +1,81 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Header</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <h1>Animal Facts</h1>
+
+  <h2>Rhinoceros</h2>
+  <img
+    alt="rhino standing near grass"
+    src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+  />
+  <p>
+    The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+    Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+    species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while
+    the Javan rhino and one-horned rhino have one horn.
+  </p>
+
+  <h2>Sea Turtle</h2>
+  <img
+    alt="brown sea turtle in water"
+    src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
+  />
+  <p>
+    Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles,
+    sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for
+    swimming, so they are vulnerable while on land.
+  </p>
+
+  <h2>Giraffe</h2>
+  <img
+    alt="giraffe sticking its tongue out"
+    src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80"
+  />
+  <p>
+    Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+    spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+    giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+  </p>
+
+  <h2>Elephant</h2>
+  <img
+    alt="two grey elephants on grass plains during sunset"
+    src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80"
+  />
+  <p>
+    Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+    trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+    water for drinking or bathing.
+  </p>
+
+  <h2>Dolphin</h2>
+  <img
+    alt="black and white dolphin in water"
+    src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+  />
+  <p>
+    Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue,
+    and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth
+    and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a
+    pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+  </p>
+</ion-content>
+<ion-tab-bar scrollEffect="hide">
+  <ion-tab-button tab="favorites">
+    <ion-icon name="heart"></ion-icon>
+    <ion-label>Favorites</ion-label>
+  </ion-tab-button>
+  <ion-tab-button tab="music">
+    <ion-icon name="musical-note"></ion-icon>
+    <ion-label>Music</ion-label>
+  </ion-tab-button>
+  <ion-tab-button tab="calendar">
+    <ion-icon name="calendar"></ion-icon>
+    <ion-label>Calendar</ion-label>
+  </ion-tab-button>
+</ion-tab-bar>
+```
diff --git a/static/usage/v10/tab-bar/hide/angular/example_component_ts.md b/static/usage/v10/tab-bar/hide/angular/example_component_ts.md
new file mode 100644
index 00000000000..014cef6d618
--- /dev/null
+++ b/static/usage/v10/tab-bar/hide/angular/example_component_ts.md
@@ -0,0 +1,27 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonLabel,
+  IonTabBar,
+  IonTabButton,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular';
+import { addIcons } from 'ionicons';
+import { calendar, heart, musicalNote } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [IonContent, IonHeader, IonIcon, IonLabel, IonTabBar, IonTabButton, IonTitle, IonToolbar],
+})
+export class ExampleComponent {
+  constructor() {
+    addIcons({ calendar, heart, musicalNote });
+  }
+}
+```
diff --git a/static/usage/v10/tab-bar/hide/demo.html b/static/usage/v10/tab-bar/hide/demo.html
new file mode 100644
index 00000000000..0bbd4a8a6a4
--- /dev/null
+++ b/static/usage/v10/tab-bar/hide/demo.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tab Bar</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/dist/ionic/ionic.esm.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/css/ionic.bundle.css"
+    />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Header</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <h1>Animal Facts</h1>
+
+        <h2>Rhinoceros</h2>
+        <img
+          alt="rhino standing near grass"
+          src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+        />
+        <p>
+          The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+          the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+          the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+          horns, while the Javan rhino and one-horned rhino have one horn.
+        </p>
+
+        <h2>Sea Turtle</h2>
+        <img
+          alt="brown sea turtle in water"
+          src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
+        />
+        <p>
+          Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+          turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+          adapted for swimming, so they are vulnerable while on land.
+        </p>
+
+        <h2>Giraffe</h2>
+        <img
+          alt="giraffe sticking its tongue out"
+          src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80"
+        />
+        <p>
+          Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+          a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+          called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+        </p>
+
+        <h2>Elephant</h2>
+        <img
+          alt="two grey elephants on grass plains during sunset"
+          src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80"
+        />
+        <p>
+          Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+          long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+          suck up water for drinking or bathing.
+        </p>
+
+        <h2>Dolphin</h2>
+        <img
+          alt="black and white dolphin in water"
+          src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+        />
+        <p>
+          Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+          blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+          100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that
+          opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+        </p>
+      </ion-content>
+      <ion-tab-bar scroll-effect="hide">
+        <ion-tab-button tab="favorites">
+          <ion-icon name="heart"></ion-icon>
+          <ion-label>Favorites</ion-label>
+        </ion-tab-button>
+        <ion-tab-button tab="music">
+          <ion-icon name="musical-note"></ion-icon>
+          <ion-label>Music</ion-label>
+        </ion-tab-button>
+        <ion-tab-button tab="calendar">
+          <ion-icon name="calendar"></ion-icon>
+          <ion-label>Calendar</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v10/tab-bar/hide/index.mdx b/static/usage/v10/tab-bar/hide/index.mdx
new file mode 100644
index 00000000000..00f10ba54ab
--- /dev/null
+++ b/static/usage/v10/tab-bar/hide/index.mdx
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="10"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v10/tab-bar/hide/demo.html"
+  devicePreview
+  includeIonContent={false}
+/>
diff --git a/static/usage/v10/tab-bar/hide/javascript.md b/static/usage/v10/tab-bar/hide/javascript.md
new file mode 100644
index 00000000000..3f3d5290ba4
--- /dev/null
+++ b/static/usage/v10/tab-bar/hide/javascript.md
@@ -0,0 +1,81 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Header</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <h1>Animal Facts</h1>
+
+  <h2>Rhinoceros</h2>
+  <img
+    alt="rhino standing near grass"
+    src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+  />
+  <p>
+    The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+    Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+    species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while
+    the Javan rhino and one-horned rhino have one horn.
+  </p>
+
+  <h2>Sea Turtle</h2>
+  <img
+    alt="brown sea turtle in water"
+    src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
+  />
+  <p>
+    Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles,
+    sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for
+    swimming, so they are vulnerable while on land.
+  </p>
+
+  <h2>Giraffe</h2>
+  <img
+    alt="giraffe sticking its tongue out"
+    src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80"
+  />
+  <p>
+    Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+    spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+    giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+  </p>
+
+  <h2>Elephant</h2>
+  <img
+    alt="two grey elephants on grass plains during sunset"
+    src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80"
+  />
+  <p>
+    Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+    trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+    water for drinking or bathing.
+  </p>
+
+  <h2>Dolphin</h2>
+  <img
+    alt="black and white dolphin in water"
+    src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+  />
+  <p>
+    Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue,
+    and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth
+    and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a
+    pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+  </p>
+</ion-content>
+<ion-tab-bar scroll-effect="hide">
+  <ion-tab-button tab="favorites">
+    <ion-icon name="heart"></ion-icon>
+    <ion-label>Favorites</ion-label>
+  </ion-tab-button>
+  <ion-tab-button tab="music">
+    <ion-icon name="musical-note"></ion-icon>
+    <ion-label>Music</ion-label>
+  </ion-tab-button>
+  <ion-tab-button tab="calendar">
+    <ion-icon name="calendar"></ion-icon>
+    <ion-label>Calendar</ion-label>
+  </ion-tab-button>
+</ion-tab-bar>
+```
diff --git a/static/usage/v10/tab-bar/hide/react.md b/static/usage/v10/tab-bar/hide/react.md
new file mode 100644
index 00000000000..958395f0dee
--- /dev/null
+++ b/static/usage/v10/tab-bar/hide/react.md
@@ -0,0 +1,92 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonIcon, IonLabel, IonTabBar, IonTabButton, IonTitle, IonToolbar } from '@ionic/react';
+import { calendar, heart, musicalNote } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Header</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <h1>Animal Facts</h1>
+
+        <h2>Rhinoceros</h2>
+        <img
+          alt="rhino standing near grass"
+          src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+        />
+        <p>
+          The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+          the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+          the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+          horns, while the Javan rhino and one-horned rhino have one horn.
+        </p>
+
+        <h2>Sea Turtle</h2>
+        <img
+          alt="brown sea turtle in water"
+          src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
+        />
+        <p>
+          Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+          turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+          adapted for swimming, so they are vulnerable while on land.
+        </p>
+
+        <h2>Giraffe</h2>
+        <img
+          alt="giraffe sticking its tongue out"
+          src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80"
+        />
+        <p>
+          Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+          a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+          called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+        </p>
+
+        <h2>Elephant</h2>
+        <img
+          alt="two grey elephants on grass plains during sunset"
+          src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80"
+        />
+        <p>
+          Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+          long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+          suck up water for drinking or bathing.
+        </p>
+
+        <h2>Dolphin</h2>
+        <img
+          alt="black and white dolphin in water"
+          src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+        />
+        <p>
+          Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+          blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+          100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that
+          opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+        </p>
+      </IonContent>
+      <IonTabBar scrollEffect="hide">
+        <IonTabButton tab="favorites">
+          <IonIcon icon={heart} />
+          <IonLabel>Favorites</IonLabel>
+        </IonTabButton>
+        <IonTabButton tab="music">
+          <IonIcon icon={musicalNote} />
+          <IonLabel>Music</IonLabel>
+        </IonTabButton>
+        <IonTabButton tab="calendar">
+          <IonIcon icon={calendar} />
+          <IonLabel>Calendar</IonLabel>
+        </IonTabButton>
+      </IonTabBar>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v10/tab-bar/hide/vue.md b/static/usage/v10/tab-bar/hide/vue.md
new file mode 100644
index 00000000000..c0ce4800b8f
--- /dev/null
+++ b/static/usage/v10/tab-bar/hide/vue.md
@@ -0,0 +1,88 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Header</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Animal Facts</h1>
+
+    <h2>Rhinoceros</h2>
+    <img
+      alt="rhino standing near grass"
+      src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+    />
+    <p>
+      The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+      Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+      species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns,
+      while the Javan rhino and one-horned rhino have one horn.
+    </p>
+
+    <h2>Sea Turtle</h2>
+    <img
+      alt="brown sea turtle in water"
+      src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
+    />
+    <p>
+      Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+      turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+      adapted for swimming, so they are vulnerable while on land.
+    </p>
+
+    <h2>Giraffe</h2>
+    <img
+      alt="giraffe sticking its tongue out"
+      src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80"
+    />
+    <p>
+      Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+      spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+      giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+    </p>
+
+    <h2>Elephant</h2>
+    <img
+      alt="two grey elephants on grass plains during sunset"
+      src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80"
+    />
+    <p>
+      Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+      trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+      water for drinking or bathing.
+    </p>
+
+    <h2>Dolphin</h2>
+    <img
+      alt="black and white dolphin in water"
+      src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
+    />
+    <p>
+      Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+      blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100
+      teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to
+      reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+    </p>
+  </ion-content>
+  <ion-tab-bar scroll-effect="hide">
+    <ion-tab-button tab="favorites">
+      <ion-icon :icon="heart"></ion-icon>
+      <ion-label>Favorites</ion-label>
+    </ion-tab-button>
+    <ion-tab-button tab="music">
+      <ion-icon :icon="musicalNote"></ion-icon>
+      <ion-label>Music</ion-label>
+    </ion-tab-button>
+    <ion-tab-button tab="calendar">
+      <ion-icon :icon="calendar"></ion-icon>
+      <ion-label>Calendar</ion-label>
+    </ion-tab-button>
+  </ion-tab-bar>
+</template>
+
+<script setup lang="ts">
+  import { IonContent, IonHeader, IonIcon, IonLabel, IonTabBar, IonTabButton, IonTitle, IonToolbar } from '@ionic/vue';
+  import { calendar, heart, musicalNote } from 'ionicons/icons';
+</script>
+```
diff --git a/static/usage/v10/title/collapsible-large-title/basic/angular/example_component_html.md b/static/usage/v10/title/collapsible-large-title/basic/angular/example_component_html.md
index 727d9ba1e3a..1c4d69d8b3f 100644
--- a/static/usage/v10/title/collapsible-large-title/basic/angular/example_component_html.md
+++ b/static/usage/v10/title/collapsible-large-title/basic/angular/example_component_html.md
@@ -5,7 +5,7 @@
   </ion-toolbar>
 </ion-header>
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+  <ion-header scrollEffect="condense">
     <ion-toolbar>
       <ion-title size="large">Title</ion-title>
     </ion-toolbar>
diff --git a/static/usage/v10/title/collapsible-large-title/basic/demo.html b/static/usage/v10/title/collapsible-large-title/basic/demo.html
index 06f7aac327f..c7064c6552b 100644
--- a/static/usage/v10/title/collapsible-large-title/basic/demo.html
+++ b/static/usage/v10/title/collapsible-large-title/basic/demo.html
@@ -6,8 +6,14 @@
     <title>Title</title>
     <link rel="stylesheet" href="../../../common.css" />
     <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@9/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@9/css/ionic.bundle.css" />
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/dist/ionic/ionic.esm.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/css/ionic.bundle.css"
+    />
   </head>
 
   <body>
@@ -18,7 +24,7 @@
         </ion-toolbar>
       </ion-header>
       <ion-content fullscreen="true">
-        <ion-header collapse="condense">
+        <ion-header scroll-effect="condense">
           <ion-toolbar>
             <ion-title size="large">Title</ion-title>
           </ion-toolbar>
diff --git a/static/usage/v10/title/collapsible-large-title/basic/index.mdx b/static/usage/v10/title/collapsible-large-title/basic/index.mdx
index 104ca6f9942..6d86be8f5d1 100644
--- a/static/usage/v10/title/collapsible-large-title/basic/index.mdx
+++ b/static/usage/v10/title/collapsible-large-title/basic/index.mdx
@@ -9,7 +9,6 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="10"
-  mode="ios"
   code={{
     javascript,
     react,
@@ -24,5 +23,4 @@ import angular_example_component_ts from './angular/example_component_ts.md';
   src="usage/v10/title/collapsible-large-title/basic/demo.html"
   devicePreview={true}
   includeIonContent={false}
-  mode="ios"
 />
diff --git a/static/usage/v10/title/collapsible-large-title/basic/javascript.md b/static/usage/v10/title/collapsible-large-title/basic/javascript.md
index 77e7de55212..559191ab324 100644
--- a/static/usage/v10/title/collapsible-large-title/basic/javascript.md
+++ b/static/usage/v10/title/collapsible-large-title/basic/javascript.md
@@ -5,7 +5,7 @@
   </ion-toolbar>
 </ion-header>
 <ion-content fullscreen="true">
-  <ion-header collapse="condense">
+  <ion-header scroll-effect="condense">
     <ion-toolbar>
       <ion-title size="large">Title</ion-title>
     </ion-toolbar>
diff --git a/static/usage/v10/title/collapsible-large-title/basic/react.md b/static/usage/v10/title/collapsible-large-title/basic/react.md
index cdcbdc557b6..5d4e7f45cae 100644
--- a/static/usage/v10/title/collapsible-large-title/basic/react.md
+++ b/static/usage/v10/title/collapsible-large-title/basic/react.md
@@ -11,7 +11,7 @@ function Example() {
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen={true}>
-        <IonHeader collapse="condense">
+        <IonHeader scrollEffect="condense">
           <IonToolbar>
             <IonTitle size="large">Title</IonTitle>
           </IonToolbar>
diff --git a/static/usage/v10/title/collapsible-large-title/basic/vue.md b/static/usage/v10/title/collapsible-large-title/basic/vue.md
index eaed784e824..1e55920af82 100644
--- a/static/usage/v10/title/collapsible-large-title/basic/vue.md
+++ b/static/usage/v10/title/collapsible-large-title/basic/vue.md
@@ -6,7 +6,7 @@
     </ion-toolbar>
   </ion-header>
   <ion-content :fullscreen="true">
-    <ion-header collapse="condense">
+    <ion-header scroll-effect="condense">
       <ion-toolbar>
         <ion-title size="large">Title</ion-title>
       </ion-toolbar>
diff --git a/static/usage/v10/title/collapsible-large-title/buttons/angular/example_component_html.md b/static/usage/v10/title/collapsible-large-title/buttons/angular/example_component_html.md
index 6f253b16cd4..6237dbbfea7 100644
--- a/static/usage/v10/title/collapsible-large-title/buttons/angular/example_component_html.md
+++ b/static/usage/v10/title/collapsible-large-title/buttons/angular/example_component_html.md
@@ -8,7 +8,7 @@
   </ion-toolbar>
 </ion-header>
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+  <ion-header scrollEffect="condense">
     <ion-toolbar>
       <ion-title size="large">Title</ion-title>
       <ion-buttons [collapse]="true" slot="end">
diff --git a/static/usage/v10/title/collapsible-large-title/buttons/demo.html b/static/usage/v10/title/collapsible-large-title/buttons/demo.html
index a07bfb43fcf..88c9f026a0a 100644
--- a/static/usage/v10/title/collapsible-large-title/buttons/demo.html
+++ b/static/usage/v10/title/collapsible-large-title/buttons/demo.html
@@ -6,8 +6,14 @@
     <title>Title</title>
     <link rel="stylesheet" href="../../../common.css" />
     <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@9/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@9/css/ionic.bundle.css" />
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/dist/ionic/ionic.esm.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/css/ionic.bundle.css"
+    />
   </head>
 
   <body>
@@ -21,7 +27,7 @@
         </ion-toolbar>
       </ion-header>
       <ion-content fullscreen="true">
-        <ion-header collapse="condense">
+        <ion-header scroll-effect="condense">
           <ion-toolbar>
             <ion-title size="large">Title</ion-title>
             <ion-buttons collapse="true" slot="end">
diff --git a/static/usage/v10/title/collapsible-large-title/buttons/index.mdx b/static/usage/v10/title/collapsible-large-title/buttons/index.mdx
index 22a268b20a6..798e6eeaca9 100644
--- a/static/usage/v10/title/collapsible-large-title/buttons/index.mdx
+++ b/static/usage/v10/title/collapsible-large-title/buttons/index.mdx
@@ -9,7 +9,6 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 
 <Playground
   version="10"
-  mode="ios"
   code={{
     javascript,
     react,
diff --git a/static/usage/v10/title/collapsible-large-title/buttons/javascript.md b/static/usage/v10/title/collapsible-large-title/buttons/javascript.md
index feb1583e3b6..1dfd3c176d4 100644
--- a/static/usage/v10/title/collapsible-large-title/buttons/javascript.md
+++ b/static/usage/v10/title/collapsible-large-title/buttons/javascript.md
@@ -8,7 +8,7 @@
   </ion-toolbar>
 </ion-header>
 <ion-content fullscreen="true">
-  <ion-header collapse="condense">
+  <ion-header scroll-effect="condense">
     <ion-toolbar>
       <ion-title size="large">Title</ion-title>
       <ion-buttons collapse="true" slot="end">
diff --git a/static/usage/v10/title/collapsible-large-title/buttons/react.md b/static/usage/v10/title/collapsible-large-title/buttons/react.md
index deca52428ce..3cbb5e68782 100644
--- a/static/usage/v10/title/collapsible-large-title/buttons/react.md
+++ b/static/usage/v10/title/collapsible-large-title/buttons/react.md
@@ -14,7 +14,7 @@ function Example() {
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen={true}>
-        <IonHeader collapse="condense">
+        <IonHeader scrollEffect="condense">
           <IonToolbar>
             <IonTitle size="large">Title</IonTitle>
             <IonButtons collapse={true} slot="end">
diff --git a/static/usage/v10/title/collapsible-large-title/buttons/vue.md b/static/usage/v10/title/collapsible-large-title/buttons/vue.md
index ee775370d61..cc899495270 100644
--- a/static/usage/v10/title/collapsible-large-title/buttons/vue.md
+++ b/static/usage/v10/title/collapsible-large-title/buttons/vue.md
@@ -9,7 +9,7 @@
     </ion-toolbar>
   </ion-header>
   <ion-content :fullscreen="true">
-    <ion-header collapse="condense">
+    <ion-header scroll-effect="condense">
       <ion-toolbar>
         <ion-title size="large">Title</ion-title>
         <ion-buttons :collapse="true" slot="end">
diff --git a/static/usage/v10/title/theming/css-properties/angular/example_component_html.md b/static/usage/v10/title/theming/css-properties/angular/example_component_html.md
index 31c40bb2ef7..083250a39cc 100644
--- a/static/usage/v10/title/theming/css-properties/angular/example_component_html.md
+++ b/static/usage/v10/title/theming/css-properties/angular/example_component_html.md
@@ -5,7 +5,7 @@
   </ion-toolbar>
 </ion-header>
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+  <ion-header scrollEffect="condense">
     <ion-toolbar>
       <ion-title size="large">Title</ion-title>
     </ion-toolbar>
diff --git a/static/usage/v10/title/theming/css-properties/demo.html b/static/usage/v10/title/theming/css-properties/demo.html
index 5c2bf061fa1..d38c43fc147 100644
--- a/static/usage/v10/title/theming/css-properties/demo.html
+++ b/static/usage/v10/title/theming/css-properties/demo.html
@@ -6,8 +6,14 @@
     <title>Title</title>
     <link rel="stylesheet" href="../../../common.css" />
     <script src="../../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@9/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@9/css/ionic.bundle.css" />
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/dist/ionic/ionic.esm.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/css/ionic.bundle.css"
+    />
 
     <style>
       ion-title.title-large {
@@ -33,7 +39,7 @@
         </ion-toolbar>
       </ion-header>
       <ion-content fullscreen="true">
-        <ion-header collapse="condense">
+        <ion-header scroll-effect="condense">
           <ion-toolbar>
             <ion-title size="large">Title</ion-title>
           </ion-toolbar>
diff --git a/static/usage/v10/title/theming/css-properties/javascript.md b/static/usage/v10/title/theming/css-properties/javascript.md
index 443ca1bf39d..2664ff4696c 100644
--- a/static/usage/v10/title/theming/css-properties/javascript.md
+++ b/static/usage/v10/title/theming/css-properties/javascript.md
@@ -20,7 +20,7 @@
   </ion-toolbar>
 </ion-header>
 <ion-content fullscreen="true">
-  <ion-header collapse="condense">
+  <ion-header scroll-effect="condense">
     <ion-toolbar>
       <ion-title size="large">Title</ion-title>
     </ion-toolbar>
diff --git a/static/usage/v10/title/theming/css-properties/react/main_tsx.md b/static/usage/v10/title/theming/css-properties/react/main_tsx.md
index 5dc5b9d993b..d5ddad5b5ab 100644
--- a/static/usage/v10/title/theming/css-properties/react/main_tsx.md
+++ b/static/usage/v10/title/theming/css-properties/react/main_tsx.md
@@ -13,7 +13,7 @@ function Example() {
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen={true}>
-        <IonHeader collapse="condense">
+        <IonHeader scrollEffect="condense">
           <IonToolbar>
             <IonTitle size="large">Title</IonTitle>
           </IonToolbar>
diff --git a/static/usage/v10/title/theming/css-properties/vue.md b/static/usage/v10/title/theming/css-properties/vue.md
index 2fb3aee914c..573ff2b583a 100644
--- a/static/usage/v10/title/theming/css-properties/vue.md
+++ b/static/usage/v10/title/theming/css-properties/vue.md
@@ -20,7 +20,7 @@
     </ion-toolbar>
   </ion-header>
   <ion-content :fullscreen="true">
-    <ion-header collapse="condense">
+    <ion-header scroll-effect="condense">
       <ion-toolbar>
         <ion-title size="large">Title</ion-title>
       </ion-toolbar>

From 68f0173d2174c3bd4c381451f15e01c8bb546e65 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Thu, 12 Nov 2026 17:00:21 -0800
Subject: [PATCH 2/5] docs(demo): remove dev build

---
 static/usage/v10/footer/custom-scroll-target/demo.html | 10 ++--------
 static/usage/v10/footer/fade/demo.html                 | 10 ++--------
 static/usage/v10/footer/hide/demo.html                 | 10 ++--------
 static/usage/v10/header/condense/demo.html             | 10 ++--------
 static/usage/v10/header/custom-scroll-target/demo.html | 10 ++--------
 static/usage/v10/header/fade/demo.html                 | 10 ++--------
 static/usage/v10/header/hide/demo.html                 | 10 ++--------
 static/usage/v10/tab-bar/hide/demo.html                | 10 ++--------
 .../v10/title/collapsible-large-title/basic/demo.html  | 10 ++--------
 .../title/collapsible-large-title/buttons/demo.html    | 10 ++--------
 .../usage/v10/title/theming/css-properties/demo.html   | 10 ++--------
 11 files changed, 22 insertions(+), 88 deletions(-)

diff --git a/static/usage/v10/footer/custom-scroll-target/demo.html b/static/usage/v10/footer/custom-scroll-target/demo.html
index ca48981ded5..1d1fcce487c 100644
--- a/static/usage/v10/footer/custom-scroll-target/demo.html
+++ b/static/usage/v10/footer/custom-scroll-target/demo.html
@@ -6,14 +6,8 @@
     <title>Footer</title>
     <link rel="stylesheet" href="../../common.css" />
     <script src="../../common.js"></script>
-    <script
-      type="module"
-      src="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/dist/ionic/ionic.esm.js"
-    ></script>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/css/ionic.bundle.css"
-    />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@9/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@9/css/ionic.bundle.css" />
 
     <style>
       .ion-content-scroll-host {
diff --git a/static/usage/v10/footer/fade/demo.html b/static/usage/v10/footer/fade/demo.html
index 03b704d6ff9..5adee48a7cc 100644
--- a/static/usage/v10/footer/fade/demo.html
+++ b/static/usage/v10/footer/fade/demo.html
@@ -6,14 +6,8 @@
     <title>Footer</title>
     <link rel="stylesheet" href="../../common.css" />
     <script src="../../common.js"></script>
-    <script
-      type="module"
-      src="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/dist/ionic/ionic.esm.js"
-    ></script>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/css/ionic.bundle.css"
-    />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@9/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@9/css/ionic.bundle.css" />
   </head>
 
   <body>
diff --git a/static/usage/v10/footer/hide/demo.html b/static/usage/v10/footer/hide/demo.html
index a049dbbfae0..950b627030b 100644
--- a/static/usage/v10/footer/hide/demo.html
+++ b/static/usage/v10/footer/hide/demo.html
@@ -6,14 +6,8 @@
     <title>Footer</title>
     <link rel="stylesheet" href="../../common.css" />
     <script src="../../common.js"></script>
-    <script
-      type="module"
-      src="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/dist/ionic/ionic.esm.js"
-    ></script>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/css/ionic.bundle.css"
-    />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@9/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@9/css/ionic.bundle.css" />
   </head>
 
   <body>
diff --git a/static/usage/v10/header/condense/demo.html b/static/usage/v10/header/condense/demo.html
index 648d4259208..8bd2650e6b0 100644
--- a/static/usage/v10/header/condense/demo.html
+++ b/static/usage/v10/header/condense/demo.html
@@ -6,14 +6,8 @@
     <title>Header</title>
     <link rel="stylesheet" href="../../common.css" />
     <script src="../../common.js"></script>
-    <script
-      type="module"
-      src="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/dist/ionic/ionic.esm.js"
-    ></script>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/css/ionic.bundle.css"
-    />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@9/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@9/css/ionic.bundle.css" />
   </head>
 
   <body>
diff --git a/static/usage/v10/header/custom-scroll-target/demo.html b/static/usage/v10/header/custom-scroll-target/demo.html
index caf8da0cbdc..01eb753943b 100644
--- a/static/usage/v10/header/custom-scroll-target/demo.html
+++ b/static/usage/v10/header/custom-scroll-target/demo.html
@@ -6,14 +6,8 @@
     <title>Header</title>
     <link rel="stylesheet" href="../../common.css" />
     <script src="../../common.js"></script>
-    <script
-      type="module"
-      src="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/dist/ionic/ionic.esm.js"
-    ></script>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/css/ionic.bundle.css"
-    />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@9/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@9/css/ionic.bundle.css" />
 
     <style>
       .ion-content-scroll-host {
diff --git a/static/usage/v10/header/fade/demo.html b/static/usage/v10/header/fade/demo.html
index 8e82c0f292c..382053b5baa 100644
--- a/static/usage/v10/header/fade/demo.html
+++ b/static/usage/v10/header/fade/demo.html
@@ -6,14 +6,8 @@
     <title>Header</title>
     <link rel="stylesheet" href="../../common.css" />
     <script src="../../common.js"></script>
-    <script
-      type="module"
-      src="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/dist/ionic/ionic.esm.js"
-    ></script>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/css/ionic.bundle.css"
-    />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@9/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@9/css/ionic.bundle.css" />
   </head>
 
   <body>
diff --git a/static/usage/v10/header/hide/demo.html b/static/usage/v10/header/hide/demo.html
index 406a40db7cd..b3bdace39d5 100644
--- a/static/usage/v10/header/hide/demo.html
+++ b/static/usage/v10/header/hide/demo.html
@@ -6,14 +6,8 @@
     <title>Header</title>
     <link rel="stylesheet" href="../../common.css" />
     <script src="../../common.js"></script>
-    <script
-      type="module"
-      src="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/dist/ionic/ionic.esm.js"
-    ></script>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/css/ionic.bundle.css"
-    />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@9/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@9/css/ionic.bundle.css" />
   </head>
 
   <body>
diff --git a/static/usage/v10/tab-bar/hide/demo.html b/static/usage/v10/tab-bar/hide/demo.html
index 0bbd4a8a6a4..47e0634aebe 100644
--- a/static/usage/v10/tab-bar/hide/demo.html
+++ b/static/usage/v10/tab-bar/hide/demo.html
@@ -6,14 +6,8 @@
     <title>Tab Bar</title>
     <link rel="stylesheet" href="../../common.css" />
     <script src="../../common.js"></script>
-    <script
-      type="module"
-      src="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/dist/ionic/ionic.esm.js"
-    ></script>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/css/ionic.bundle.css"
-    />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@9/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@9/css/ionic.bundle.css" />
   </head>
 
   <body>
diff --git a/static/usage/v10/title/collapsible-large-title/basic/demo.html b/static/usage/v10/title/collapsible-large-title/basic/demo.html
index c7064c6552b..b8cc851b80b 100644
--- a/static/usage/v10/title/collapsible-large-title/basic/demo.html
+++ b/static/usage/v10/title/collapsible-large-title/basic/demo.html
@@ -6,14 +6,8 @@
     <title>Title</title>
     <link rel="stylesheet" href="../../../common.css" />
     <script src="../../../common.js"></script>
-    <script
-      type="module"
-      src="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/dist/ionic/ionic.esm.js"
-    ></script>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/css/ionic.bundle.css"
-    />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@9/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@9/css/ionic.bundle.css" />
   </head>
 
   <body>
diff --git a/static/usage/v10/title/collapsible-large-title/buttons/demo.html b/static/usage/v10/title/collapsible-large-title/buttons/demo.html
index 88c9f026a0a..587c0007ebe 100644
--- a/static/usage/v10/title/collapsible-large-title/buttons/demo.html
+++ b/static/usage/v10/title/collapsible-large-title/buttons/demo.html
@@ -6,14 +6,8 @@
     <title>Title</title>
     <link rel="stylesheet" href="../../../common.css" />
     <script src="../../../common.js"></script>
-    <script
-      type="module"
-      src="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/dist/ionic/ionic.esm.js"
-    ></script>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/css/ionic.bundle.css"
-    />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@9/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@9/css/ionic.bundle.css" />
   </head>
 
   <body>
diff --git a/static/usage/v10/title/theming/css-properties/demo.html b/static/usage/v10/title/theming/css-properties/demo.html
index d38c43fc147..b14b56fd69e 100644
--- a/static/usage/v10/title/theming/css-properties/demo.html
+++ b/static/usage/v10/title/theming/css-properties/demo.html
@@ -6,14 +6,8 @@
     <title>Title</title>
     <link rel="stylesheet" href="../../../common.css" />
     <script src="../../../common.js"></script>
-    <script
-      type="module"
-      src="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/dist/ionic/ionic.esm.js"
-    ></script>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@ionic/core@9.0.12-dev.11794527713.1ebd1ea1/css/ionic.bundle.css"
-    />
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@9/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@9/css/ionic.bundle.css" />
 
     <style>
       ion-title.title-large {

From ae78843954f51ba32a2ff11aefa33894ae81b453 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Fri, 13 Nov 2026 10:53:18 -0800
Subject: [PATCH 3/5] docs(tutorials): drop iOS from the collapsible large
 title wording

---
 docs/angular/quickstart.mdx     | 2 +-
 docs/angular/your-first-app.mdx | 2 +-
 docs/react/quickstart.mdx       | 2 +-
 docs/react/your-first-app.mdx   | 2 +-
 docs/vue/quickstart.mdx         | 2 +-
 docs/vue/your-first-app.mdx     | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/angular/quickstart.mdx b/docs/angular/quickstart.mdx
index 72401efcaaf..dc4386e4f19 100644
--- a/docs/angular/quickstart.mdx
+++ b/docs/angular/quickstart.mdx
@@ -174,7 +174,7 @@ And the template, in the `home.page.html` file, uses those components:
 </ion-content>
 ```
 
-This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/api/title.mdx#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/api/title.mdx#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip[Learn More]
 
diff --git a/docs/angular/your-first-app.mdx b/docs/angular/your-first-app.mdx
index 244dafe998c..0746dc03ede 100644
--- a/docs/angular/your-first-app.mdx
+++ b/docs/angular/your-first-app.mdx
@@ -168,7 +168,7 @@ Open `/src/app/tab2/tab2.page.html`. It contains:
 </ion-content>
 ```
 
-`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Rename both `ion-title` elements to:
+`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Rename both `ion-title` elements to:
 
 ```html
 <ion-header [translucent]="true">
diff --git a/docs/react/quickstart.mdx b/docs/react/quickstart.mdx
index 194468d86ed..8d276c5640c 100644
--- a/docs/react/quickstart.mdx
+++ b/docs/react/quickstart.mdx
@@ -150,7 +150,7 @@ const Home: React.FC = () => {
 export default Home;
 ```
 
-This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/api/title.mdx#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/api/title.mdx#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip[Learn More]
 
diff --git a/docs/react/your-first-app.mdx b/docs/react/your-first-app.mdx
index 775b0af10fb..363fdff6f64 100644
--- a/docs/react/your-first-app.mdx
+++ b/docs/react/your-first-app.mdx
@@ -169,7 +169,7 @@ const Tab2: React.FC = () => {
 export default Tab2;
 ```
 
-`IonHeader` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Let’s rename both `IonTitle` elements to:
+`IonHeader` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Let’s rename both `IonTitle` elements to:
 
 ```tsx
 <IonPage>
diff --git a/docs/vue/quickstart.mdx b/docs/vue/quickstart.mdx
index 6e52dc20e99..3871a1e7cf3 100644
--- a/docs/vue/quickstart.mdx
+++ b/docs/vue/quickstart.mdx
@@ -162,7 +162,7 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue
 <!-- ...styles... -->
 ```
 
-This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/api/title.mdx#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
+This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/api/title.mdx#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down.
 
 :::tip[Learn More]
 
diff --git a/docs/vue/your-first-app.mdx b/docs/vue/your-first-app.mdx
index 5660e519054..fa72f43085a 100644
--- a/docs/vue/your-first-app.mdx
+++ b/docs/vue/your-first-app.mdx
@@ -172,7 +172,7 @@ import ExploreContainer from '@/components/ExploreContainer.vue';
 </script>
 ```
 
-`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Rename both `ion-title` elements to:
+`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to [Collapsible Large Title](../api/title.mdx#collapsible-large-titles) support). Rename both `ion-title` elements to:
 
 ```vue
 <template>

From b9508a86248d8c8c76a537bc44c27a2c6db6c34a Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Fri, 13 Nov 2026 10:53:18 -0800
Subject: [PATCH 4/5] docs(updating): recommend scrollEffect over the
 deprecated collapse

---
 docs/updating/10-0.mdx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/docs/updating/10-0.mdx b/docs/updating/10-0.mdx
index a5262b018a3..e6525c0b6c1 100644
--- a/docs/updating/10-0.mdx
+++ b/docs/updating/10-0.mdx
@@ -47,3 +47,18 @@ Coercion also moves from Stencil to Angular, which changes the result for number
 - A sheet `ion-modal` shows the drag handle unless `handle` is exactly `false`.
 
 Both values reach inputs routinely, from the `async` pipe before its first emission and from form control values, so coercing them would silently change which of those branches runs.
+
+## Recommended Changes {/* #recommended-changes */}
+
+The following changes are not required to update to Ionic 10, as your application will continue to work. However, we recommend making them now, since the deprecated APIs will be removed in a future major version.
+
+### Header and Footer {/* #header-and-footer */}
+
+The `collapse` property on `ion-header` and `ion-footer` is deprecated. Use `scrollEffect` instead, which takes the same values:
+
+```diff
+- <ion-header collapse="condense">
++ <ion-header scroll-effect="condense">
+```
+
+This is not a direct rename. `collapse` only applies when the mode is `ios`, while `scrollEffect` applies in every mode. After switching, the [condensed header](../api/header.mdx#condensed-header), [fade header](../api/header.mdx#fade-header), and [fade footer](../api/footer.mdx#fade-footer) effects also apply in `md`. For example, a page with a condensed header shows the large title in `md`, where it was previously hidden.

From 23f833b653e000dc14b5831a927acbbec6720b09 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Fri, 13 Nov 2026 11:09:51 -0800
Subject: [PATCH 5/5] docs(tab-bar): register icons in the JavaScript hide
 playground

---
 static/usage/v10/tab-bar/hide/index.mdx       | 11 ++++-
 .../index_html.md}                            |  0
 .../v10/tab-bar/hide/javascript/index_ts.md   | 46 +++++++++++++++++++
 3 files changed, 55 insertions(+), 2 deletions(-)
 rename static/usage/v10/tab-bar/hide/{javascript.md => javascript/index_html.md} (100%)
 create mode 100644 static/usage/v10/tab-bar/hide/javascript/index_ts.md

diff --git a/static/usage/v10/tab-bar/hide/index.mdx b/static/usage/v10/tab-bar/hide/index.mdx
index 00f10ba54ab..21fb5d20206 100644
--- a/static/usage/v10/tab-bar/hide/index.mdx
+++ b/static/usage/v10/tab-bar/hide/index.mdx
@@ -1,6 +1,8 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
+
 import react from './react.md';
 import vue from './vue.md';
 
@@ -10,7 +12,12 @@ import angular_example_component_ts from './angular/example_component_ts.md';
 <Playground
   version="10"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
     react,
     vue,
     angular: {
diff --git a/static/usage/v10/tab-bar/hide/javascript.md b/static/usage/v10/tab-bar/hide/javascript/index_html.md
similarity index 100%
rename from static/usage/v10/tab-bar/hide/javascript.md
rename to static/usage/v10/tab-bar/hide/javascript/index_html.md
diff --git a/static/usage/v10/tab-bar/hide/javascript/index_ts.md b/static/usage/v10/tab-bar/hide/javascript/index_ts.md
new file mode 100644
index 00000000000..ce024465bf5
--- /dev/null
+++ b/static/usage/v10/tab-bar/hide/javascript/index_ts.md
@@ -0,0 +1,46 @@
+```ts
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { addIcons } from 'ionicons';
+import { calendar, heart, musicalNote } from 'ionicons/icons';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/**
+ * Ionic Dark Palette
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+/**
+ * On Ionicons 7.2+ these icons
+ * get mapped to a kebab-case key.
+ * Alternatively, developers can do:
+ * addIcons({ 'calendar': calendar, 'heart': heart, 'musical-note': musicalNote });
+ */
+addIcons({ calendar, heart, musicalNote });
+
+defineCustomElements();
+```