How to create mega menus in WordPress

Group related links before opening WordPress. Keep the top level short, then decide which groups will become columns, such as Products, Services and Resources. Each column should have a clear heading and a manageable number of links.

A mega menu is useful when visitors need to scan several related choices. If you only have a few links, a normal dropdown is usually clearer and easier to maintain.

On a classic theme, go to Appearance → Menus, create or select a menu, add pages, categories or custom links, and assign it to the theme’s primary menu location. WordPress lets you reorder items by dragging them.

On a block theme, open Appearance → Editor, select the Navigation block in the header or template, and add the required page links or custom links. Save the template after editing.

Place the links that belong under a top-level item beneath it and drag them slightly to the right. In the Navigation block, you can select a menu item and use Add submenu, or create a Submenu block and add links inside it. In classic menus, the indentation shows the parent-child relationship.

Use a real landing page for the parent item when it should be clickable. If it is only a column label, use a custom link with a suitable URL or the option provided by your theme or menu tool. Do not leave important content reachable only through hover.

WordPress core gives you nested dropdowns, not a universal multi-column mega-menu layout. A manual mega menu is possible only when your theme already supports columns, or when you add custom CSS and possibly theme code to change the submenu layout.

This route is fine for a small, stable menu and a developer-maintained site. Its drawbacks are theme-specific markup, fragile CSS, limited controls for icons and images, and extra work for keyboard and mobile behaviour. A theme update can also change the selectors and break the layout, so keep custom changes in a child theme or the site’s additional CSS area rather than editing the parent theme.

Test the menu at desktop, tablet and phone widths. A desktop hover menu must still open by keyboard and by touch, and every important destination should have a visible focus state. On mobile, check that the menu can be opened, closed and scrolled without the submenu covering the page or trapping the user.

Also check the mobile header separately. Some themes use a different Navigation block or menu location on small screens, so a menu that works on desktop may not appear on mobile. Test in a private browser window after clearing any page or browser cache.

For a genuine multi-column layout, install and activate a mega-menu plugin, then enable it for the menu location used by your header. Add the same top-level items and child links, open the mega-menu settings for the relevant parent item, and arrange the children into columns or rows. Max Mega Menu Pro is a suitable option when you need drag-and-drop layout controls, responsive behaviour, icons, images or WooCommerce categories.

Use its styling controls to match your theme, set the mobile menu behaviour, and check the result on a staging site before publishing. Its documentation describes assigning a menu location, turning a top-level item into a mega menu, arranging sub-items and widgets in rows and columns, and configuring mobile behaviour.