feat(core): scroll-hide header/footer when collapse="hide"

[joselrio]

Issue number: resolves #

---

This pull request adds a new "hide" collapse mode to ion-header and ion-footer, allowing the them to slide and fade out on scroll down and reappear on scroll up.
"hide" mode is supported across all themes (ios, md, and ionic).

What is the new behavior?

• Added "hide" as a valid value for the collapse prop on ion-footer, updating the API and documentation to reflect that it works across all themes and behaves like ion-header[collapse="hide"] [1] [2].
• Implemented the "hide" interaction in footer.tsx, including setup/teardown logic, theme checks, and state management to ensure smooth transitions and prevent redundant event listener registration [1] [2] [3] [4].

Styling and Animation

• Added SCSS rules for the new hide interaction in both footer.scss and content.scss, handling transitions, transforms, and layout adjustments for when the footer is hidden or shown, and coordinating with content scroll [1] [2].

Utilities

• Added createFooterHideInteraction utility in footer.utils.ts to encapsulate the logic for managing the hide/show state and related CSS classes/variables, leveraging a shared on-scroll interaction utility [1] [2].

Testing

• Introduced a comprehensive E2E test suite for the hide mode, covering behavior, accessibility attributes, CSS classes, and visual regressions to ensure robust and accessible implementation.

API Updates

• Updated core/api.txt to document the new "hide" option for both ion-footer and ion-header, ensuring API documentation is accurate [1] [2].

Does this introduce a breaking change?

• Yes
• No

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Jun 3, 2026 10:56am