Navigation Menu
A site nav bar with mega-menu panels and hover intent — a short open delay so crossing the bar does not flash panels, and a longer close delay so the panel is reachable.
src/components/ui/navigation-menu.tsxAbout
From the component's own source, where it was written.
A site navigation bar with mega-menu panels.
Hover intent, not raw hover. Opening the instant the pointer touches a trigger makes a nav bar flash panels as you cross it on the way somewhere else, and closing the instant it leaves makes the panel impossible to reach — the pointer has to cross the gap between trigger and panel. A short open delay and a longer close delay fix both.
Once any panel is open, switching between triggers is immediate. The delay exists to decide whether you meant to open the menu at all; once that is settled, waiting again is just latency.
Keyboard users get click-to-open, and the panel is reachable by Tab because it follows its trigger in the DOM.
Install
npx astralyx-ui add navigation-menu
Usage
import { NavigationMenu } from '@/components/ui/navigation-menu'
<NavigationMenu entries={entries} />Composer
Change the props and the source below follows.
<NavigationMenu entries={entries} openDelay={150} />Examples
Mega menu
<NavigationMenu entries={entries} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.