Mega menu with live preview
A dropdown with sections on the left and a card that changes to match the option you point at.
Settings
Code
<nav class="uv-nmg" aria-label="Main"><ul class="tb"><li class="dd"><button type="button" aria-expanded="false" aria-controls="uv-nmg-p">Products<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 10l5 5 5-5"/></svg></button><div class="pn" id="uv-nmg-p"><ul class="ls"><li style="--c:#6366f1"><a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/></svg><span><b>Analytics</b><small>Real-time dashboards</small></span></a></li><li style="--c:#f59e0b"><a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></svg><span><b>Automation</b><small>No-code workflows</small></span></a></li><li style="--c:#10b981"><a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l7.5 3v5.5c0 4.6-3.2 8.3-7.5 9.5-4.3-1.2-7.5-4.9-7.5-9.5V6z"/></svg><span><b>Security</b><small>Access and audit</small></span></a></li><li style="--c:#ec4899"><a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="3.5" width="7" height="7" rx="2"/><rect x="13.5" y="3.5" width="7" height="7" rx="2"/><rect x="3.5" y="13.5" width="7" height="7" rx="2"/><path d="M17 13.5v7M13.5 17h7"/></svg><span><b>Integrations</b><small>200+ apps</small></span></a></li></ul><div class="pv"><div class="cd" style="--c:#6366f1"><i></i><b>Analytics</b><span>Real-time dashboards. Try it free for 14 days.</span></div><div class="cd" style="--c:#f59e0b"><i></i><b>Automation</b><span>No-code workflows. Try it free for 14 days.</span></div><div class="cd" style="--c:#10b981"><i></i><b>Security</b><span>Access and audit. Try it free for 14 days.</span></div><div class="cd" style="--c:#ec4899"><i></i><b>Integrations</b><span>200+ apps. Try it free for 14 days.</span></div></div></div></li><li><a href="#">Pricing</a></li><li><a href="#">Customers</a></li></ul></nav>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Navigation
See all NavigationWhere to use it
SaaS sites and large shops use mega menus to explain what is inside each section before people click. This one opens from a compact top bar on hover or keyboard focus, lists four products with icons and one line descriptions, and shows a colored preview card on the right that switches to whichever item is hovered or focused.
The preview logic is pure CSS with :has, so it keeps working even if scripts are slow. A few lines of JavaScript only keep aria-expanded in sync and close the panel with Escape. Replace the cards with screenshots or promos and keep the same structure for every section.