---
title: Mega Menu
description: "The Mega Menu Block adds a menu item that opens a wide dropdown. The dropdown content is a \"Mega Menu\" template that you build with any blocks, such as columns of links, images, buttons, and text. Use it for sites…"
url: "https://shapekode.com/product/shapeblock/docs/mega-menu/"
updated: "2026-11-04"
category: "Header & Footer Block"
---

# Mega Menu

The Mega Menu Block adds a menu item that opens a wide dropdown. The dropdown content is a "Mega Menu" template that you build with any blocks, such as columns of links, images, buttons, and text.

Use it for sites with many pages or product categories, where a simple dropdown list is too long.

[How to Create a Mega Menu in WordPress Gutenberg | ShapeBlock Pro Mega Menu](https://www.youtube.com/embed/XIqOBx_A4tg?feature=oembed)

## How to Add a Mega Menu Block

Follow these steps to add and configure the Mega Menu Block in the Gutenberg editor.

### Step 1: Add the Mega Menu Block

1. Open the header template part in the Site Editor (Appearance > Editor), or any page with a Navigation block.
2. Select the Navigation block and click the **+** inside it to add a menu item.
3. Search for **Mega Menu** under ShapeBlock.
4. Insert the Mega Menu Block into the navigation.
5. Type the menu label on the block, then select it to access its settings in the right-hand sidebar.

![Mega Menu block in the block inserter](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-mega-menu-1.webp)

### Step 2: Configure the Mega Menu Block

Select the Mega Menu Block and open its settings in the right-hand sidebar. The available tabs are:

- **Settings:** Set the link, choose or create the dropdown content, and choose how it opens.
- **Layout:** Set the dropdown width.

![Mega Menu block selected in the editor with its settings sidebar](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-mega-menu-2.webp)

## Settings Tab

The Settings tab contains the **Mega Menu** panel.

### 1. Mega Menu

- **Link:** Optional. Enter the URL the menu label opens. Without a link, the label opens the dropdown.
- **Dropdown Content:** Choose the "Mega Menu" template shown in the dropdown.
- **Edit Mega Menu:** Edit the chosen template in a window, right in the editor.
- **Create a new Mega Menu:** Create a new, empty template and edit it.
- **Open On:** Choose **Hover (and click)** or **Click only**.

**Note:** The dropdown only shows on the site when its template is published. A draft template shows a warning in this panel.

![Mega Menu block, Settings tab in the sidebar](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-mega-menu-3.webp)

## Layout Tab

The Layout tab contains the **Layout** panel.

### 1. Layout

- **Dropdown Width:** Choose **Wide (site width)**, **Full screen width**, or **Custom**.
- **Width (px):** Set the dropdown width. This option appears with Custom.

![Mega Menu block, Layout tab in the sidebar](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/doc-mega-menu-4.webp)

**Live demo:** see the Mega Menu Block in action on the [Mega Menu demo page](https://shapekode.com/product/shapeblock/mega-menu/).