feat(tab-bar): add hideOnScroll for ionic theme

[joselrio]

Issue number: internal

---

This pull request introduces a new feature to the ion-tab-bar component that allows it to automatically hide when the user scrolls down and reappear when scrolling up.

What is the current behavior?

• Missing hide-on-scroll feature

What is the new behavior?

• New Hide-on-Scroll Feature for Tab Bar

What was done?

Component Logic & API:

• Added a new hideOnScroll property to ion-tab-bar, enabling automatic hide/show behavior based on scroll direction when the theme is "ionic" and expand is "compact". The scroll listener is attached to the nearest ion-content for scroll detection. (core/src/components/tab-bar/tab-bar.tsx, core/api.txt) [1] [2] [3] [4] [5] [6]

Styling:

• Updated SCSS to handle the hide/show animation and positioning for the tab bar when hideOnScroll is enabled, including transitions and transforms for both bottom and top slots. (core/src/components/tab-bar/tab-bar.ionic.scss) [1] [2]

Framework Integrations:

• Updated Angular proxies to support the new hideOnScroll input, ensuring compatibility with Angular apps. (packages/angular/src/directives/proxies.ts, packages/angular/standalone/src/directives/proxies.ts) [1] [2]

Testing & Documentation:

• Added a new test page demonstrating the hide-on-scroll behavior, along with usage requirements and visual confirmation. (core/src/components/tab-bar/test/hide-on-scroll/index.html)

Does this introduce a breaking change?

• Yes
• No

Other information

• This prop will only affect Ionic theme;
• ion-tab-bar expand property must be set to compact;
• It should be used inside an ion-footer;

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Apr 21, 2026 11:10am

[thetaPC]

I've updated the PR title to match the standards specifically the scope, please review the format.