How to Create a Mega Menu in Webflow

Learn how to build a mega menu in Webflow without plugins, using native interactions and CSS.

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to build a mega menu in Webflow without a plugin, using only native interactions and CSS.

Example

Gemeos

Services ▼

Design

BrandingComplete visual identity

Web DesignCustom UI/UX

Art DirectionCreative vision

Development

Webflow developmentFrom mockup to live site

Webflow migrationWordPress → Webflow

MaintenanceOngoing support

Case studies

Contact

Element	CSS class	Role
Parent nav item	nav-item	Trigger element for the mega menu
Mega menu container	mega-menu	The panel that opens
Inner columns	mega-menu-col	Columns for links or content

1. Create the mega menu structure

In your Navbar, add a Div with the class nav-item containing the trigger link. Inside it, add a second Div with the class mega-menu, which will be the panel. Set mega-menu to display: none by default. Position it absolute relative to the nav-item (relative).

2. Organize the content into columns

Inside the mega-menu, create several Divs with the class mega-menu-col and set them to display: flex. Add your links, category titles, and optionally images or icons.

3. Add Webflow interactions

On the nav-item element, create an interaction:

Trigger: Mouse over (Hover in)
Action: Display mega-menu → block or flex
Hover out: Display mega-menu → none with a 200ms delay

4. Handle closing when hovering over the mega menu

Add the same "Mouse over" interaction to the mega-menu itself so it doesn't close when the mouse moves from the item to the panel. Hover out on the mega-menu: display none.

5. Close the mega menu when clicking outside

Add this script in the <body> to close the mega menu if the user clicks anywhere else on the page.

// Close the mega menu if you click outside
document.addEventListener('click', function(e) {
  document.querySelectorAll('.mega-menu').forEach(function(menu) {
    if (!menu.closest('.nav-item').contains(e.target)) {
      menu.style.display = 'none';
    }
  });
});

good to know

The 200ms delay on Hover out is crucial: without it, the mega menu closes before the mouse reaches the panel. For a smoother result, use a CSS opacity/transform transition rather than display none/block: the mega menu stays in the flow but becomes invisible, which avoids layout jumps.

Conclusion

The mega menu improves navigation on sites with lots of pages. Use cases:

Ecommerce sites with multiple product categories
Corporate sites with many sections
SaaS with multiple products or features

How to Create a Mega Menu in Webflow

Example

1. Create the mega menu structure

2. Organize the content into columns

3. Add Webflow interactions

4. Handle closing when hovering over the mega menu

5. Close the mega menu when clicking outside

The 200ms delay on Hover out is crucial: without it, the mega menu closes before the mouse reaches the panel. For a smoother result, use a CSS opacity/transform transition rather than display none/block: the mega menu stays in the flow but becomes invisible, which avoids layout jumps.

Conclusion

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials