Add a mega menu with hover interactions — without touching code

Hover over "Products" on any big SaaS site and a wide, multi-column panel fans open — organized links, maybe a promo card. That pattern is called a mega menu, and it usually signals a serious front-end budget. On Aglyn it takes about a minute, and it works on every plan, including Free.

Drop in the element

In the besigner, open the element picker's Navigation group and insert a Mega Menu into your header. You get a nav item with a starter panel of three link columns.

The panel is an ordinary canvas slot. Fill the columns with screen links — they store the target screen's id, not its URL, so renaming a page never breaks the menu. Add headings, more columns, an image, a promo card. Set the panel width: fit-content, wide, or edge-to-edge.

On the canvas the menu behaves like it will live: closed until you select it, expanded in place while you edit, collapsed again when you click away.

Wire the hover — one interaction

Clicking the nav item already toggles the panel with zero configuration. For the classic hover behavior:

1. Select the Mega Menu element.
2. Choose Add interaction.
3. Trigger: When hovered. Action: Open a menu. Frequency: Every time.
4. Save.

That is the entire wiring. The panel opens on mouse-over and closes itself when the pointer leaves — the close is handled for you, with a grace period so the cursor can travel from the nav item into the panel.

Under the hood, every menu listens on a small command bus keyed to its element, and the interaction dispatches an open command. Click-toggle, hover, and any other element that targets the menu all speak the same bus, so they compose instead of fighting.

Basic interactions are never paywalled

Menus, drawers, show/hide, class toggles — pure in-page choreography with no server cost — run on every plan. Only the automations engine (server actions, analytics events, custom code) sits on paid tiers. A polished nav shouldn't be a premium feature.

Finish the pattern

Pair the mega menu with the Mobile Nav preset — a hamburger button and slide-in drawer, pre-wired, hidden on desktop — and your navigation works everywhere. See it live on our demo site: hover Explore at northwind-coffee.aglyn.app.