⚡ SuperNav

SuperNav Live Demo

This demo runs on the original plugin frontend (mega-menu.js and mega-menu.css from SuperNav v2.4.0) — without WordPress. What you see here is exactly what the plugin renders on your website. Hover over the menu items.

Open on: Hover Click — matches the plugin's “Trigger” setting
https://your-website.com

What does the demo show?

Menu itemPanel typeFeatures shown
Featurescolumns (wide)Columns with icons, descriptions, badges, a colored column, sidebar groups, bottom links, CTA bar
SolutionscardsCard grid with icons and descriptions, sidebar
Servicefeatured-imageFeatured image on the left, support links, link columns on the right
ContentcontentFree HTML blocks in columns (calendars, forms etc. — shortcodes only run in WordPress)
🔍Search boxExpanding search (CSS class ksn-search on the menu item)

Keyboard: Esc closes open panels. Below 1024 px width the plugin switches to the mobile accordion.

The JSON configuration behind it

Each panel is configured in the menu editor with exactly this JSON — copy it into the JSON tester to experiment:

Features — columns
Features — sidebar
Features — CTA bar
Solutions — cards
Service — featured (featured-image)

Note: The demo uses the plugin's unmodified frontend files. Only WordPress-dependent features (shortcodes, user-role visibility, translation store, Google Maps block) are shown as placeholders.