Navigation 08
Header that becomes a pill
At the top of the page the navigation is an ordinary header. When you scroll, it contracts into a floating pill of glass.
Common on product sites in recent years
Plan less, make more.
A tool for teams who would rather build than hold meetings about building.
"We moved the whole team over in an afternoon, and nobody has missed the old system."
BatonTry for free
- One headerIt is the same element all the way. Width, corners, glass and shadow follow one spring from 0 to 1.
- Glass over the contentThe pill blurs whatever scrolls beneath it, so the text is always readable.
- How far you areA thin line at the bottom of the pill shows how far down the page you are.