WordPress menus: set up navigation visitors can use

Key takeaways

In WordPress, menus are edited under Appearance, Menus in classic themes, or with the Navigation block in the Site Editor in block themes. Use one menu for mobile and desktop where the theme allows, keep labels short and specific, use custom links sparingly and limit dropdowns to one level. Test the result on a phone, not only in the editor.

• Classic themes: Appearance, Menus. Block themes: Site Editor, Navigation.
• Assign one menu to both mobile and desktop where possible.
• Navigation labels can differ from page titles; keep them specific.
• Restrict who can edit menus with user roles.

Where do WordPress menus live?

It depends on the theme. Classic themes use the Menus screen under Appearance, where you build menus and assign them to theme locations such as primary, mobile and footer. Block themes use the Navigation block, edited in the Site Editor. Some page builders add their own header menus, which can bypass both.

• How clear website navigation improves user experience
• How to choose a mobile-friendly WordPress theme

How should you structure the menu?

Build the main menu with about five to seven items and one level of sub-items. In WordPress, sub-items are created by indenting them under a parent. Use the navigation label field to give a page a short menu label without changing its title. Keep policies, careers and news in a separate footer menu.

• Five to seven top-level items.
• One level of sub-items.
• Short navigation labels in customer words.
• A separate footer menu.
• The contact action styled as a button through the theme or a CSS class.

• How many menu items should a website have?
• Menu labels: words visitors understand at a glance

Why do mobile menus drift in WordPress?

Many themes have a separate mobile menu location, and page builders often add a separate mobile header. If different menus are assigned, one gets updated and the other does not. Assign the same menu to both locations, or check both whenever you change one.

• Mobile and desktop menus: keep the two in step

What are the common WordPress menu mistakes?

The common mistakes are adding every new page automatically, using custom links with hard-coded URLs that break when pages move, nesting three levels deep, using menu plugins that render links only with JavaScript, and letting every editor change the menu.

• Turn off 'automatically add new top-level pages'.
• Prefer page links to custom URLs.
• Avoid more than one level of nesting.
• Check menu plugins output real HTML links.
• Limit menu editing by user role.

• Who owns the menu? Keep navigation clear after launch
• Does website navigation affect SEO?

What does this look like in practice?

A pattern we see: a WordPress site has 'automatically add new pages' switched on, so every landing page and thank-you page has joined the menu over the years. Switching it off and rebuilding a six-item menu, assigned to both desktop and mobile, cleans it up in an afternoon.

• See client work
• Website Design & Development for UK businesses

WordPress menu checklist

• Know whether you use the Menus screen or Navigation block.
• One main menu, five to seven items.
• Same menu for mobile and desktop.
• Auto-add pages switched off.
• Separate footer menu.
• Test on a phone.

• Shopify navigation: menus and collections shoppers follow
• Website navigation audit: a one-afternoon review

Next step

Check which menu is assigned to each location in your theme, and whether mobile has its own.