97 of 300

Navigation 97

Morphing dropdown

One card that moves and changes size between the menus. The arrow and the marker behind the buttons follow, and the content comes in from the side you moved from.

Known from Stripe and Radix NavigationMenu

  • When it fitsMenus with very different content and size.
  • PitfallsWith a spring or a slow bezier the card overshoots. If the content fades slowly, the two menus overlap.
  • How to make it betterDrive position, width, height, arrow and marker with the same lag, and set the opacity almost at once.