Skip to main content

Megamenu

Nectar Megamenu Block Icon

The Megamenu block turns a navigation dropdown into a rich content panel. Instead of a plain list of links, a menu item can reveal an entire global section or synced pattern — letting you build dropdowns with columns, images, featured content and promotions. It lives inside a navigation menu item's submenu.

Adding a Megamenu​

Megamenu is placed inside a navigation submenu item (core/navigation / core/navigation-submenu). If you insert it directly into a navigation block, it automatically wraps itself in a submenu so the structure stays valid. Build the dropdown's contents once as a global section or pattern, then point one or more menu items at it.

Megamenu Settings​

  • Size Render the dropdown Full Width (spanning the viewport) or Contained (a fixed maximum width).
  • Width Shown when Size is Contained — set the dropdown's width (in px or vw).
  • Source Choose what to display: a Global Section or a Pattern.
  • Selection Search and select the specific global section or pattern to show. Once selected, its title is displayed with Edit (open it in a new tab to make changes) and Change (pick a different source) actions.
Nectar Megamenu Settings

How it works​

On the front end the chosen section or pattern is rendered inside the dropdown. The block positions itself intelligently: a full-width megamenu stretches to the viewport edges, while a contained one centers on its menu item and shifts left or right automatically if it would overflow the screen. Positioning recalculates on resize and on hover.

Styling a megamenu​

The Megamenu block itself only controls what appears in the dropdown and its width. The dropdown's open animation (Fade / Morph), background, link colors and spacing are inherited from the hosting Navigation block's Dropdowns controls, so all of a header's dropdowns — plain submenus and megamenus alike — share a consistent look. Design the panel's contents by editing the linked global section or pattern.

  • Navigation — the menu that hosts your megamenu dropdowns, including the Dropdowns styling controls.
  • Header Builder — assemble the header these menus live in.