Skip to main content

6 posts tagged with "Header"

The site header, off-canvas drawer and chrome

View All Tags

Why menu item styles split into a base treatment plus stackable modifiers

· 4 min read
Jon-Michael Lastimosa
Senior Web Developer

The question: The Menu Item Style control offered ten treatments, but Box and Highlight rendered from the identical fill rule, Pill was just Box with a rounder radius, and Fade only changed the resting opacity — something that would happily sit on top of any other style. We wanted to add premium treatments (a gliding indicator, a gradient underline, a marker swipe). Do we keep appending tiles to one flat picker, or is the list itself the wrong shape?

Why can't a header be transparent AND shrink its logo on scroll? Splitting header behavior into two composable states.

· 4 min read
Jon-Michael Lastimosa
Senior Web Developer

The question: a user wants a header that is transparent over the hero and shrinks its logo once you scroll. Today they can't — "Transparent overlay" and "Sticky + shrink" are two different values of the same Header Behavior dropdown. Why is a header's behavior a single choice at all, and how should we organize it so every setup is possible?