A WordPress menu is a structured set of navigation links that helps visitors find pages, posts, and external resources on your site. To create a menu in WordPress, go to Appearance → Menus, enter a name, add pages or custom links, and click Save Menu. WordPress has supported custom navigation menus since version 3.0 (June 2010), and today over 43.5% of all websites run on WordPress (W3Techs, 2025). According to a Forrester Research study, 61% of users leave a website if they cannot find what they need through navigation — making menu creation one of the first tasks every WordPress site owner should complete.
This guide walks you through creating your first WordPress menu from scratch, whether you use a classic theme or a block theme. Every step includes screenshots-free written instructions so you can follow along on any device.
WordPress Menu Creation Quick Reference
| Task | How to Do It | Time Required | Source / Notes |
|---|---|---|---|
| Create a new menu | Appearance → Menus → “Create a new menu” | 30 seconds | WordPress core since v3.0 (2010) |
| Add pages to menu | Check pages in left panel → Add to Menu | 1-2 minutes | Pages, posts, categories, custom links |
| Create dropdown items | Drag item to the right under a parent | 30 seconds | Max 2 levels recommended (NNG) |
| Assign menu location | Check location in Menu Settings | 30 seconds | Locations defined by active theme |
| Save the menu | Click “Save Menu” button | 5 seconds | No auto-save — always click Save |
| Create menu in block theme | Appearance → Editor → Navigation block | 2-3 minutes | Available since WordPress 5.9 (2022) |
| Add custom external link | Custom Links panel → enter URL + label | 30 seconds | Supports https, tel:, mailto: URLs |
| Style menu visually | Plugin like Responsive Menu or custom CSS | 5-15 minutes | Core offers no visual styling |
Key Navigation Statistics
| Statistic | Value | Source |
|---|---|---|
| Websites powered by WordPress | 43.5% | W3Techs, 2025 |
| Users who leave sites with poor navigation | 61% | Forrester Research |
| First-time visitors who scan navigation first | 38% | Missouri S&T eye-tracking study |
| Recommended top-level menu items | 5-7 items | Nielsen Norman Group |
| Mobile sites with poor navigation | 67% | Baymard Institute, 2025 |
| Task-completion time increase per nesting level | ~25% | Nielsen Norman Group |
| Active WordPress sites using a menu plugin | 2 million+ | WordPress.org plugin directory |
Before You Start: What You Need
Before creating a WordPress menu, make sure you have these prerequisites in place:
| Requirement | Why It Matters | How to Check |
|---|---|---|
| WordPress admin access | Menu creation requires Administrator or Editor role | Log in at yourdomain.com/wp-admin |
| Published pages | You need at least 2-3 pages to link to (Home, About, Contact) | Pages → All Pages — check status is “Published” |
| A theme with menu support | Theme must call register_nav_menus() |
Appearance → Menus exists (classic) or Appearance → Editor exists (block) |
| Know your theme type | Classic and block themes use different menu editors | If you see Appearance → Menus, it is classic. If you see Appearance → Editor only, it is a block theme. |
If you have not created pages yet, go to Pages → Add New and publish at least a Home page, About page, and Contact page before setting up your menu.
How to Create a Menu in WordPress (Classic Themes)
Classic themes — including Astra, GeneratePress, OceanWP, flavor, and any theme built before 2022 — use the Appearance → Menus editor. This drag-and-drop interface has been part of WordPress core since version 3.0. Below are the exact steps to create your first menu.
Step 1: Open the menu editor
Log in to your WordPress dashboard at yourdomain.com/wp-admin. Navigate to Appearance → Menus in the left sidebar. If you do not see “Menus” under Appearance, your site uses a block theme — skip to the block theme section below.
Step 2: Name your menu
Click the “Create a new menu” link at the top of the page. Enter a descriptive name like “Main Navigation” or “Primary Menu.” This name is for your reference only — visitors will not see it. Click the “Create Menu” button.
Step 3: Add pages to the menu
On the left side, you will see panels for Pages, Posts, Custom Links, and Categories. To add pages:
- Click the “Pages” panel to expand it
- Select the “View All” tab to see all published pages
- Check the boxes next to the pages you want (e.g., Home, About, Services, Blog, Contact)
- Click the “Add to Menu” button
The selected pages appear as a list on the right side of the screen.
Step 4: Arrange the menu order
Click and drag items up or down to change their display order. The top item appears first (leftmost in a horizontal menu). Nielsen Norman Group recommends placing the most important items at the beginning and end of the menu, as users pay the most attention to these positions — a pattern known as the serial position effect.
Step 5: Create dropdown submenus (optional)
To nest an item under a parent (creating a dropdown):
- Click and drag the child item slightly to the right, beneath the parent item
- It will indent and show a “sub item” label
- Repeat for additional child items under the same parent
Nielsen Norman Group research shows that each additional nesting level increases task-completion time by approximately 25%. Keep dropdown menus to a maximum of two levels for the best user experience.
Step 6: Assign a menu location
Scroll to the “Menu Settings” section at the bottom. Check the box for where you want this menu to appear — for example, “Primary Menu” or “Main Navigation.” Every WordPress theme defines its own menu locations, so the options vary by theme. Common locations include:
| Location | Where It Appears | Typical Use |
|---|---|---|
| Primary / Main Menu | Site header, usually below or beside the logo | Main site navigation |
| Footer Menu | Bottom of every page | Legal pages, sitemap, secondary links |
| Social Menu | Header or footer (theme-dependent) | Links to social media profiles |
| Mobile Menu | Hamburger/slide-out on small screens | Simplified navigation for phones |
Step 7: Save your menu
Click the “Save Menu” button. There is no auto-save in the WordPress menu editor — if you navigate away without saving, all changes are lost.
Visit your site’s frontend to verify the menu appears in the correct location with the right items and order.
How to Create a Menu in WordPress (Block Themes)
Block themes — including Twenty Twenty-Five and other FSE-compatible themes — use the Site Editor instead of the classic Menus screen. The WordPress.org theme directory lists over 1,200 block themes as of early 2026, and this number is growing. If you see Appearance → Editor instead of Appearance → Menus, follow these steps.
Step 1: Open the Site Editor
Go to Appearance → Editor from your WordPress dashboard. This opens the full site editing interface where you can modify templates, headers, footers, and navigation.
Step 2: Navigate to the header template
Click on “Patterns” in the left sidebar, then select “Header.” Click on your header pattern to edit it. Alternatively, click directly on the header area in the template preview.
Step 3: Select or add a Navigation block
Click on the existing Navigation block in your header. If there is no Navigation block yet, click the “+” inserter button and search for “Navigation.” Place it where you want the menu to appear.
Step 4: Add menu items
With the Navigation block selected, click the “+” button inside it to add items:
- Page Link — Links to an existing WordPress page
- Custom Link — Any URL with a custom label
- Submenu — Creates a dropdown group under a parent item
Type a page name to search and select from your published pages, or enter a custom URL.
Step 5: Arrange and style
Drag items to reorder them. Use the right sidebar to customize:
- Typography — Font family, size, weight, line height
- Colors — Text color, background color, hover states
- Layout — Horizontal or vertical orientation, justification
- Spacing — Gaps between items, padding
Step 6: Save
Click the “Save” button in the top-right corner. Changes apply globally since block themes use shared templates.
Classic Theme vs Block Theme Menu Creation
| Feature | Classic Theme | Block Theme |
|---|---|---|
| Menu editor location | Appearance → Menus | Appearance → Editor |
| Available since | WordPress 3.0 (June 2010) | WordPress 5.9 (January 2022) |
| Visual preview while editing | No | Yes (WYSIWYG) |
| Drag-and-drop reordering | Yes | Yes |
| Built-in styling controls | None — requires CSS | Typography, colors, spacing |
| Menu locations | Theme-defined checkboxes | Place Navigation blocks anywhere |
| Plugin support | Excellent | Limited — growing |
| Best for beginners | Simpler for basic menus | Better visual feedback |
How to Add Different Types of Menu Items
WordPress menus support more than just page links. Here is how to add each type of menu item in the classic editor:
| Item Type | How to Add | Example Use Case |
|---|---|---|
| Pages | Pages panel → check pages → Add to Menu | Home, About, Contact, Services |
| Posts | Posts panel → check posts → Add to Menu | Cornerstone blog posts or guides |
| Categories | Categories panel → check categories → Add to Menu | Blog section with “News,” “Tutorials,” “Reviews” |
| Custom Links | Custom Links panel → enter URL + label → Add to Menu | External links, anchor links, tel: links |
| Non-clickable parent | Custom Link with URL set to # |
Dropdown parent that serves as a label only |
How to Style Your WordPress Menu
The default WordPress menu editor provides no visual styling controls — no color pickers, no font selectors, no animation settings. To style your menu, you have three options:
Option 1: Custom CSS (free, requires coding)
Add CSS through Appearance → Customize → Additional CSS (classic themes) or the Global Styles panel (block themes):
/* Change menu font and color */
.main-navigation a {
color: #333333;
font-family: 'Inter', sans-serif;
font-size: 16px;
}
/* Hover state */
.main-navigation a:hover {
color: #0073aa;
}
/* Turn a menu item into a CTA button */
.menu-cta-button a {
background-color: #0073aa;
color: #ffffff;
padding: 8px 20px;
border-radius: 4px;
}Option 2: Theme customizer (limited)
Some themes like Astra and GeneratePress include header/menu styling options in the Customizer. These are theme-specific and vary widely in scope.
Option 3: Menu plugin (no coding required)
A dedicated menu plugin like Responsive Menu provides a full visual editor for colors, fonts, icons, animations, and mobile-specific behavior — without writing CSS. Responsive Menu is active 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 anything.
WordPress Menu Best Practices
| Best Practice | Why It Matters | Source |
|---|---|---|
| Limit top-level items to 5-7 | Cognitive load theory — short-term memory holds 7±2 items | George Miller / Nielsen Norman Group |
| Use short, descriptive labels | “Services” beats “Our Comprehensive Service Offerings” | NNG: labels should be 1-2 words |
| Put important items first and last | Serial position effect — users recall first and last items best | Murdock (1962) / UX research |
| Keep dropdown depth to 2 levels max | Each level adds ~25% to task-completion time | Nielsen Norman Group |
| Test on mobile devices | 67% of mobile sites have poor navigation | Baymard Institute, 2025 |
| Include a search option | 50% of users go straight to search on complex sites | Jakob Nielsen / NNG |
| Ensure keyboard accessibility | WCAG 2.2 requires all interactive elements be keyboard-operable | W3C WCAG 2.2, Success Criterion 2.1.1 |
Troubleshooting: Menu Not Showing on Your Site
If you created a menu but it does not appear on your site, check these common causes:
| Problem | Cause | Solution |
|---|---|---|
| Menu does not appear anywhere | No menu location assigned | Go to Appearance → Menus → Menu Settings and check a display location |
| Menu appears in wrong location | Wrong location checkbox selected | Uncheck the wrong location, check the correct one, and save |
| Menu shows old version | Caching plugin serving stale content | Clear your cache (plugin cache, server cache, and browser cache) |
| “Menus” option is missing | Using a block theme | Go to Appearance → Editor and use the Navigation block instead |
| Some items are missing | Pages are in draft or private status | Publish the pages first, then add them to the menu |
| Dropdown not working | Theme CSS conflict or missing JavaScript | Check browser console for JS errors; try switching to a default theme to test |
Frequently Asked Questions
How do I create a navigation menu in WordPress?
To create a navigation menu in WordPress, log in to your dashboard and go to Appearance → Menus. Click “Create a new menu,” enter a name like “Main Navigation,” and click Create Menu. Then add pages, posts, categories, or custom links from the left panel. Arrange items by dragging them, assign a display location under Menu Settings, and click Save Menu. WordPress has included this menu system since version 3.0 (June 2010), and it works with any classic theme that calls register_nav_menus().
Can I create multiple menus in WordPress?
Yes, WordPress supports unlimited menus. Go to Appearance → Menus and click “Create a new menu” to make additional menus. Each menu can be assigned to a different location — for example, one menu for the header and another for the footer. The available locations depend on your theme. Most themes offer 2-4 menu locations (primary, footer, social, mobile).
How many menu items should I have?
Nielsen Norman Group recommends 5-7 top-level menu items for optimal usability. This aligns with cognitive load theory — psychologist George Miller’s research showed that short-term memory holds approximately 7±2 items. You can have more items in dropdown submenus, but keep the visible top-level count manageable. Baymard Institute research (2025) found that 58% of desktop sites have mediocre or poor navigation, often because of cluttered menus with too many options.
What is the difference between a menu and a navigation block?
A menu (Appearance → Menus) is the classic WordPress menu system available since version 3.0. A Navigation block is the block editor equivalent, introduced in WordPress 5.9 (January 2022) for block themes. Both serve the same purpose — creating site navigation — but use different interfaces. The classic menu uses a dedicated admin page with drag-and-drop; the Navigation block is edited inline within the Site Editor with visual WYSIWYG controls. If your theme is a block theme, you will use the Navigation block. If it is a classic theme, you will use Appearance → Menus.
How do I add a home page link to my WordPress menu?
In the classic menu editor, go to the Pages panel on the left, find your Home page, check it, and click “Add to Menu.” If your homepage is set as a static page (Settings → Reading → “A static page”), it will appear in the Pages list. If you use the default “Your latest posts” setting, add a Custom Link instead: enter your site’s URL as the link and “Home” as the label. Drag the Home item to the top of your menu so it appears first.
Do I need a plugin to create a WordPress menu?
No, WordPress includes a built-in menu system that handles creating, organizing, and assigning navigation menus. A plugin becomes useful when you need features the built-in editor lacks: visual styling (colors, fonts, icons), animations, mega menus, sticky navigation, or mobile-specific behavior. Responsive Menu is used on over 100,000 WordPress sites and adds these features without requiring custom CSS. It reads your existing menu structure automatically.
How do I make my WordPress menu mobile-friendly?
Most WordPress themes include basic responsive menu behavior, but 67% of mobile sites still have poor navigation according to Baymard Institute (2025). For reliable mobile menus, use a dedicated plugin like Responsive Menu that automatically converts your desktop menu into a hamburger menu on mobile devices. It provides independent control over mobile menu items, animations, and touch behavior — features that the default WordPress menu editor does not offer.