WordPress

WordPress Menus: Building Navigation Visitors Can Follow

How to plan and build WordPress menus that visitors can follow: menu locations, structure, labels, mobile behavior, accessibility and the code behind theme menus.

Quick answer: WordPress menus are built under Appearance, then Menus (or in the Customizer), and assigned to locations your theme registers, such as a header or footer. Good navigation starts before you open that screen: decide the five to seven things most visitors need, name them in the words customers use, keep dropdowns shallow and make sure the menu works on phones and with a keyboard. The tool is simple. The planning is where most sites go wrong.

How WordPress menus work

WordPress separates two ideas:

  • Menus: lists of links you create and name, such as “Main menu” or “Footer links”.
  • Menu locations: places in your theme where a menu can appear, such as “Primary”, “Footer” or “Social”. The theme decides which locations exist.

You build a menu, add items to it, then assign it to a location. One menu can be used in several locations, and you can have more menus than locations if you want to swap them later.

Items can be pages, posts, categories, tags, custom post type archives or custom links. Each item has a navigation label (the text shown), an optional title attribute, and, if you enable them under Screen Options, CSS classes, link relationship and description fields.

If your theme registers menus, you will see them in two places:

  1. Appearance, then Menus: the classic screen with drag and drop.
  2. Appearance, then Customize, then Menus: the same menus with a live preview.

As of WordPress 5.4, navigation is still managed through these screens rather than inside the block editor. The block editor handles page content; menus stay in the theme’s control.

Plan the menu before you build it

Start with tasks, not pages

List what visitors come to do. For a service business that might be: see services, check prices or how to get a quote, see proof of work, learn about the team and get in touch. Each top-level item should map to one of those jobs.

A common mistake is mirroring the org chart or the sitemap. Visitors do not care how your departments are arranged. They care whether they can find “Pricing” in two seconds.

Keep the top level short

Five to seven top-level items is a sensible ceiling for most sites. More than that and visitors scan without reading. If you have many services, group them under one “Services” item and use a clear services page as the landing point.

Use plain labels

“Services”, “Pricing”, “Work”, “About” and “Contact” beat clever labels like “What we do best” or “Say hello”. Use the words customers type into search. If your visitors call it “Repairs”, do not label it “Solutions”.

Decide what goes in the footer

The footer menu is where secondary links live: privacy policy, terms, careers, a sitemap, and repeated key links for people who scroll to the bottom. It lets you keep the header clean without hiding anything.

Building a menu step by step

  1. Go to Appearance, then Menus, and click “create a new menu”. Give it a clear name.
  2. Add items from the left panels: Pages, Posts, Custom Links, Categories. Use the search tab to find pages quickly on larger sites.
  3. Drag items into order. Drag an item slightly to the right under another to make it a sub-item (dropdown).
  4. Expand each item to edit its navigation label. The page title and the menu label do not have to match. “Our Web Design and Development Services” can simply be “Services” in the menu.
  5. Under Menu Settings, tick the display location, or assign it later under Manage Locations.
  6. Save, then check the site on desktop and mobile.

If you are using the Customizer, you see changes before you publish them, which is handy for testing labels.

Dropdowns hide content until someone hovers or taps. That is fine for a short list of related items, such as the four main services under “Services”. It becomes a problem when:

  • Dropdowns go three levels deep
  • Items in the dropdown are not reachable anywhere else
  • The parent item is a placeholder link that goes nowhere

Make the parent item a real page (a services overview) so tapping it on mobile does something useful. If you need large menus with many links, consider a simpler structure and better hub pages instead. Mega menus can work on large stores and publishers, but they are hard to make usable on phones.

Mobile menus

Most themes collapse the header menu into a toggle on small screens. Check:

  • The toggle is easy to tap and labeled (a “Menu” label next to the icon helps)
  • Sub-items can be opened by tapping, not only hovering
  • The menu closes cleanly and does not trap the page behind it
  • The most important link, often “Contact” or “Book”, is visible without opening the menu

Our notes on the hamburger menu cover the trade-offs of hiding navigation behind an icon.

Accessibility basics for menus

  • Wrap the menu in a nav element with an aria-label such as “Main” so screen reader users know which menu they are in.
  • Make dropdowns open with the keyboard, not only with hover. Users should be able to tab through items and open sub-menus with Enter or Space.
  • Keep a visible focus style on links.
  • Give the mobile toggle a button element with aria-expanded that changes state.
  • Avoid vague labels like “Click here” or “More”.

Well-built themes handle most of this. Test with the Tab key on your own site; it takes a minute and reveals a lot.

If you build or customise themes, menus come from two functions.

Register locations in functions.php:

function iws_register_menus() {
    register_nav_menus( array(
        'primary' => __( 'Primary menu', 'iws' ),
        'footer'  => __( 'Footer menu', 'iws' ),
    ) );
}
add_action( 'after_setup_theme', 'iws_register_menus' );

Output the menu in a template:

<nav aria-label="Main">
<?php
wp_nav_menu( array(
    'theme_location' => 'primary',
    'container'      => false,
    'fallback_cb'    => false,
    'depth'          => 2,
) );
?>
</nav>

Wrapping the call in your own nav element lets you set the aria-label directly in the template.

Setting depth to 2 keeps dropdowns to one level even if an editor drags items deeper. fallback_cb set to false stops WordPress listing every page when no menu is assigned, which often surprises site owners.

WordPress 5.4 also added hooks for adding custom fields to menu items in the admin, wp_nav_menu_item_custom_fields, which used to need a custom walker. That makes it easier to add options like an icon or a highlight flag per item. For deeper theme work, our guide to WordPress theme development explains how templates and functions fit together, and WordPress hooks explains actions and filters.

Common menu mistakes

  • Linking the same page twice under different names. Visitors wonder if they are different.
  • Menus that do not match the URL structure. If “Services” in the menu goes to /what-we-do/, consider aligning them. Our WordPress permalinks guide helps here.
  • Forgetting to update menus after deleting pages. Deleted pages disappear from menus, but renamed or redirected pages may leave stale labels.
  • Using custom links with full URLs to your own staging site. They break after launch. Use page items or relative links.
  • Overloading the header with calls to action. One primary button in the header is enough.

How to tell if your menu works

  • Look at Google Analytics navigation summary or the Behavior Flow report to see where people go from the homepage.
  • Run a quick test: give five people a task (“find the price of X”) and watch where they click.
  • Check site search terms. If many people search for something that is in the menu, the label might be unclear.

FAQ

Why can’t I see the Menus screen?

Your theme may not register any menu locations, or your user role may lack permission. Administrators and editors with the right capability can manage menus.

Can I show different menus to logged-in users?

Yes, with a small code snippet or a plugin that adds visibility rules to menu items. Membership sites often do this.

Does menu structure affect SEO?

Menus are internal links. Linking important pages from the header helps search engines and visitors find them. Keep labels descriptive and avoid stuffing keywords into them.

How many items should go in the footer?

As many as useful, grouped under short headings. The footer can be fuller than the header because people who reach it are looking for something specific.

Build navigation people can use

Good WordPress menus are short, clearly labeled, shallow and tested on phones and keyboards. Plan the tasks first, then build. If you want a WordPress site whose navigation guides visitors toward getting in touch, see how we help you turn visitors into customers.

About the author

Imran M

Leave a Reply

Your email address will not be published. Required fields are marked *

Ready to improve your website?

Let's build a faster, higher performing website.