Gallery
See what others have created
cooling_shopkeeper
@cooling_shopkeeper
Collapsing Large-Title Bar
Design an iOS-style navigation header that starts as a large title at the top of a scroll view and collapses into a compact inline title as content moves upward.
The same screen has to work in both moments: the expanded state feels roomy and anchored to the page, while the collapsed state frees space and keeps the title available during reading or browsing.
Treat the transition as part of the experience, not a separate screen. The title, back affordance, and any trailing actions should shift position and emphasis as the header compresses.
Make the scroll relationship feel intentional. The header should react to content movement in a way that matches native iOS navigation behavior, with no jump between states.
What to deliver
- Design the expanded large-title header at the top of the scroll view
- Design the collapsed inline navigation bar state
- Show the transition between the two states as the page scrolls
- Place back and trailing actions so they remain usable in both states
- Define spacing, typography, and safe-area behavior for the header
Use a title that is long enough to expose the collapse behavior clearly; short titles can make the transition look broken or unfinished.