feat(header, footer, tab-bar): add scrollEffect prop

[OS-susmitabhowmik]

Issue number: resolves internal

---

What is the current behavior?

• ion-header and ion-footer have a collapse prop for scroll-driven effects (condense, fade), but it only works on the iOS theme.
• ion-tab-bar has an unreleased hideOnScroll boolean prop that only works on the Ionic theme with expand="compact".
• Previously the large title typography was not available in md mode

What is the new behavior?

• Adds a new scrollEffect string enum prop to ion-header, ion-footer, and ion-tab-bar.
• scrollEffect="hide" slides the bar out of view when scrolling down and back in when scrolling up.
• scrollEffect="condense" and scrollEffect="fade" on ion-header/ion-footer replace the existing collapse values and work across all themes.
• Deprecates the collapse prop on ion-header and ion-footer with a console warning directing developers to use scrollEffect.
• Removes the unreleased hideOnScroll prop from ion-tab-bar.
• When ion-tab-bar is nested inside ion-footer, the footer owns the hide animation to prevent double-animation
• Typography for the md mode was added.

Does this introduce a breaking change?

• Yes
• No

Other information

Relevant Test Pages:

Header

• Deprecated collapse prop

  • https://ionic-framework-git-rou-12870-scroll-effect-ionic1.vercel.app/src/components/header/test/condense/
  • https://ionic-framework-git-rou-12870-scroll-effect-ionic1.vercel.app/src/components/header/test/fade/

• scrollEffect prop

  • https://ionic-framework-git-rou-12870-scroll-effect-ionic1.vercel.app/src/components/header/test/scroll-effect-hide/
  • https://ionic-framework-git-rou-12870-scroll-effect-ionic1.vercel.app/src/components/header/test/scroll-effect-condense
  • https://ionic-framework-git-rou-12870-scroll-effect-ionic1.vercel.app/src/components/header/test/scroll-effect-fade

Footer

• Deprecated collapse prop

  • https://ionic-framework-git-rou-12870-scroll-effect-ionic1.vercel.app/src/components/footer/test/fade/

• scrollEffect prop

  • https://ionic-framework-git-rou-12870-scroll-effect-ionic1.vercel.app/src/components/footer/test/scroll-effect-hide/
  • https://ionic-framework-git-rou-12870-scroll-effect-ionic1.vercel.app/src/components/footer/test/scroll-effect-fade/

Tab Bar

• https://ionic-framework-git-rou-12870-scroll-effect-ionic1.vercel.app/src/components/tab-bar/test/scroll-effect-hide-compact?ionic:theme=ionic
• https://ionic-framework-git-rou-12870-scroll-effect-ionic1.vercel.app/src/components/tab-bar/test/scroll-effect-hide-footer-priority/
• https://ionic-framework-git-rou-12870-scroll-effect-ionic1.vercel.app/src/components/tab-bar/test/scroll-effect-hide/

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Jul 23, 2026 7:15pm

[ShaneK]

Hey, great work on this! I highlighted a few issues I found, some of them aren't as important as others, but still

[OS-susmitabhowmik]

Hey, I think we're finally getting close to getting this one wrapped up! Just a few more issues I noticed, but we're so close!

@ShaneK Thanks for all the help on this! I addressed your latest round of comments and also noticed that some tests were using the deprecated collapse property so I updated these to use scrollEffect. Could you please take another look?

[ShaneK]

Thanks for those changes, we're looking amazing! Just a few remaining things I noticed and I think we're done after this!

[ShaneK]

Looks good to me! Great work 🎉