A WordPress menu is a set of navigation links that guide visitors to key pages on your site. WordPress powers 43.5% of all websites on the internet (W3Techs, 2025), and every one of those sites relies on menus for navigation. You can edit menus in WordPress through Appearance → Menus (classic themes) or Appearance → Editor → Navigation (block themes). The built-in editor lets you add, remove, reorder, and nest menu items without writing any code. According to Baymard Institute research (2025), 58% of desktop sites and 67% of mobile sites have mediocre or poor navigation implementation — making proper menu editing one of the highest-impact changes you can make to your WordPress site.
WordPress has supported custom menus since version 3.0 (June 2010). Every theme registered with register_nav_menus() exposes at least one menu location. As of WordPress 6.7, you have two menu editing interfaces depending on your theme type: the classic Appearance → Menus drag-and-drop editor for classic themes, and the Navigation block in the Site Editor for block themes.
Navigation UX Key Statistics
| Statistic | Value | Source |
|---|---|---|
| Desktop sites with poor navigation | 58% | Baymard Institute, 2025 |
| Mobile sites with poor navigation | 67% | Baymard Institute, 2025 |
| First-time visitors who scan navigation first | 38% | Missouri S&T eye-tracking study |
| Users who leave due to poor navigation | 61% | Forrester Research |
| Sites failing to indicate current scope in nav | 95% | Baymard Institute, 2025 |
| Task-completion time increase per nesting level | ~25% | Nielsen Norman Group |
| Navigation time reduction with sticky menus | 22% | Hyper Island / Smashing Magazine, 2013 |
WordPress Menu Editing Quick Reference
| Task | Where to Do It | Time Required | Source / Notes |
|---|---|---|---|
| Add/remove menu items | Appearance → Menus (classic) or Site Editor (block) | 1-2 minutes | WordPress core feature since v3.0 |
| Reorder menu items | Drag and drop in menu editor | 30 seconds | Built-in, no plugin needed |
| Create dropdown/submenu | Drag item to the right under a parent | 1 minute | Max 2 levels recommended (NNG) |
| Add CSS classes to items | Screen Options → enable CSS Classes | 2 minutes | Hidden by default in WP menu editor |
| Change menu link text | Click item → edit Navigation Label | 30 seconds | Independent of page title |
| Set menu location | Menu Settings checkbox at bottom of editor | 30 seconds | Locations defined by theme |
| Add custom link | Custom Links panel → enter URL + label | 1 minute | Supports external URLs |
| Style menu visually | Menu plugin (e.g., Responsive Menu) or custom CSS | 5-15 minutes | Core offers no visual styling options |
How to Edit a WordPress Menu (Classic Themes)
The classic menu editor is available in any WordPress theme that is not a full site editing (block) theme. This includes the majority of themes in use today — themes like Astra, GeneratePress, OceanWP, and any theme built before 2022.
Step 1: Open the menu editor
Log in to your WordPress dashboard. Go to Appearance → Menus. If you do not see “Menus” under Appearance, you are using a block theme — skip to the block theme section below.
Step 2: Select or create a menu
If you already have a menu, select it from the “Select a menu to edit” dropdown and click “Select.” To create a new one, click “Create a new menu,” enter a name (e.g., “Main Navigation”), and click Create Menu.
Step 3: Add items to your menu
On the left side panel, you will see four item sources:
| Source | What It Adds | When to Use |
|---|---|---|
| Pages | Links to published WordPress pages | Most common — About, Contact, Services, etc. |
| Posts | Links to individual blog posts | Highlight key articles or cornerstone content |
| Custom Links | Any URL with a custom label | External links, anchor links, tel: or mailto: links |
| Categories | Links to category archive pages | Blog navigation, product categories |
Check the items you want, then click “Add to Menu.” They appear as a flat list on the right.
Step 4: Reorder and nest items
Click and drag items up or down to reorder them. To create a dropdown (submenu), drag an item slightly to the right underneath its parent. It will show a “sub item” label when properly nested. Nielsen Norman Group research recommends limiting dropdown depth to two levels — each additional level increases task-completion time by approximately 25%.
Step 5: Edit individual item settings
Click the arrow on any menu item to expand its settings:
- Navigation Label — The text visitors see. This is independent of the page title, so you can use shorter labels like “Blog” instead of “Our Company Blog.”
- Title Attribute — Tooltip text shown on hover. Useful for accessibility.
- Open link in a new tab — Check this for external links.
To see additional fields, click “Screen Options” at the top-right of the page and enable:
– CSS Classes — Add custom classes to individual items for targeted styling
– Link Relationship (XFN) — Add rel attributes (e.g., nofollow for external links)
– Description — Some themes display a short description below the menu item label
Step 6: Assign a menu location and save
Under “Menu Settings” at the bottom, check the location where this menu should appear (e.g., Primary Menu, Footer Menu). Each theme defines its own locations. Click “Save Menu.”
How to Edit a WordPress Menu (Block Themes)
Block themes in WordPress — including Twenty Twenty-Five, Flavor, and Flavor Pro — replace the classic Appearance → Menus screen with the Site Editor’s Navigation block. This WYSIWYG editor lets you edit menu items, customize typography and colors, and preview changes in real time without writing CSS. Block themes represent a growing share of the WordPress ecosystem, with the WordPress.org theme directory listing over 1,200 block themes as of early 2026. If your theme is a block theme, the Appearance → Menus option will not appear — you will see Appearance → Editor instead.
Step 1: Open the Site Editor
Go to Appearance → Editor. This opens the full site editing interface.
Step 2: Find the Navigation block
Click on your site’s header area (or wherever your navigation appears). Click the Navigation block to select it. You can also find it through the block inserter by searching for “Navigation.”
Step 3: Edit menu items
Click on any menu item to edit its label or link. Use the “+” button to add new items — you can add pages, posts, custom links, categories, or even sub-menus. To create a dropdown, add a “Submenu” block inside an existing menu item.
Step 4: Customize appearance
With the Navigation block selected, the right sidebar shows style options:
– Typography (font, size, weight)
– Colors (text, background, hover states)
– Layout (horizontal, vertical, flex settings)
– Spacing (padding, margins between items)
Step 5: Save changes
Click the “Save” button in the top-right corner. Changes apply site-wide since block themes use global templates.
Classic Menu Editor vs Site Editor: Comparison
| Feature | Classic Menu Editor | Site Editor (Block Themes) |
|---|---|---|
| Access path | Appearance → Menus | Appearance → Editor |
| Visual preview | No (blind editing) | Yes (real-time WYSIWYG) |
| Drag-and-drop reordering | Yes | Yes (block-based) |
| Dropdown/submenu support | Drag to indent | Add Submenu block |
| Custom CSS classes on items | Yes (via Screen Options) | Yes (via Advanced panel) |
| Typography control | No (requires custom CSS) | Yes (built-in) |
| Color control | No (requires custom CSS) | Yes (built-in) |
| Multiple menu locations | Theme-defined checkboxes | Place Navigation blocks anywhere |
| Mega menu support | Not built-in | Not built-in |
| Plugin compatibility | Excellent (most menu plugins) | Limited (few plugins support FSE) |
The Site Editor offers more built-in styling power, but plugin compatibility is still stronger with the classic editor. If you need advanced features like mega menus, animations, or conditional menu items, a dedicated menu plugin works best with the classic menu system.
7 Ways to Customize Your WordPress Menu Beyond the Basics
WordPress menu customization beyond basic structure — such as adding icons, changing colors, creating sticky navigation, or showing different menus by device — requires either custom CSS or a dedicated menu plugin. The built-in WordPress menu editor provides zero visual styling controls: no color pickers, no font selectors, no animation settings. Below are the seven most requested menu customizations and how to implement each one.
1. Add icons to menu items
WordPress does not support menu icons natively. You can add them via CSS classes (enable in Screen Options, then add a class like menu-icon-home and target it in your stylesheet) or use a plugin. Responsive Menu includes a built-in icon library where you pick icons visually without writing CSS.
2. Change menu colors and fonts
In classic themes, you need custom CSS:
.main-navigation a {
color: #333333;
font-family: 'Inter', sans-serif;
font-size: 16px;
}
.main-navigation a:hover {
color: #0073aa;
}In block themes, select the Navigation block and use the sidebar style panel. With Responsive Menu, you get a visual color picker and font selector — no CSS needed.
3. Highlight a specific menu item (CTA button)
To turn a menu item into a button (common for “Get Started” or “Sign Up” links):
- Open Screen Options and enable CSS Classes
- Click the menu item and add a class like
menu-cta-button - Add CSS to style it:
.menu-cta-button a {
background-color: #0073aa;
color: #ffffff;
padding: 8px 20px;
border-radius: 4px;
}4. Make the menu sticky (fixed on scroll)
A sticky menu stays visible as users scroll down. A usability study published by Hyper Island and featured in Smashing Magazine (2013) found that sticky navigation reduced average navigation time by 22% on content-heavy sites. You can achieve this with CSS position: sticky on the header, or use a plugin like Responsive Menu which has a built-in sticky option with customizable scroll offset.
5. Show different menus on mobile vs desktop
WordPress supports multiple menu locations, but showing entirely different menus by device requires either custom code or a plugin. Responsive Menu lets you assign different WordPress menus to desktop and mobile views independently, so you can show a simplified menu on phones with fewer items.
6. Add conditional menu items
Sometimes you want menu items that appear only for logged-in users, specific user roles, or on certain pages. WordPress core does not support this. Plugins like “If Menu” or “Nav Menu Roles” add visibility conditions to each menu item.
7. Add search to the menu
Adding a search bar inside the navigation keeps it accessible from every page. In block themes, insert a Search block inside the Navigation block. In classic themes, use Responsive Menu’s built-in search integration or add a search widget to a menu widget area.
Common WordPress Menu Editing Mistakes
| Mistake | Impact | Fix |
|---|---|---|
| Too many top-level items (8+) | 38% of first-time visitors scan navigation first — cluttered menus increase bounce rate | Group related pages under 5-7 parent items |
| Using page titles as menu labels | Labels like “Our Comprehensive Service Offerings” waste horizontal space | Shorten to 1-2 words: “Services” |
| Not assigning a menu location | Menu exists but does not appear on the site | Check a location box in Menu Settings |
| Forgetting to save after editing | All changes are lost | Click “Save Menu” — there is no auto-save |
| Linking to draft or private pages | Visitors get 404 errors | Only add published pages to menus |
| Ignoring mobile menu behavior | 67% of mobile sites have poor navigation (Baymard, 2025) | Test your menu on mobile or use a responsive menu plugin |
| Deep nesting (3+ levels) | Each level adds ~25% to task-completion time (NNG) | Limit to 2 levels; use mega menu for complex sites |
When to Use a Menu Plugin Instead
A WordPress menu plugin becomes necessary when you need visual customization, animations, mega menus, or conditional visibility — features absent from the built-in editor. The default WordPress menu editor handles structural tasks (adding, removing, and reordering items) but provides no controls for colors, fonts, icons, or mobile-specific behavior. According to WordPress.org plugin directory data, over 2 million active WordPress sites use a dedicated menu plugin. If you need any of the following, a plugin saves significant time compared to custom CSS:
| Need | Built-in Editor | Responsive Menu (Free) | Responsive Menu Pro |
|---|---|---|---|
| Add/remove/reorder items | Yes | Yes | Yes |
| Dropdown submenus | Yes (styling is theme-dependent) | Yes (with animations) | Yes (fully customizable) |
| Custom colors and fonts | Requires CSS | Visual editor | Visual editor + advanced |
| Menu icons | Requires CSS + icon font | Built-in icon library | Built-in + custom SVG |
| Sticky menu | Requires CSS/JS | One-click toggle | One-click + scroll offset |
| Hamburger menu on mobile | Theme-dependent | Automatic | Fully customizable trigger |
| Mega menu panels | Not supported | Not supported | Full mega menu builder |
| Conditional visibility | Not supported | Not supported | Show/hide by device, role, page |
| WCAG 2.2 accessibility | Theme-dependent | Built-in ARIA labels | Full compliance + keyboard nav |
Responsive Menu is used on over 100,000 WordPress sites and works with any classic theme. It reads your existing WordPress menu structure, so you do not need to rebuild your menu — just activate the plugin and customize the appearance.
Frequently Asked Questions
How do I edit the menu in WordPress?
Go to Appearance → Menus in your WordPress dashboard if you are using a classic theme. For block themes, go to Appearance → Editor and click on the Navigation block. In both editors, you can add, remove, reorder, and nest menu items. The classic editor uses drag-and-drop; the Site Editor uses block controls. Changes take effect after you click “Save Menu” (classic) or “Save” (Site Editor). WordPress has supported custom menus since version 3.0, released in June 2010.
Why can’t I see the Menus option under Appearance?
If Appearance → Menus is missing, you are most likely using a block theme (like Twenty Twenty-Five). Block themes replace the classic Menus screen with the Site Editor. Go to Appearance → Editor instead, and look for the Navigation block in your header template. If you are using a classic theme and still do not see Menus, your theme may not have registered any menu locations — check with the theme developer or switch to a theme that supports register_nav_menus().
Can I have different menus on different pages?
WordPress core does not support per-page menus natively. You can create multiple menus and assign them to different locations (e.g., header vs footer), but showing different primary menus on specific pages requires a plugin like “Conditional Menus” or custom code using the wp_nav_menu_args filter. In block themes, you can use template-level editing to place different Navigation blocks on different templates.
How do I add a custom link to my WordPress menu?
In the classic menu editor, expand the “Custom Links” panel on the left side. Enter the full URL (including https://) and a link label, then click “Add to Menu.” This is how you add external links, anchor links (e.g., #pricing), phone links (tel:+1234567890), or email links (mailto:info@example.com). Custom links are also useful for creating placeholder parent items — enter # as the URL so the parent is not clickable.
How do I add CSS classes to WordPress menu items?
CSS classes are hidden by default in the WordPress menu editor. To enable them, click “Screen Options” at the top-right corner of the Appearance → Menus page, then check the “CSS Classes” box. After enabling, expand any menu item to see a new “CSS Classes (optional)” field where you can add one or more class names separated by spaces. This lets you target individual items with custom CSS for unique styling — for example, adding a menu-cta-button class to turn a menu item into a call-to-action button.
Does editing the menu affect my site’s SEO?
Yes, menu structure directly impacts SEO in two ways. First, menus generate internal links — pages linked from the main navigation receive more link equity and are crawled more frequently by search engines. Removing a page from the menu reduces its internal link count, which can lower its ranking. Second, navigation structure helps search engines understand your site hierarchy. Google’s documentation recommends using a clear, logical navigation structure so that every page is reachable within 3 clicks from the homepage. Changing menu structure does not cause immediate ranking changes, but affects crawling and indexing over weeks.