Loading…
Live component · try it
Premiumnav · hover · light
Mega Menu Nav
A navigation bar whose 'Product' and 'Resources' items open wide panels on hover: the panel height morphs between the two instead of closing and reopening, and a small caret slides along the bar to point at the active item. Keyboard users open panels with Enter and close with Escape.
The mechanic
On hover or focus of a `[data-menu]` trigger the script shows the matching `.group`, measures its `offsetHeight`, writes it to the panel's `height` (transition 0.35 s `cubic-bezier(.2,.8,.2,1)`), and moves the caret's `left` to the trigger centre. The panel first opens with a 6 px rise and opacity fade; leaving the whole nav for 120 ms closes it, so crossing the gap between bar and panel does not flicker. Triggers also wait 120 ms of hover intent before opening, so a pointer flying across the bar does not flash menus.
How to use it
From prompt to a block in your page.
- 01Try the component
The preview is the shipped element inside a neutral demo page. Hover, click, focus: the one interaction it is about is live.
- 02Pick a palette
Token sets re-tint it live. The prompt carries the one you chose.
- 03Pick your stack
A paste-in snippet, or a component for Next.js, React, Vue, Astro, WordPress, Shopify or Webflow.
- 04Copy the prompt
It quotes the markup, styles and script verbatim with the tokens and the rules that keep it self-contained.
- 05Mount it in your layout
It inherits your page's font and width; the tokens live on :root; several instances share one script.
