Series: Theme Customization, Article 2 of 6
How to Customize WordPress Menus with Dropdowns, Icons, and Mega Menus
Your WordPress menu is the backbone of your site’s navigation. A well-structured menu keeps visitors oriented, reduces bounce rate, and helps search engines understand your site hierarchy. Yet most site owners accept the plain default. This guide walks you through every layer of menu customization, from basic dropdown setup to icon integration and full mega menu builds, so you can build navigation that actually serves your audience.
Why Your Default WordPress Menu Is Holding You Back
WordPress ships with a functional but bare-bones navigation system. Out of the box you get a flat list of links. That works for a five-page site, but the moment you add a blog, a product catalog, or a multi-service offering, a flat menu creates confusion. Visitors cannot find sub-sections without hunting, and search engines receive no clear signal about which pages belong together.
The good news is that the WordPress Menu editor, accessible under Appearance > Menus, has been capable of dropdowns and nested items since WordPress 3.0. Most of what you need is already built in. The more advanced capabilities (icons, mega menus, mobile drawers) come from your theme, a plugin, or a small amount of custom CSS. You do not need a developer to implement any of these.
Navigation is not just about getting users from A to B. It is about telling them where B exists in the first place.
Step 1, Creating a Menu in the WordPress Menu Editor
Before you can customize anything, you need a named menu assigned to a theme location. Here is the exact path:
- Go to Appearance > Menus in the WordPress dashboard.
- Click Create a new menu.
- Type a name (e.g., Primary Navigation) and click Create Menu.
- On the left panel, expand Pages, Posts, Categories, or Custom Links to add items.
- Check the boxes for the items you want and click Add to Menu.
- At the bottom of the page, under Menu Settings, check the theme location where this menu should appear (usually Primary Menu or Header Navigation).
- Click Save Menu.
Your theme determines which locations are available. Most themes register at least one primary location and one footer location. If you are still learning your way around WordPress admin, our WordPress Dashboard guide covering every menu item will help you orient yourself. Block themes (FSE) handle menus differently through the Site Editor, which we cover at the end of this guide.
Understanding Menu Item Settings
Each menu item has an arrow to expand its options. Click the arrow on any item to reveal:
- URL, the destination link (auto-populated for pages and posts).
- Navigation Label, the text visitors see (defaults to page title, but you can shorten it).
- Title Attribute, optional tooltip text that appears on hover.
- Open link in a new tab, use this for external links only.
- CSS Classes, one of the most powerful fields; covered in depth below.
- Link Relationship (XFN), rarely needed for standard navigation.
- Description, some themes display this as a sub-label beneath the menu item text.
If you do not see CSS Classes and Description in the menu item panel, go to Screen Options (top right of the Menus page) and enable them. WordPress hides these fields by default.
Step 2, Building Dropdown Menus with Nested Items
Dropdowns are created by nesting menu items. The WordPress menu editor uses a drag-and-drop interface. Here is how to create a two-level dropdown:
- Add all the items you want (both top-level and sub-items) to the menu.
- In the menu structure panel on the right, drag a sub-item slightly to the right until it indents beneath its parent item. You will see it labeled as a sub item in the interface.
- You can nest up to three or four levels, though two levels is the usability limit for most designs. Deeply nested dropdowns frustrate mobile users.
- Save the menu.
Third-Level Dropdowns (Fly-Out Menus)
Third-level dropdowns, sometimes called fly-out or hover menus, appear to the side of a second-level item rather than below it. Not all themes support these by default. If your theme does not show a third level visually, you have two options:
- Add CSS manually to reveal and position the third-level sub-menu.
- Use a mega menu plugin (discussed in Step 5) that handles multi-level navigation with better UX.
For most beginner and intermediate sites, two levels is the right architectural limit. If you find yourself building three-level menus, reconsider your site structure first, the navigation complexity is usually a symptom of a content organization problem.
Creating a Parent Item That Is Not a Link
Sometimes you want a top-level menu item that is purely a label, it opens a dropdown but does not navigate anywhere when clicked. To do this:
- In the menu editor, expand Custom Links.
- Set the URL to
#(a hash). - Set the Link Text to your desired label (e.g., Services).
- Click Add to Menu.
- Nest your actual sub-pages under this item.
The hash URL prevents navigation. Some themes add JavaScript to prevent the default click behavior automatically. If your theme does not, users who click the top label will be taken to the top of the page (because # is an anchor to nowhere). A simple jQuery snippet or a CSS pointer-events rule can fix that, but in most cases the theme handles it.
Step 3, Using Custom CSS Classes on Menu Items
CSS classes on individual menu items are one of the most underused WordPress features. They let you style specific navigation links differently without touching your theme files. A class you add in the menu editor gets applied to the <li> element that wraps the link, which you can then target in CSS.
Common Use Cases for Custom Menu Classes
| Goal | CSS Class to Add | What It Enables |
|---|---|---|
| Highlight a CTA button | menu-cta | Style as a button with background color |
| Mark a new section | menu-new | Add a “New” badge via ::after pseudo-element |
| Hide on mobile | hide-mobile | Set display: none at small breakpoints |
| Add an icon prefix | menu-icon-home | Target for icon font injection |
| Mark as external | menu-external | Add an external link icon via CSS |
To add a class, expand the menu item in the editor, find the CSS Classes (optional) field, and type your class name. Multiple classes are separated by spaces. Then add corresponding styles to your theme’s Additional CSS (Appearance > Customize > Additional CSS) or to your child theme stylesheet.
Styling a CTA Button in the Nav Bar
One of the most requested menu customizations is turning one navigation item into a call-to-action button. The pattern is universal: add a class like nav-cta to the menu item, then write CSS that targets it. The CSS below goes in Appearance > Customize > Additional CSS:
Adjust the color values to match your brand. The border-radius controls how pill-shaped the button appears. Setting it to 4px gives a subtle rounded corner; 50px creates a fully rounded pill shape.
Step 4, Adding Icons to WordPress Menu Items
Icons in navigation serve two purposes: they speed up visual scanning for returning visitors, and they add a professional, polished appearance. There are three main approaches to adding icons to WordPress menus.
Approach A, Dashicons (Built Into WordPress)
WordPress ships with the Dashicons icon font, which is always loaded on the front end when the admin bar is visible. You can inject Dashicons into menu items using a CSS ::before pseudo-element combined with a custom menu class.
The \f107 value is the Unicode code point for a specific Dashicon. You can find the full list on the WordPress Dashicons reference page. Note that Dashicons may not be enqueued on the front end for non-logged-in users depending on your theme. If you need icons for all visitors, Font Awesome or a plugin is more reliable.
Approach B, Font Awesome Icons
Font Awesome is the most widely used icon library on the web. Many themes already include it. If yours does not, you can enqueue it via a plugin like Font Awesome by Font Awesome LLC (free, available in the plugin directory) or by adding the CDN link to your theme’s functions.php via a child theme.
Once Font Awesome is loaded, the workflow is the same as Dashicons: add a custom class to your menu item and target it with CSS using the Font Awesome content value. Alternatively, some themes let you put the Font Awesome <i> HTML tag directly in the Navigation Label field of the menu item. For example, entering <i class="fas fa-home"></i> Home in the label field will render the icon inline. This approach works but couples your content to a specific icon library, if you switch libraries, you must update every menu item manually.
Approach C, Plugin-Based Icon Pickers
If you prefer a no-code approach, several plugins add an icon picker directly to the menu item UI:
- Menu Icons by ThemeIsle, adds an icon picker to every menu item. Supports Font Awesome, Dashicons, Genericons, and custom SVG uploads. Free.
- WP Menu Icons, similar feature set with a slightly different UI. Free.
- Max Mega Menu, includes icon support as part of its broader mega menu feature set (covered next).
Plugin-based pickers are the right choice if you are adding icons to many items and want a visual workflow. Manual CSS is faster for one or two items.
Step 5, Building Mega Menus
A mega menu replaces the standard narrow dropdown with a wide panel that can contain multiple columns, featured images, descriptions, and even widgets. They are common on e-commerce sites, news portals, and large agency sites where visitors need to see many options at once without hunting through cascading dropdowns.
When to Use a Mega Menu
- Your site has 20+ pages or products that need to be discoverable from the header.
- You want to feature recent posts, category thumbnails, or promotional banners inside the navigation.
- Your analytics show high exit rates at the navigation level, suggesting users cannot find what they are looking for.
- You are building an e-commerce or membership site where category browsing is a primary user behavior.
Mega menus are not always better. For a small blog or portfolio, they add visual noise without benefit. Match the complexity of your navigation to the complexity of your content.
Max Mega Menu (Free and Pro)
Max Mega Menu is the most widely used mega menu plugin for WordPress. It integrates directly with the existing WordPress menu system, you build your menu structure the same way you always have, then Max Mega Menu adds a configuration layer on top of each item.
After installing and activating the plugin:
- Go to Mega Menu > Menu Locations and enable Max Mega Menu for the menu location you want to enhance.
- Open Appearance > Menus. You will now see a Mega Menu button on each top-level item.
- Click Mega Menu on a parent item to open the configuration panel.
- Set the sub-menu type to Mega Menu. Choose a column count (2, 3, or 4 columns).
- For each child item, you can optionally add a widget, a text block, a recent posts widget, an image widget, or any registered WordPress widget.
- Save changes and preview.
WP Mega Menu (Alternative)
WP Mega Menu by Themeum is another strong option, particularly popular with WooCommerce stores. It offers a drag-and-drop row/column builder inside the mega menu panel and supports adding product grids directly to navigation. The free version covers most use cases; the pro version adds animation effects and advanced widget types.
Theme-Native Mega Menus
Many premium themes include built-in mega menu support. If you are using Astra, OceanWP, GeneratePress, or a theme from ThemeForest, check the theme documentation before installing a separate plugin. Built-in solutions perform better and have zero compatibility risk since they are part of the same codebase. If you have not settled on a theme yet, our guide to choosing the best WordPress theme covers which themes offer the most menu customization flexibility.
Step 6, Making WordPress Menus Mobile Responsive
More than half of web traffic is mobile. A navigation menu that works beautifully on a 1440px monitor but collapses into an unusable jumble on a 390px phone will cost you visitors. Mobile menu behavior is primarily a theme responsibility, but understanding the mechanics helps you customize it correctly.
How Most Themes Handle Mobile Menus
The standard pattern is a hamburger icon that toggles a full-screen or slide-in drawer on mobile. The theme detects the viewport width with CSS media queries and hides the desktop horizontal navigation at a specific breakpoint (commonly 768px or 992px). It shows the hamburger instead. JavaScript handles the toggle behavior.
Most themes collapse all dropdown levels into a flat, accordion-style list on mobile. Tapping a parent item expands its children rather than navigating away. This is the correct pattern, hover-based dropdowns do not translate to touch interfaces.
Customizing Mobile Menu Breakpoints
If your theme’s mobile breakpoint is too wide or too narrow for your design, you can override it in CSS. The exact selector depends on your theme, but the pattern is consistent:
Replace .main-navigation with whatever class your theme uses for the nav container. Use browser DevTools to inspect the live site and find the correct class. The breakpoint value (here 900px) should match the width at which your layout naturally transitions from a horizontal header to a stacked layout.
Testing Mobile Menus
Always test your menu on real devices, not just browser DevTools emulation. DevTools gives you a good approximation, but touch events, font rendering, and scrolling behavior differ on actual hardware. Test these specific scenarios:
- Tapping a parent item with children (should expand, not navigate).
- Tapping a link inside a dropdown on a phone (should navigate, not accidentally trigger another item).
- Opening the menu and scrolling the overlay (should scroll the menu, not the page behind it).
- Testing with the keyboard (tab key) for accessibility.
Mobile Menu Plugins
If your theme’s mobile menu is poor and you do not want to recode it, these plugins offer drop-in replacements:
- Responsive Menu, the most popular dedicated mobile menu plugin. Offers multiple styles (full-screen overlay, off-canvas, push), customizable hamburger icons, and GSAP animations. Free version is capable; pro version adds more animation options.
- SlickNav, a lightweight jQuery plugin that converts existing menus into touch-friendly mobile nav. Best for sites that want minimal overhead.
- WP Mobile Menu, focuses on performance with lazy-loaded menu content. Good for sites that have very large navigation trees.
Step 7, WordPress Menus in Block Themes (Full Site Editing)
If you are running a block theme (WordPress 5.9+), the Appearance > Menus screen is replaced by the Site Editor. Navigation is handled by the Navigation block, which behaves differently from the classic menu system. We have a dedicated tutorial on building navigation menus with the WordPress Site Editor that covers this workflow in depth.
Editing Navigation in the Site Editor
- Go to Appearance > Editor.
- In the sidebar, click Navigation.
- Select your navigation menu to open it in the block editor.
- Use the block toolbar to add pages, custom links, or sub-menus.
- For dropdowns, click the + icon inside a nav item and choose Submenu.
- Save when done.
Styling the Navigation Block
The Navigation block respects theme.json style settings. You can set colors, typography, and spacing directly in the block settings sidebar without writing CSS. For finer control, you can add custom CSS classes to individual navigation items and target them in your theme’s style.css or Additional CSS.
Mega menus are not natively supported in the Navigation block as of WordPress 6.7. You still need a plugin like Max Mega Menu, which adds compatibility layers for block themes. The plugin authors update compatibility with each major WordPress release.
Step 8, Advanced Techniques and Performance Tips
Conditionally Showing Menu Items
One underused technique is showing different menu items to different visitor segments. For example, logged-in members might see a Dashboard link while guests see a Sign Up button. The plugin Nav Menu Roles handles this cleanly: after installing it, each menu item gets a visibility dropdown where you can restrict display to logged-in users, logged-out users, or specific user roles. No code required.
Adding Badges and Labels
Attention-grabbing labels like “New”, “Sale”, or “Hot” can drive clicks to priority pages. The cleanest implementation uses CSS pseudo-elements on a custom menu class so the label is purely presentational and does not affect screen reader output:
The transform: translateY(-50%) vertically centers the badge relative to the menu item. Adjust background and content to match your brand and the label you want to show.
Sticky Navigation Performance
If your theme supports sticky navigation (the header stays fixed as the user scrolls), be aware of a common performance problem: naive implementations recalculate the header position on every scroll event, which causes layout thrashing on mobile. Themes built with position: sticky CSS avoid this entirely, the browser handles the geometry. JavaScript-based sticky headers should use requestAnimationFrame and IntersectionObserver instead of raw scroll listeners. If your site has Core Web Vitals issues and you have a sticky header, check how the theme implements it.
Menu Caching
WordPress generates the HTML for navigation menus on every page load by default. For sites with large menus (deep mega menus, many items), this adds measurable database overhead. The Menu Cache feature built into caching plugins like WP Rocket and W3 Total Cache stores rendered menu HTML and serves it from cache. Enable menu caching in your caching plugin settings if you have a complex navigation structure.
Quick Reference: WordPress Menu Customization Options
| Customization | Method | Skill Level | Plugin Needed? |
|---|---|---|---|
| Add dropdown levels | Drag-and-drop in menu editor | Beginner | No |
| CTA button style | CSS class + Additional CSS | Beginner | No |
| Dashicon icons | CSS class + custom CSS | Intermediate | No |
| Font Awesome icons | CSS class + FA library | Intermediate | Optional |
| Icon picker UI | Menu Icons by ThemeIsle | Beginner | Yes (free) |
| Mega menu | Max Mega Menu or WP Mega Menu | Intermediate | Yes |
| Mobile menu replacement | Responsive Menu plugin | Beginner | Yes (free) |
| Role-based visibility | Nav Menu Roles | Beginner | Yes (free) |
| Menu item badges | CSS pseudo-elements | Intermediate | No |
| Block theme navigation | Site Editor > Navigation | Beginner | No |
Troubleshooting Common WordPress Menu Problems
Dropdowns Not Showing
If you have nested items in the menu editor but the dropdown does not appear on the front end, the most common causes are: the theme does not support multi-level menus, a CSS conflict is hiding the sub-menu, or a JavaScript error is preventing the hover/click handler from running. Open browser DevTools, inspect the parent menu item, and check whether the sub-menu list is present in the HTML but hidden via CSS (display: none or visibility: hidden). If the HTML is there, it is a CSS or JS issue. If the HTML is absent, the theme’s wp_nav_menu() call uses a depth parameter of 1, which truncates sub-menus. In that case you need to modify the theme call through a child theme.
Menu Items Appearing in Wrong Order
WordPress stores menu item order in the database. Drag-and-drop reordering can sometimes fail silently if there is a JavaScript error on the admin page. If your order is not saving, try disabling plugins one at a time to find a conflict. Also check whether a page builder plugin is adding scripts to the admin that interfere with the menu editor’s drag behavior.
Custom CSS Classes Not Applying
Remember that custom classes are added to the <li> element, not the <a> tag. Your CSS selector must reflect this. To style the link, use .your-class a rather than .your-class alone. Also ensure that the CSS Classes option is enabled via Screen Options on the Menus page, because otherwise the field does not appear and any class you previously entered may not have been saved.
Mobile Menu Not Closing After Navigation
Single-page sites and sites using AJAX navigation sometimes have mobile menus that stay open after a link is clicked because the page does not perform a full reload. The fix is to add a small JavaScript listener that closes the menu when a nav link is tapped. Most mobile menu plugins handle this automatically; if you are using a theme-native mobile menu, check the theme documentation for a JavaScript hook to trigger menu close programmatically.
What to Do Next
A well-structured navigation system is one piece of a larger theme customization strategy. Once your menus are optimized, the next logical steps are:
- Customize your WordPress header layout, including logo sizing, search bar placement, and call-to-action buttons alongside the menu.
- Review your footer navigation, which often mirrors the primary menu but in a smaller format and is frequently neglected.
- Audit your menu structure against your Google Analytics data: are the pages that receive the most organic traffic accessible within two clicks from any page?
If you are building a client site, document your menu structure before handing off. A simple sitemap diagram showing which items are nested and which CSS classes are applied saves significant support time later.
Frequently Asked Questions
How many menu items is too many?
Usability research suggests that users can reliably process 5 to 7 top-level items. Beyond 9, cognitive load increases and users start missing items. If your top-level menu exceeds 7 items, look for opportunities to group related pages under a single parent with a dropdown rather than listing them all at the top level.
Can I have multiple menus on the same page?
Yes. WordPress supports multiple menu locations and you can have different menus in the header, footer, sidebar, and even within post content using the [wp_nav_menu] approach in a custom block or shortcode. Each location is registered by your theme and can have a different menu assigned.
Do mega menus hurt SEO?
Not inherently. Google can crawl and index links inside mega menus just as it does standard dropdowns. The concern is that if your mega menu contains dozens of links, it dilutes internal link equity across many pages. Be selective: include only your most important pages and categories in the mega menu, not every piece of content on the site.
What is the difference between a nav menu and a page list block in FSE themes?
The Navigation block in the Site Editor gives you explicit control over which links appear and in what order. The Page List block dynamically displays all published pages alphabetically. For most sites, the Navigation block is the right choice because it gives you control. The Page List block is useful for automatically keeping a footer or sitemap page current without manual updates.
Build the Navigation Your Visitors Actually Need
WordPress menus are more powerful than most users realize. With the built-in menu editor, custom CSS classes, a lightweight icon approach, and a mega menu plugin when the content warrants it, you can build professional-grade navigation without touching theme files or hiring a developer. The key is starting with your content structure, not the visual design, figure out what your visitors need to find, then build the navigation that gets them there.
Start with the basics: create a named menu, set up two-level dropdowns, and add one custom CSS class for a CTA button. Those three steps alone will put your navigation ahead of the majority of WordPress sites. From there, layer in icons, mobile optimizations, and mega menus only as your content and audience demand them.
Dropdown Navigation Mega Menus Mobile Navigation WordPress CSS Customization WordPress Menus
Last modified: April 9, 2026
