To work with menus in the WordPress full site editor, you’ll need to directly edit the page, post, header, or footer where the menu will exist. In contrast, previously when working with menus, you could only make changes to the menu in the visual editor.
This article will walk you through how to create and add menus in the WordPress full site editor.
This tutorial is using the Twenty Twenty-two theme in WordPress version 5.9.3 to demonstrate how menus work in the full-screen editor.
Creating Menus
Menus are navigation tools for your visitors and will remain in the same location from page to page. Typically, these static menus are found in the header or footer of a website.
The full site editor labels menus as navigation. You won’t see the word “menu” until you add the navigation block. Each menu you create will be saved and can then be recalled whenever you use the navigation block again.
Adding Menus to Headers or Footers
- Log in to the WordPress Administrator.
- Click on Appearance, then click on Editor.
- To focus on the header, click on the drop-down arrow next to the word Home at the top of the home page. Then click on the 3 vertical dots to the right of the Header, then click on Edit Header (Dark, small).
- This will focus on the header area to make it easier to edit. We are primarily looking at the menu on the right. Currently, it shows only one page on the site labeled Sample Page. Click on Sample Page and you will see the contextual toolbar appear above it. In addition, click on List view in the upper left corner menu.
- You can see that the Navigation block has been highlighted in the list view once you have clicked on Sample Page. In the list view, under Navigation, you will see Page List. This is a type of menu that consists of all the pages on your WordPress site. Click on the + sign that appears to the right of the Sample Page (the plus sign obscures the word “Page” in the screenshot above).
- Clicking on the + sign will change the menu to show Add link and then also display a drop-down menu of choices for the link. Type in a URL in the search field and then hit enter.
- When you hit enter to add the link, you will see the text you typed for the link appear beside the Sample Page item in your menu. If you look in the list view, you will see it there as a Custom Link. If you want to title it something else, then you can change it by typing in the text field for the link you created. The Link Title in the block properties (to the right of the page) does not change this. You can also add a description and the actual link. In the screenshot below, I changed the link and added the actual link in the link rel field. Change the link name that you added and type the URL in the link rel field in the block properties column.
- When you have a menu item selected, the toolbar changes in context with it. To the right of the link icon, you will see an option for Add Submenu. This option creates a drop-down menu under the selected menu item. Click on Add Submenu.
- After you click on Add Submenu you will see a field open under the menu item with a + sign. The list view will also show the menu item with the submenu icon beside it. The block properties will show Submenu along with the settings of the selected menu item. In this case, it is a link. Click on the + sign to add a submenu item.
- The options that you get when you add the submenu link include the available pages, a custom link, and the option to create a draft page link. You can also elect to open the item in a new tab. When you click on the Create a Draft Page option, a draft page will be created in the Pages section of the Administrator Dashboard. Create a new link and type in the information needed in the block properties.
- This particular menu is oriented to be horizontal. In the list view, click on the Navigation block, then look at the block properties in the right column. The Layout section includes Justification and Orientation. Justification allows you to align the text of the menu in a particular way. Orientation allows you to make the menu horizontal or vertical. Click on the arrow to change the menu so that it’s vertical.
- The other options to change the Navigation block are Overlay Menu, Submenus, Color, and Typography.
Overlay Menu – changes the behavior of the navigation options.
Submenus – option to open submenu on click instead of hover. Also includes the option to show icons.
Color – changes colors in the menu.
Typography – changes the appearance of the fonts in the menu.
Click on the slider to open submenus on click.
- Click on Save in the top right corner. You can save or choose not to save the items you changed in the Navigation block. You can see the options in the screenshot below. Click on the Save button again to save your changes.
In order to see the menus, you will need to open the site in a separate tab (not in Customization mode), then you can see the changes you made to the menu.
Selecting and Managing Menus
When you are selecting menus, you are editing a Navigation block. Each time you add a navigation block, you will be given the choice of selecting a menu, adding pages, or starting empty.
Additionally, each time you use the navigation block and create a menu, a new menu is automatically saved. In the steps below, we are first going to create a new menu on a page/post and then show you where you would select a saved menu.
- After the title of your page or post, add a new Navigation block.
- We are creating a new menu, so you will want to select Start Empty.
- You will need to create the new menu by populating it. For this example, I have just put in two URLs as placeholders. You can always go back later and edit the links.
- When you’re done adding your menu items, go to the list view and click on the navigation block that you added in step 1. Click on Select Menu.
When you click on Select Menu you’ll see that Navigation 3 has been automatically added. This is the new menu that you just created. You can always select a previously created menu when you add a navigation block.
The Manage menus option is also in the menu that appears at the bottom of the pop-up when you click on Select Menu. This option only allows you to rename or delete menus that have been automatically created.
The WordPress full site editor is still evolving. So, there may be more functionality added to the Manage menus section in the future.