Navigation is the backbone of any website — it determines whether visitors can find what they came for or leave in frustration. WordPress ships with a flexible menu system that can handle anything from a simple five-link header bar to a complex mega-menu with nested dropdowns. But the system has quirks: menus are not automatically created and assigned, certain theme locations only appear with the right menu assigned, and dropdown behaviour depends heavily on theme CSS. This guide covers everything about the WordPress navigation menu from first setup to advanced configurations. You’ll find the complete rundown in our Complete Guide to WordPress How.
WordPress Navigation Menu — Creating Your First Menu
A WordPress navigation menu does not create itself when you install a theme. You must create one, add items to it, and assign it to a theme location — three steps that confuse many first-time WordPress users who expect menus to populate automatically from existing pages.
Navigate to Appearance → Menus → Create a new menu → give it a name (e.g., “Main Navigation” or “Header Menu”) → click Create Menu. The menu name is internal — visitors never see it. Once created, add items from the left column: Pages (shows all published pages), Posts, Custom Links (for external URLs or specific anchors), and Categories. Check the boxes next to the items you want to add → click “Add to Menu.” Items appear in the menu structure on the right, where they can be reordered by drag-and-drop. Drag items slightly to the right under another item to create submenus (dropdown children). Save the menu after arranging.
Assigning the WordPress navigation menu to a theme location is the final and often-missed step. At the top of the Menus screen, select the “Manage Locations” tab — this shows every menu location the active theme registers (typically “Primary Menu,” “Footer Menu,” and sometimes “Mobile Menu” or “Social Links”). Use the dropdown next to each location to assign the menu you just created. If the theme does not have a “Primary Menu” location visible here, the theme may use a custom menu system — check the theme documentation. After assigning, save and visit the front-end. The menu now appears in the header, footer, or wherever the theme renders that location. According to the WordPress developer documentation, theme locations are registered by themes using register_nav_menus() — a theme must explicitly register a location before menus can be assigned to it.
Adding Items and Building Dropdown Menus
A well-built WordPress navigation menu uses a clear hierarchy that guides visitors through the site’s content structure. WordPress supports multiple levels of nesting, though most themes render only one or two dropdown levels before the CSS or JavaScript breaks down.
Add custom links to expand the WordPress navigation menu for external destinations or in-page anchors: Appearance → Menus → Custom Links → enter the URL (full URL for external, /page-slug/ for internal, #section-id for same-page anchors) and navigation label → Add to Menu. Custom links are the only way to add menu items that do not correspond to a WordPress post or page — for links to social media profiles, external documentation, or specific URL patterns, custom links are the correct approach. Set the URL to # as a placeholder for parent-only items that should expand dropdowns without navigating anywhere — many navigation designs use non-linking parent labels that simply reveal their submenu on hover or click.
Create dropdown submenus in the WordPress navigation menu editor by dragging child items: drag any menu item slightly to the right, under the parent item, until a dotted indent appears. The indented item becomes a submenu child of the item above it. Multiple levels of nesting are supported — drag a child item further right to make it a grandchild (second-level dropdown). Most themes style one level of dropdown natively; deeper nesting requires custom CSS to position and display correctly. After building the hierarchy in the menu editor, save → test the front-end by hovering over parent items → confirm dropdowns appear. If dropdowns appear in the menu editor but not on the front-end, the theme’s CSS or JavaScript for dropdown behaviour is not loading correctly — check the theme documentation for any dropdown initialisation settings or required CSS classes.
WordPress Navigation Menu in the Block Editor and Widgets
Modern WordPress provides multiple ways to add a WordPress navigation menu to a page beyond the traditional Appearance → Menus interface. Block themes (Full Site Editing themes) use a Navigation block in the Site Editor, while classic themes use widgets and shortcodes. Understanding which system applies to your theme prevents confusion when the menu does not appear where expected.
For classic PHP themes: add a menu to the sidebar, footer, or any widget area by navigating to Appearance → Widgets → find the “Navigation Menu” widget → drag it into the widget area → select the menu from the dropdown → Save. For block themes: the menu is managed entirely within the Site Editor (Appearance → Editor → Navigation) using the Navigation block. The Navigation block in FSE themes replaces the traditional Appearance → Menus interface — changes made in Appearance → Menus may not affect what the Navigation block displays in a block theme. Check which editor the active theme uses before deciding where to manage the WordPress navigation menu.
The Navigation block in the block editor allows adding a menu inline on any post or page — insert the Navigation block from the block inserter → select an existing menu or create a new one within the block. This inline navigation is separate from the theme’s header navigation and is useful for in-content navigation between related posts, category archives, or multi-step processes. For the block editor Navigation block, menus created in Appearance → Menus appear as options in the block’s “Select menu” dropdown — the two systems share the same underlying menu data. Styling the Navigation block uses the block’s built-in colour, spacing, and overlay settings rather than requiring custom CSS for basic adjustments. Our guide on adding custom CSS to WordPress covers the CSS targeting approach needed when the Navigation block’s built-in style controls are insufficient for a specific design requirement.
Fixing WordPress Navigation Menu Display Problems
A WordPress navigation menu that is created and assigned correctly but not appearing on the front-end, or appearing incorrectly (wrong items, no dropdowns, missing styling), has one of four common causes — each with a direct fix.
Wrong menu assigned to location: Appearance → Menus → Manage Locations → verify the correct menu is assigned to the correct location. A common mistake is creating a menu but assigning it to the wrong location — “Footer Menu” selected for what should be the “Primary Menu” location. Theme location not registered: the theme registers locations with specific slugs (e.g., “primary”, “header-menu”) and the menu editor shows these slugs’ labels. If a location shows as “(Select a Menu)” after being assigned, the theme was changed and the new theme does not have a location with that slug. Reassign the menu to the correct location in the new theme. Menu not saved after changes: WordPress does not autosave menu changes — every structural change (reordering, adding, removing items) requires clicking “Save Menu” before it appears on the front-end. Plugin or theme conflict hiding the menu: deactivate plugins one at a time to identify any that override the menu output. A redirect plugin that intercepts navigation URLs, a CSS framework that sets display: none on nav elements, or a mobile menu plugin that replaces the desktop menu can all cause WordPress navigation menu items to vanish. Checking the page source confirms whether the menu HTML is in the output (a CSS issue) or missing entirely (a PHP/plugin issue).
Dropdown menus that appear in the menu editor but fail to show on the front-end when hovering are a JavaScript or CSS issue rather than a WordPress configuration issue. Most themes use jQuery’s hover event or CSS :hover pseudo-class to show dropdown submenus. A JavaScript error on the page that stops jQuery execution prevents hover events from triggering — check the browser console for errors. Missing theme CSS — common when a child theme is active but its stylesheet does not load the parent theme’s dropdown CSS — prevents hover states from applying. Adding @import url('../parent-theme/style.css'); to the child theme’s stylesheet or using the correct wp_enqueue_style approach to load parent styles resolves CSS-based dropdown failures without any menu structure changes. Reviews from the WordPress support community confirm that the “assigned to wrong location” and “not saved after changes” issues together explain the majority of WordPress navigation menu not appearing reports on new WordPress installations.
Advanced Menu Features — Icons, Mega Menus, and Sticky Navigation
Beyond basic navigation, the WordPress navigation menu system supports advanced patterns that many sites need but that require plugins or custom code to implement correctly.
Adding icons to WordPress navigation menu items uses the Menu Image plugin (free) for image thumbnails, or a dedicated icon font approach using CSS. With the Menu Image plugin installed: Appearance → Menus → expand any menu item → the plugin adds “Image” and “Icon” fields below the standard fields. Select an icon from the library or upload an image, position it relative to the text, and save. For icon fonts (Font Awesome, Dashicons), add a CSS class to the menu item (enable “CSS Classes” in Screen Options → check CSS Classes under each menu item) → assign a class like “fa-home” → add CSS in the child theme: .fa-home a::before { content: 'f015'; font-family: 'Font Awesome 5 Free'; margin-right: 8px; }. This approach is the most performant since no additional plugin is needed if the icon font is already loaded by the theme.
Mega menus extend the WordPress navigation menu into full-width panels containing images, multiple columns, and featured content — are available through dedicated plugins (Max Mega Menu, WP Mega Menu) or through premium themes that include mega menu support natively. Max Mega Menu (freemium) converts any existing WordPress navigation menu into a mega menu by intercepting the menu output: install → Mega Menu → select the menu to enable → configure panel width, columns, and content for each top-level parent item. Items within the mega menu panel can be regular menu links, widget areas with arbitrary content, or custom HTML blocks. The plugin adds its own CSS for positioning the mega panel and its JavaScript for the reveal animation, making it compatible with any WordPress theme without custom development. For sticky WordPress navigation menu — fixed at the top of the viewport during scrolling of the viewport during scrolling — most modern themes include this as a Customizer option. Themes that do not include sticky navigation can achieve it with the CSS property position: sticky; top: 0; z-index: 999; applied to the navigation container element, or through a lightweight JavaScript plugin like Sticky.js that handles cross-browser sticky positioning including Internet Explorer fallbacks.
Restricting certain WordPress navigation menu items to logged-in users or specific roles — showing a “My Account” link only to authenticated visitors and hiding it from guests — requires either a plugin or a small code snippet. The Nav Menu Roles plugin (free) adds role-based visibility controls directly in the menu editor: install → expand any menu item in Appearance → Menus → the plugin adds a “Restrict menu item to” dropdown → select the role or login status that should see this item. All other visitors see the menu without that item. This approach is cleaner than CSS-based hiding (which leaves the HTML in the source code) because the PHP conditional prevents the item from being output entirely for unauthorised visitors.
Translating a WordPress navigation menu for multilingual sites requires WPML (premium) or Polylang (free/paid) — both provide menu translation interfaces where each language version of the site gets its own menu with appropriately translated labels and potentially different item structures. Without a translation plugin, WordPress does not automatically generate translated versions of menus. With WPML: after creating the primary language menu, navigate to WPML → String Translation → find the menu string entries → translate each label. With Polylang: Appearance → Menus shows a language flag selector → create a separate menu for each language → assign each language’s menu to the same theme location. The multilingual menu setup is the most common advanced configuration on international WordPress sites and requires planning before initial menu creation since retrofitting translation support onto an existing menu structure requires re-building the menu per language. Related: WordPress Admin Menu Order.
Performance optimisation for the WordPress navigation menu matters on sites with deeply nested menus or menus with many items. WordPress generates menu HTML through wp_nav_menu(), which runs database queries for every menu item on every page load (unless page caching is active). For uncached sites or pages excluded from caching, wrapping the menu output in the WordPress transient API caches the generated HTML for a set duration: set_transient('main_nav', wp_nav_menu(['echo' => false]), HOUR_IN_SECONDS);. This eliminates repeated menu queries between cache updates. Alternatively, enabling any page caching plugin (WP Rocket, LiteSpeed Cache) caches the entire page output including the menu HTML, making per-menu transient caching unnecessary for most sites. If this sounds familiar, WordPress Font Awesome is worth a look.
