Navigation is the backbone of any successful website. It's how visitors find what they're looking for, and a well-organized menu can dramatically improve user experience. Today, we're diving deep into one of UENI's most powerful new features: the Mega Menu.
What is a Mega Menu?
A Mega Menu is a large, expandable dropdown panel that appears when visitors hover over or click on a main navigation item. Unlike traditional dropdowns that show a simple list, Mega Menus can display multiple columns of links, images, icons, and even promotional content—all at once. Think of it as a storefront window for your website's content hierarchy.
Part 1: Activating Your Mega Menu
Getting started with Mega Menu is straightforward. Follow this path in your UENI editor:
Navigate to Pages in your website editor
Select your Home page
Click on the Header section
Choose Menu to access Menu settings
Look for the "Type of Menu" dropdown—this is where the magic begins
You'll see four options: Simple, Dropdown, Mega Menu, and Hamburger. Select Mega Menu, and a world of customization options unfolds before you.
Part 2: Core Menu Behavior Settings
Once you've selected Mega Menu, you'll immediately see two critical display options:
List View vs. Cascading
List View displays all subitems and any nested items beneath them simultaneously. Perfect for websites with comprehensive, multi-level navigation where visitors need to see everything at once.
Cascading shows only the next level of subitems until a selection is made, then reveals the subsequent level. This creates a cleaner, progressive disclosure experience—ideal for deeper site architectures.
Essential Menu Toggles
Below these options, you'll find several toggle switches that control fundamental menu behavior:
Sticky Menu: Keeps your navigation visible as visitors scroll
Menu With Logo in line: Aligns your logo within the menu bar itself
Split menu items with center logo: Creates a balanced, symmetrical navigation layout
Add breadcrumbs on each page: Helps visitors understand their current location
Overlay under menu: Adds a semi-transparent layer beneath your menu. Use the accompanying slider to adjust opacity from subtle to pronounced
Dropdown Trigger
Decide exactly when your Mega Menu appears:
Hover: Classic behavior—menu appears when mouse passes over
On-Click: More controlled—menu appears only when clicked
Part 3: The Design Menu - Main Menu Tab
Click "Design Menu" to access the styling controls. You'll find two tabs: Main Menu and Mega Menu. Let's start with Main Menu.
Positioning & Spacing
Menu Position: Place your menu at the top, middle, or bottom relative to your website header
Padding Controls: Add breathing room with top padding, bottom padding, and spacing between individual menu items
Background & Color
Select your menu's Background Color and adjust its opacity for subtle transparency effects.
Hover Styles
Choose how menu items respond to interaction:
Underline
Set underline thickness
Choose hover color
Highlight
Adjust corner radius for rounded or squared highlights
Select hover color
Color
Simple color change on hover
Typography & Alignment
Fine-tune your menu's text appearance:
Font Size: Scale to your preference
Format: Apply bold, italic, or All Caps styling
Alignment: Left, center, or right justification
Menu Font Color: Set the default text color
Border Controls
Toggle borders on or off, then customize:
Border thickness
Border style (top, bottom, or both sides)
Border color
Drop Shadow
Add depth with customizable shadows:
Toggle on/off
Shadow distance
Spread
Blur
Shadow color
Shadow opacity
Part 4: The Mega Menu Tab - Advanced Styling
This is where your Mega Menu truly comes to life.
Item Dimensions
Use the sliders to control:
Item Width: The horizontal space allocated to each subitem column
Item Height: The vertical space for each subitem
Mega Menu Hover Styles
Apply distinct hover effects specifically to Mega Menu items, with the same Underline, Highlight, and Color options available in Main Menu.
Dividers & Typography
Toggle dividers between menu items on/off and set their color
Select font size, format, and color specifically for Mega Menu content
Adjust Icon Size (if you've assigned icons to subitems)
Set Image Size (if you've added images to subitems)
Choose Background Color for the Mega Menu panel
The Promo Feature
This is the crown jewel of Mega Menus. Add promotional content to the second level of your Mega Menu:
Select an Image from your Media Library
Set Dimensions: Define width and height
Alignment: Position the promo left or right
Add a Promo Caption: Compelling text that drives action
Choose Link Destination:
Open Page URL (external links)
Page (internal website pages)
Call (phone number)
WhatsApp (WhatsApp number)
Send Message (activates your website's contact form)
Open in New Tab: Toggle this option for external links
Caption Color: Ensure readability and brand consistency
Part 5: Managing Menu Navigation Items
Back in the main Menu settings, below all design options, you'll find the Menu Navigation section. This is your command center for menu content.
Reordering Items
UENI makes reorganization intuitive. Simply click, hold, and drag any menu item to your desired position. Release to drop it into place.
Individual Item Controls
Each menu item displays three vertical dots (⋮) on the right side. Click to reveal:
Edit: Modify the item's title and behavior
Hide From Menu: Temporarily remove without deleting—perfect for seasonal content
Delete: Permanently remove the item
Adding New Menu Items
Click "Add Menu Item" to create custom navigation links.
Editing Menu Item Details
When you select Edit, customize:
Item Title: The visible text visitors will see
Link To: Choose from multiple destination types:
Specific Page URL (internal or external)
Another page within your website
Phone number (click-to-call)
WhatsApp number
Website contact form
Specific Product or Service from your catalog
Open in New Tab: Enable this checkbox for links that should preserve your website in the original tab
Best Practices for Mega Menu Success
Don't overwhelm: Even with expanded space, maintain clear organization
Use visuals strategically: Icons and images guide the eye and communicate faster than text
Test both hover and click behaviors: Consider your audience's device preferences
Keep promos relevant: Use the promo space for high-priority content, special offers, or new products
Mobile responsiveness: Always preview how your Mega Menu behaves on smaller screens
Conclusion
The Mega Menu transforms your website navigation from a simple directory into an immersive browsing experience. With UENI's comprehensive customization options—from layout and typography to promotional content integration—you have complete creative control.
Whether you're running an e-commerce store with hundreds of products, a service business with multiple offerings, or a content-rich blog, the Mega Menu adapts to your needs. Take time to experiment with different configurations, preview your changes, and find the perfect balance of form and function for your unique website.
Ready to elevate your navigation? Head to your UENI editor and start building your Mega Menu today.