Bar layout: Priority
The bar negotiates for room. Drag the width control at the bottom: the items fold into More one at a time, in a fixed order of importance, and the ones that stay slide into place.
ResizeObserver and FLIP animations
- WhyMost navigation bars have two states, desktop and menu button. This one has a state for every width, so nothing is hidden before it has to be.
- RiskThe order is an editorial decision, and More has to be easy to find.
- TechniqueResizeObserver, a measured width per element and FLIP animations with the Web Animations API. The fold order is Sign in, Company, Research, Developers, Pricing.
- Shelf
- Navigation and menus
- Group
- Navigation 79 of 116
- Theme
- Light and dark
- Live pointer
- 10 steps, until you take over