---
title: Mega menu
summary: Turn an item of the header menu into a wide panel with columns of links and a promotion.
url: https://lanternwp.com/docs/mega-menu
updated: 2026-10-08
---

# Mega menu

A mega menu opens a wide panel under one item of your header menu: columns of links, each with its heading, and a promotion with a photo. It is an ordinary Navigation menu with two CSS classes, so you edit it like any other menu, and it works without LanternWP Companion.

![The Common Goods header with the Clothing mega menu open: three columns of links and a promotion](images/mega-menu.jpg)

## Add the columns

1. Go to **Appearance → Editor → Navigation** and open your header menu.
2. Give the item that opens the panel a submenu, for example **Clothing**.
3. Inside it, add one submenu for each column. Its label becomes the column's heading.
4. Select the top item. In its block settings, open **Advanced** and type `lanternwp-mega` in **Additional CSS class(es)**.
5. Select **Save**.

## Add a promotion

Add a link to a product, a post or a category inside the panel and give it the class `lanternwp-mega-promo`. The panel shows it as a promotion with the image of what it links to. The link's description becomes the line above its title.

## On phones

The columns follow the item inside the phone menu, one under another.