Table of contents8
Last year I watched a store owner try to fit forty product categories into a standard dropdown menu. It was a nightmare. Visitors hovered over “Shop,” and a mile-long list of tiny links dropped down, ran off the bottom of the screen, and disappeared if your mouse wobbled one pixel to the left. He told me his bounce rate on mobile was brutal. “People can’t find anything,” he said. He was right. His menu was a list. What he needed was a map.
I am Rizky Pratama, and I build navigation systems for content-heavy WordPress sites. A mega menu is that map: a wide panel that opens from your navigation and shows your important links organized in columns, sometimes with descriptions or featured links, instead of one endless list. This guide teaches you to build one using only WordPress core blocks, inside the Site Editor, with no code. I will also be honest about where core blocks reach their limit, because you deserve that honesty before you start.
If you are afraid mega menus require a developer or an expensive add-on, here is the truth: the core Navigation block can build a genuinely useful mega menu if you structure it well. That is the fear I want to remove. Here is my exact promise: this guide walks you through planning your menu like an information architect, building multi-column dropdown panels with the Navigation block, styling them with block settings, and making them work on phones, all with core blocks. If your site has enough content that a simple menu no longer fits, this guide is for you. Let’s turn that list into a map.
One honest note up front: WordPress core does not have a one-click mega menu button. What it has is a flexible Navigation block plus the full Site Editor, and with the right structure those two build a mega menu that covers most sites’ needs. If you later need image-heavy panels or product carousels inside menus, that is beyond core’s comfort zone. But for organized, multi-column link panels, which is what most sites actually need, core blocks do the job well.
What You Will Learn
- Plan your menu structure before touching a single block
- Build multi-column dropdown panels with the Navigation block
- Organize dozens of links so visitors actually find them
- Style your mega menu with block settings alone
- Make the menu work beautifully on mobile
- Test your menu like a first-time visitor
Ready? Let’s get started.
Plan First: A Mega Menu Is an Information Problem, Not a Design Problem
My first mega menu failed because I skipped this step. I built a gorgeous wide panel with four columns of links, published it, and watched visitors ignore it completely. The problem was not the design. The problem was that I had organized the links the way I thought about the site, not the way visitors think. A menu organized by your internal departments is a menu nobody can use.
Before opening the editor, grab a piece of paper and list every link your menu must contain. Then group them the way a visitor would. A store groups by what people shop for, not by warehouse location. A blog groups by topics readers care about, not by publication date. Aim for three to five top-level groups, each with four to eight links. If a group has fifteen links, split it. If a group has two links, merge it somewhere else.
Now decide what each column in your mega panel will hold. I sketch this as boxes on paper: Column 1 gets the main categories, Column 2 gets popular subtopics, Column 3 gets featured or seasonal links, Column 4 gets help links like Contact and FAQ. Every column needs a short heading that tells visitors what they are looking at. “By Topic,” “Popular Right Now,” “Need Help?” These headings are the signposts that make a mega menu feel organized instead of overwhelming.
Bonus Tip: Put your analytics to work here. Your most-visited pages deserve the most prominent menu positions. I once moved a client’s most popular guide from the third column to the first, and its traffic from navigation doubled in a month. The menu is prime real estate. Do not decorate it with links nobody clicks while hiding the pages everyone wants.
Plan in hand, it is time to open the Site Editor and build.
Build the Structure: Navigation Block and Nested Submenus
Everything happens in the Site Editor, because your menu lives in your header template, not in a page. Go to Appearance, then Editor, and open your header template part. If your theme uses the classic Customizer menus instead, consider switching to a block theme for this project. The techniques here assume the modern Site Editor, which is where WordPress navigation now lives.
Add a Navigation block to your header if one is not there already. Click it and choose Start blank so you build the structure yourself instead of inheriting an auto-generated list of pages. Now add your top-level items one by one: Home, Topics, Resources, About. These are the labels visitors see in the header bar. Keep them short. One or two words each.
Here is where the mega menu takes shape. Select a top-level item and add submenu items beneath it. Each submenu item becomes one link in the dropdown panel. For a mega menu feel, add enough submenu items to fill columns: eight to twelve links under a major item is typical. Then organize them with descriptions. The Navigation Link block lets you add a short description under each link label. A link that says “Tutorials” with the description “Step-by-step guides for beginners” is infinitely more useful than a bare link. Descriptions are the secret ingredient that makes core-block mega menus feel premium.
To create the column effect, group your submenu items logically and use the block settings to style the submenu as a wide panel rather than a narrow list. In the Navigation block settings, look at the submenu options: you can control the layout direction, spacing, and width. Set generous padding and let the submenu stretch wider than a standard dropdown. Then, within the submenu, the items flow into a multi-column arrangement. It will not be pixel-perfect columns like a custom-coded panel, but organized groups with clear headings read as columns to visitors, which is what matters.
For column headings inside the panel, add submenu items with no link destination, or use short descriptive labels as non-clickable headings. I label them exactly as I sketched on paper: “By Topic,” “Popular Right Now,” “Need Help?” Then the real links sit beneath each heading. Headings turn a wall of links into a scannable map. Without them, even a well-organized panel feels like a phone book.
Note: Take your time with the List View while building this. A mega menu is a deeply nested structure: Navigation block, top-level items, submenu items, descriptions. List View shows you the nesting as an outline and lets you drag items between levels precisely. Trying to manage this nesting by clicking blocks on the canvas is how items end up at the wrong level. List View is your friend here. The complete guide to the block editor covers List View tricks that make complex structures like this manageable.
Structure built. Now make it look like it belongs on your site.
Style It: Colors, Typography, and Spacing With Block Settings
A mega menu that looks like a default dropdown wastes its potential. The panel is large and prominent, so it needs to feel intentional. The good news is that every styling control you need lives in the block settings sidebar. No custom CSS required for a clean, professional result.
Start with the panel background. Select the Navigation block, open the submenu settings, and set a background color that contrasts with your page but matches your brand. I usually use a very light neutral or a deep brand color with light text. The key word is contrast: menu text must be effortlessly readable. If visitors squint, you have failed, no matter how pretty the panel looks.
Next, typography. Set the link text slightly smaller than your body text. Menu links are scanned, not read, and compact text lets you fit more links without scrolling. Make your column headings bold and slightly larger than the links beneath them. This size contrast creates the visual hierarchy that guides eyes through the panel. Keep it to your theme’s existing font family. A menu in a random third font looks like a mistake.
Then spacing. Generous padding inside the panel and comfortable gaps between links are what separate a premium-feeling menu from a cramped one. I aim for enough breathing room that each link is an easy tap target on touchscreens. Cramped menus cause mis-taps, and mis-taps cause frustration. Spacing is usability, not decoration.
Finally, the hover and active states. In the block settings, define what a link looks like on hover: an underline, a color shift, a subtle background. Visitors need feedback that the thing under their cursor is clickable. This sounds obvious, but I have audited menus where hover did nothing, and users hesitated on every link. Small feedback, big confidence.
Bonus Tip: Style your menu once, then save the configured Navigation block as a synced pattern. If you ever need the same menu structure in a footer or a secondary header, you insert the pattern instead of rebuilding. One edit updates everywhere. This is one of my favorite time-savers, and the block patterns workflow guide shows the full method.
Desktop styled. Now the part everyone forgets until complaints arrive: mobile.
Mobile: Where Mega Menus Go to Die (Unless You Plan for It)
Here is the hard truth about mega menus: the wide multi-column panel you just built does not fit on a phone. It cannot. A four-column panel on a 375-pixel screen is a cruel joke. This is where most DIY mega menus fall apart, and it is why mobile planning is a full section in this guide, not an afterthought.
The Navigation block handles this gracefully if you let it. In the block settings, find the mobile menu option and set it to show the overlay menu on small screens. Instead of your wide panel, phone visitors get a full-screen menu that opens from the hamburger icon. Inside that overlay, your submenu items appear as expandable sections. The column headings you built become section dividers. The structure you planned on paper translates directly: groups become expandable sections, links stay links.
Test this on a real phone, not just the editor preview. Open your site on your phone, tap the hamburger icon, and try to reach a deep link with your thumb. Ask yourself three questions. One: can I reach every important link within two taps? Two: are the tap targets big enough that I never mis-tap? Three: does the menu close easily when I am done? If any answer is no, restructure. On mobile, fewer top-level items with clear expandable sections always beats a faithful reproduction of the desktop panel.
Note: Do not try to force the desktop mega panel to work on phones by shrinking it. I have seen this attempted with custom code, and the result is always tiny unreadable text that visitors pinch-zoom in frustration. The overlay menu exists for a reason. Use it. Different screens deserve different presentations of the same structure.
Mobile handled. Now let’s make sure the menu actually works for everyone, including keyboard users.
Accessibility and Testing: The Unsexy Work That Matters Most
I will be blunt: an inaccessible menu is a broken menu. Some of your visitors navigate with keyboards, not mice. Some use screen readers. If your mega panel only opens on mouse hover and traps keyboard users, you have built a beautiful wall. The core Navigation block handles keyboard interaction reasonably, but you must verify it on your specific build.
Test with your keyboard alone. Tab through your header. The top-level items should receive focus visibly. Pressing Enter or Space on an item with a submenu should open the panel. You should be able to arrow through the links and press Escape to close the panel. If any of this fails, revisit your structure. A menu that works for keyboard users works better for everyone, because the same clarity that helps assistive technology helps hurried visitors too.
Then run my five-second visitor test. Show your site to someone who has never seen it, and ask them to find a specific page using only the menu. Watch silently. Do not help. Where they hesitate, your labels or grouping need work. Where they succeed instantly, your planning paid off. I run this test with three people before calling any menu done. It takes thirty minutes and reveals problems no amount of staring at my own work ever would.
Finally, check performance. Mega menus add markup to every page load because the header renders everywhere. Keep your total link count sane. A panel with sixty links is not a menu, it is a sitemap wearing a costume. If your menu grows past forty links, that is a signal to simplify your site structure, not to build a bigger panel. Lean menus load fast, and the speed comparison guide explains why block-built navigation keeps your scores healthy.
Bonus Tip: Revisit your menu quarterly. Sites grow, priorities shift, and menus accumulate dead links like attics accumulate boxes. Every three months, open your analytics, find the menu links nobody clicks, and remove or replace them. A menu is a living thing. Prune it.
You now have a complete mega menu built with core blocks. Let me answer the questions I get every time.
Frequently Asked Questions
Can I add images inside a core-block mega menu? The core Navigation block is built for links, not rich media panels. You can use link descriptions to add helpful text, which covers most real needs. If your design truly requires images or product cards inside the menu panel, that is beyond what core blocks do comfortably, and you should reconsider whether the menu is the right place for that content.
How many links is too many in a mega menu? As a rule, keep it under forty total links across all panels. Beyond that, visitors stop scanning and start skimming past the whole thing. If you need more, your site architecture needs simplifying first. The menu should reflect a clean structure, not compensate for a messy one.
Will my mega menu work with my current theme? These techniques need a block theme with the Site Editor, where the Navigation block lives in the header template. If you use a classic theme with Customizer menus, the core block approach does not apply the same way. Moving to a block theme is worth it for this and many other reasons.
Do mega menus hurt SEO? No, when built with real links. Search engines follow the links in your Navigation block like any other links, which actually helps them discover your important pages. What hurts is hiding key pages so deep that neither visitors nor crawlers find them. A well-structured mega menu does the opposite: it surfaces your best content.
Should every site have a mega menu? No. If your site has fewer than fifteen pages, a simple menu is better. Mega menus earn their complexity on content-rich sites: stores with many categories, blogs with many topics, documentation sites, universities. Do not build one because it looks impressive. Build one because your visitors are lost without it.
Final Thoughts
That store owner with the mile-long dropdown? We replaced it with a planned mega menu built exactly the way this guide describes. Three columns, clear headings, descriptions under every link, and a clean mobile overlay. His customers stopped emailing him asking where things were. That is the real metric for a menu: silence. When nobody complains about navigation, navigation is working.
A mega menu is not a design flex. It is a kindness to your visitors. Plan it on paper, build it with the Navigation block, style it with block settings, respect mobile, and test it with real humans. No code, no add-ons, just thoughtful structure.
Sketch your menu structure today, even if you do not build it yet. That paper sketch is the hardest part, and once it exists, the blocks are the easy part. When your mega menu goes live, tell me about it in the comments. I want to hear what your visitors stopped complaining about.
