79 of 300

Navigation 79

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.