v1.0.0·Added in 1.0.0

A website's horizontal navigation: links and dropdown panels (lists or mega menus with a featured card) that morph through one shared panel.

Point at a menu and after a short delay its panel drops in; slide to the next one and the same panel glides under it, resizes to the new content and swaps it with a short slide in the direction you moved. A soft pill (or an underline) follows the pointer between triggers and rests on the section you are in. Click a link and the panel closes while the active item updates. With the keyboard, Tab reaches every trigger and link, ArrowLeft / ArrowRight move between triggers, Enter or Space opens a panel and Tab moves into it, ArrowDown opens it and lands on its first link, arrows move between its links and Escape closes it and returns focus. When the bar is narrower than the breakpoint (a phone) a hamburger takes the list's place: tap it and a full-screen menu slides in from the right with one accordion section per menu, 48px rows, the actions stacked full width at the bottom, and the section you are in already open. Choosing a link, tapping the close button, swiping the menu right or Escape closes it. Under reduced motion panels fade without sliding and resize at once.