Mega Menu Panel — Free HTML CSS JS Navigation Snippet

When a site has more than a handful of destinations, a plain dropdown becomes a long, hard-to-scan list. The mega menu solves this: a full-width panel that drops from the navigation bar with links organised into a grid — each with an icon, title, and description — plus a featured promo panel to spotlight what is new. It is the navigation pattern used by Stripe, GitHub, Atlassian, and most large product sites. This component builds a complete mega menu in HTML, CSS, and vanilla JavaScript, with hover-intent open, click and keyboard support, and a data-driven panel that swaps content per top-level item.

One shared panel, swapped per menu

Rather than a separate dropdown per nav item, there is one .mmp-panel whose content is repainted when you open a different menu. A MENUS object holds the data for each top-level item ("products", "solutions") — an array of grid cells and a feature promo. Opening a menu calls paint(), which builds the cell grid and the featured panel from that data. This keeps the DOM light (one panel, not many) and makes the menu trivially extensible: add a key to MENUS and a trigger with a matching data-menu attribute.

The two-zone layout

The panel is a grid with a flexible multi-column link area on the left (1fr) and a fixed 260px feature panel on the right. The link area is itself a two-column grid of cells, each a flex row with a tinted icon tile (coloured from a --c custom property via color-mix), a bold title, and a muted description — the scannable, explained-links format that makes a mega menu more useful than a bare list. The feature panel is a gradient card with a tag, headline, and link, anchoring the eye and giving you a place to promote a launch or a guide.

Hover-intent open and close

Mega menus that open and slam shut on every stray mouse movement are infuriating. This one uses hover intent: entering a nav item opens its menu immediately, but leaving does not close instantly — a 160ms setTimeout delays the close, and that timer is cleared if the pointer enters the panel (or another trigger) in the meantime. So moving diagonally from the trigger down into the panel keeps it open, while genuinely leaving closes it after a brief grace period. This forgiving timing is the difference between a mega menu that feels smooth and one that feels hostile.

Click and keyboard too

The menu is not hover-only, which would exclude touch and keyboard users. Each trigger is also clickable — clicking toggles its menu open or closed — and the trigger uses stopPropagation so its click does not immediately hit the document handler that closes the menu on outside clicks. That outside-click handler uses e.composedPath().includes(nav) to reliably detect clicks outside the whole nav even as the panel's contents are repainted, and Escape closes the menu from anywhere. Triggers carry aria-haspopup and aria-expanded that flips with state.

The reveal animation and chevron

The panel starts hidden with opacity: 0, translateY(-10px), and pointer-events: none; opening transitions it to visible and nudges it down into place. Because pointer-events are off while closed, the invisible panel never blocks clicks on the page behind it. The active trigger recolours to the accent and its chevron rotates 180 degrees, so it is always clear which menu is open.

Customisation

Edit the MENUS object to define each panel's cells (icon path, colour, title, description) and feature promo (gradient, tag, headline, link). Add a top-level item by adding a <li data-menu="key"> trigger and a MENUS.key entry. Swap the #6366f1 accent and the feature gradients for your brand. On screens under 720px the panel becomes single-column and the grid stacks, so the same menu works on mobile (where you would typically trigger it by click).