A Mega Menu is a large dropdown panel that opens when visitors hover over or click a menu item. Unlike a simple list, it can show several columns of links, images, icons, and even a promotion at once. It's ideal for sites with lots of pages, products or services. Let's dive in!

Example Mega Menu with multiple columns of links on a UENI website

Step 1: Turn on the Mega Menu

In the UENI Editor, open Pages and select your Home page.
Click the Header section, then Menu.
In the Type of Menu dropdown, choose Mega Menu.

Type of Menu dropdown with Simple, Dropdown, Mega Menu and Hamburger options

Step 2: Set how the menu behaves

Display style

List View: shows all subitems and nested items at once. Great for sites with many levels.
Cascading: shows one level at a time as visitors click through, for a cleaner look.

Menu toggles

Sticky Menu: keeps the menu visible as visitors scroll.
Menu With Logo in line: places your logo in the menu bar.
Split menu items with center logo: centers your logo with items on either side.
Add breadcrumbs on each page: shows visitors where they are.
Overlay under menu: adds a semi-transparent layer beneath the menu. Use the slider to set its strength.

Dropdown trigger

Choose whether the Mega Menu opens on Hover or On-Click.

Step 3: Style the main menu bar

Click Design Menu and open the Main Menu tab.

Design Menu button with Main Menu and Mega Menu tabs

Position and padding: place the menu at the top, middle or bottom of your header, and adjust spacing between items.
Background colour: choose a colour and opacity.
Hover styles: underline (set thickness and colour), highlight (set corner radius and colour), or a simple colour change.
Typography: font size, bold, italic, All Caps, alignment, and colour.
Border: thickness, style (top, bottom, or both), and colour.
Drop shadow: distance, spread, blur, colour and opacity.

Typography and alignment settings for the main menu

Step 4: Style the Mega Menu panel

Open the Mega Menu tab.

Item Width and Item Height: use the sliders to size each column and subitem.
Hover styles: the same underline, highlight, and colour options, just for Mega Menu items.
Dividers: turn dividers on and set their colour.
Typography: font size, format and colour for Mega Menu content.
Icon Size and Image Size: if your subitems have icons or images.
Background colour for the panel.

Item Width and Item Height sliders in the Mega Menu tab

Divider, typography, icon size and image size settings

Promo

Feature an offer in the second level of your Mega Menu. You can:

Choose an image from your Media Library and set its width, height and alignment.
Add a caption and caption colour.
Link it to a URL, a page, a phone number, WhatsApp or your contact form.
Open external links in a new tab.

Promo settings with image, caption and link destination options

Step 5: Manage your menu items

Back in Menu settings, scroll to Menu Navigation.

Reorder: click, hold and drag an item into place.
Item options: click the three dots next to an item to Edit, Hide From Menu or Delete it.
Add Menu Item: create a new link with a title and destination, such as a page, URL, phone number, WhatsApp, contact form, product or service. Tick Open in New Tab if needed.

Edit menu item panel with title and link destination

Note: Use Hide From Menu for seasonal content. It removes the item without deleting it.

Best practices

Keep it well organized, even with the extra space.
Use icons and images to guide the eye.
Test both hover and click to suit your visitors' devices.
Save the promo space for high-priority offers or new products.
Preview how your Mega Menu looks on mobile.

Final thoughts

Save your changes and preview your site. Congrats, your navigation is now a rich, easy-to-browse experience!

How do I create and customize the Mega Menu?