Have you ever arrived at a website looking for a specific service or pricing page, only to get lost in a confusing maze of broken links and messy navigation?
Within three seconds of landing on your homepage, visitors glance at your header navigation to decide if your site is trustworthy and easy to browse.
Mastering **creating navigation menus in WordPress** ensures your audience finds what they need quickly, reduces bounce rates, and boosts sales conversions.
Whether you are using a classic WordPress theme or modern Full Site Editing (FSE), here is how to build clean, responsive header and footer menus.
Method 1: The Classic Menu Builder (Appearance > Menus)
If you are using a classic theme (like standard Astra, OceanWP, or older WordPress themes), you manage menus via the dedicated admin screen:
Step 1: Create a New Menu Container 1. Go to your dashboard and navigate to **Appearance > Menus**. 2. If no menu exists, enter a name in the **Menu Name** field (e.g., “Primary Header Menu”). 3. Click the blue **Create Menu** button.
Step 2: Add Menu Items In the left-hand column, expand any content accordion: * **Pages**: Check your Home, About, Services, and Contact pages, then click **Add to Menu**. * **Custom Links**: Add external URLs or internal jump-links (anchors). * **Categories**: Add direct links to your primary blog categories.
Step 3: Rearrange Items and Build Dropdown Menus In the right-hand panel, drag and drop items into your desired order.
To create a **dropdown submenu**: * Grab a child item (like “Graphic Design”). * Drag it slightly to the right underneath a parent item (like “Services”). * You will see the item indent, turning it into a sub-item automatically!
Step 4: Assign Menu Location and Save Under **Menu Settings** at the bottom, check the display location (usually **Primary Menu** or **Header Menu**), then click **Save Menu**.
Method 2: The Modern Navigation Block (Site Editor / FSE)
If your website uses a modern Block Theme (like Twenty Twenty-Four or Kadence Block Theme), navigation is managed using the **Navigation Block** in the Site Editor:
1. Go to **Appearance > Editor**. 2. Click on **Patterns > Header** or click directly on your site’s header template. 3. Click on the navigation area to select the **Navigation Block**. 4. Click the **+** icon inside the navigation block to add pages, custom links, or search bars. 5. In the block settings sidebar, you can customize font sizes, link spacing, active colors, and mobile hamburger menu behavior. 6. Click **Save** in the top right corner.
4 UX Rules for High-Converting Menus
A great navigation menu follows strict usability principles:
- **Limit Top-Level Items**: Stick to 5 to 7 primary links. Too many links overwhelm the human eye and crowd mobile screens.
- **Use Clear, Actionable Labels**: Avoid clever or ambiguous terms. Use “Services” instead of “What We Do,” and “Contact” instead of “Let’s Talk.”
- **Add a Call to Action (CTA) Button**: Style the last item in your header menu as a high-contrast button (e.g., “Book a Call” or “Shop Now”) to drive business revenue.
- **Optimize for Mobile**: Always preview your menu on a smartphone. Ensure the hamburger icon triggers smoothly and the touch targets are at least 44 pixels tall for easy tapping.
Don’t Forget the Footer Menu!
Your website header is designed for primary user actions, but your footer is where visitors look for administrative and secondary links.
Create a separate “Footer Menu” and include: * Privacy Policy & Terms of Service * Disclaimer & Copyright Notice * Sitemap link * Affiliate disclosures
Guide Your Visitors with Ease
Navigation menus are the steering wheel of your website. Keep them concise, intuitive, and clean, and your visitors will stay on your pages longer.
How many links are currently sitting in your main header menu? Are you planning to add a high-converting CTA button this week? Let us know in the comments!