The WordPress Navigation block gives site owners a way to edit navigation structure and design directly in the editor. It is primarily intended for block themes and themes that support template editing, so the available controls depend on the active theme and editing setup. The block can contain page links, custom links, submenus and other supported blocks, while its display settings control how navigation behaves at smaller screen sizes.
A useful distinction is that creating a menu and displaying it on the live site are separate tasks. You can manage a menu centrally in the Site Editor, but it will not automatically appear in a header or another front-end location. The menu must be assigned to a Navigation block placed in the relevant template or template part. This guide explains the complete workflow, from creating and organizing a menu to connecting it to a block theme header and checking an empty Navigation block.
Navigation Block vs. Site Editor Menu Management
Where Each Menu Task Takes Place
The Navigation block is used when you want to edit navigation in the context where it appears. For example, you can work with a Navigation block inside a header template part and adjust its menu items, hierarchy and display behavior there. This approach connects the menu structure with the design location in which visitors will see it.
Block themes also provide centralized menu management under Appearance > Editor > Navigation. This area is intended for managing menus as reusable navigation structures. Depending on the available interface, you can create a menu, rename it, duplicate it, delete it, reorder items and create submenus.
These workflows are related, but they are not identical. Creating or editing a menu under Site Editor navigation does not automatically place it on the live site. A Navigation block must be inserted into a template part, such as the Header, and assigned to the intended menu. Exact labels and controls can vary with the WordPress version, active theme, user permissions and interface changes.
How to Create a WordPress Navigation Menu
Create a New Menu or Select an Existing One
Start by inserting a Navigation block in the editor context where the navigation should be configured. Open the block’s List View and use its Menu options. You can select an existing menu or create a new one. Choosing an existing menu is useful when the structure is already maintained centrally. Creating a new menu lets you build the structure from the current Navigation block.
When no existing menu is available, the block may initially display a Page List. This provides a starting point based on pages. Selecting Edit converts the listed pages into editable Page Link blocks, allowing you to adjust the navigation rather than treating the initial list as a finished configuration.
After selecting or creating the menu, review its structure in List View and save the relevant template or content changes. Saving matters because a menu that has only been configured in the editor may not be available as expected until the changes are saved. Preview the result before treating the setup as complete.
Add Page Links and Custom Links
Populate the Navigation block by adding page links, custom links and other supported blocks through the available controls in the sidebar or editor canvas. Page links are suitable when the destination is one of the site’s pages. Custom links provide a separate way to define a navigation destination when a page link is not the appropriate choice.
If an expected page does not appear, check whether it has been published. Unpublished pages do not appear in the menu until they are published. This is a content-status issue rather than necessarily a problem with the Navigation block.
Keep the menu structure focused on the navigation required by the site. After adding items, check their labels and order, then save the changes. Remember that this step creates or edits the menu structure; the menu still needs to be connected to a visible Navigation block if it is not already being used in the relevant template.
How to Add and Organize Submenus
Create a Parent-and-Child Menu Structure
To create a submenu, select the menu item that should act as the parent. Use the Add submenu link in the item options or choose Add submenu from the Navigation block toolbar, depending on which control is available in the current interface.
Once the submenu is created, add further items beneath the selected parent. Use List View or the editor canvas to confirm that each item is placed under the intended parent. This review is important because a flat sequence of links can look similar to a hierarchy while being configured differently.
Submenu interaction can also be configured to open on click instead of hover where that control is available. Review this behavior in the actual navigation context before publishing. The documented controls allow you to configure interaction, but a selected arrangement should not be treated as automatically suitable for every site or audience.
Reorder and Review Menu Items
Menu items can be reordered by dragging them in List View or on the editor canvas. When moving an item, check both its position and its parent-child relationship. An item placed at the wrong level can change the intended submenu structure even when its label and destination remain correct.
Before saving, review the navigation from top to bottom. Confirm that top-level items are in the intended order, submenu entries remain under the correct parent and any newly added links point to the expected destinations. Then save the menu or the relevant template changes and preview the result.
Responsive Mobile Navigation Settings
Choose Off, Mobile, or Always
The Navigation block includes responsive display settings named Off, Mobile and Always. These settings determine whether the menu icon is used and at which screen sizes it appears.
- Off disables the menu icon.
- Mobile displays a menu icon on smaller screens and opens the menu in an overlay.
- Always displays the menu icon at all screen sizes.
Choose the setting according to the navigation layout you want to configure, then preview the result at smaller screen sizes. Do not assume that one option is universally suitable. Test the menu in responsive previews or on real small-screen devices, including the opening and closing behavior of the menu and any submenus.
The Navigation block also provides controls for showing or hiding submenu arrows. Where available, you can configure submenus to open on click rather than hover. Test submenu interaction and keyboard access after saving. The display settings document how the block behaves, but they do not certify accessibility for a particular configuration.
How to Connect a Menu to a Block Theme Header
Assign the Menu in the Header Template Part
In a block theme, open the Site Editor and locate the Header template part, or another template part where the navigation should appear. Insert a Navigation block if one is not already present, or select the existing Navigation block in that location.
Open the block settings and use the menu selector to choose the menu you created or managed. This assignment connects the centrally managed menu with the visible location in the header. Save the template-part changes and preview the front end.
The key point is that Appearance > Editor > Navigation manages the menu but does not, by itself, place that menu in the header. The Navigation block is the link between the menu structure and the template part. If the theme uses a different header structure, confirm that you are editing the intended location and do not assume that every theme exposes identical template-part controls.
Before deleting or replacing a menu, check which templates or template parts use it. Deleting a menu does not delete its linked pages, posts or other content, but it can remove the menu configuration used by a header or another location.
Troubleshooting an Empty Navigation Block
Check Save Status and Menu Assignment
If a Navigation block appears empty, begin with the menu’s save status. Confirm that the menu was saved and published, then save the relevant template or content changes again. A menu that was configured but not saved may not be available in the way you expect.
Next, verify the menu assigned to the Navigation block. Open the block settings and check that the selected menu is the intended one. If the menu selector is empty, confirm that a menu was actually created and saved. If several menus exist, check that the block is not connected to a different structure.
Also confirm that you are editing the correct Navigation block. A menu can be managed centrally while the front end uses a Navigation block in another template part. Check the header or other visible location rather than relying only on the menu-management screen.
Check Template Context and Caching
Confirm that the Navigation block is placed in the template or template part intended for the front end. Creating a menu in the Site Editor does not automatically make it visible. If the block is not connected to the relevant Header template part or another visible location, the menu can exist in the editor without appearing on the site.
If the menu still does not display as expected, clear relevant caching-plugin and browser caches, then preview the site again. Cache clearing is one diagnostic check, not a guaranteed solution. It should be performed alongside verification of the menu’s save status, the block’s menu assignment and the template context.
Finally, review the result at the screen sizes where the navigation is intended to appear. Check the selected responsive display setting, submenu behavior and keyboard access. Interface labels and available controls can vary with the active theme, WordPress version and permissions, so use the controls present in the current editing environment rather than assuming every setup is identical.
The Navigation block workflow has four distinct stages: create or select the menu, organize its links and submenus, place the block in the correct template part, and verify the saved front-end result. Keeping these stages separate makes it easier to identify whether a problem concerns menu content, assignment, template placement or caching. Before publishing, preview the header and responsive behavior, review submenu interaction and confirm that the intended menu is selected. Explore our WordPress plugins, WooCommerce extensions, themes and membership plans to find the right tools for your website.