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), Header Width (matching the header bar it sits in) 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. A header-width megamenu matches the width of the header row it sits in and opens directly below it, so it lines up with the bar even when that row is narrower than the page container. Nectar header templates and theme headers using a header element or banner role are supported. Outside a recognized header, Header Width falls back to the viewport width. Positioning recalculates on resize, hover, and keyboard focus.

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.