Working with Menus in the WordPress Full Site Editing

Working with Menus in the WordPress Full Site Editor

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

  1. Log in to the WordPress Administrator.
  2. Click on Appearance, then click on Editor.
  3. 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).


    Focus on Header

  4. 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. 

    Editing header menu

  5. 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).


    Click Menu + sign

  6.  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.


    Add Link


  7. 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.


    Link Change in Menu

  8. 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.


    Select submenu
  9. 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.


    Add submenu item

  10. 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.


    Submenu options
  11. 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. 


    Navigation layout

  12. 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.


    Nav Block Properties

  13. 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.


    Save options

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

Select menu in WordPress

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.

  1. After the title of your page or post, add a new Navigation block.


    Add Navigation Block post

  2. We are creating a new menu, so you will want to select Start Empty.


    New Menu - start empty

  3. 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.


    Populate Menu

  4. 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


    Navigation menu created

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.

Manage more WordPress websites with WordPress VPS Hosting! Secure and speed up your client’s websites with high-performance managed WordPress VPS Plugins powered by UltraStack.
AC
Arnel Custodio Content Writer I

As a writer for InMotion Hosting, Arnel has always aimed to share helpful information and provide knowledge that will help solve problems and aid in achieving goals. He's also been active with WordPress local community groups and events since 2004.

More Articles by Arnel

Comments

It looks like this article doesn't have any comments yet - you can be the first. If you have any comments or questions, start the conversation!

Was this article helpful? Let us know!