Navigation Block

Short url:

The Navigation Block will display a navigation menu in your content. Although you can add this block into your normal Page or Post content, it will be more useful once you can edit your Theme’s templates.

After inserting the block, the Block Toolbar provides you with three options. Using the provided links on the Block Toolbar, you can select an existing (Classic) menu (if you currently have one available on your site), you can create a new menu by adding all your existing pages to the menu, or you can start creating a new menu from scratch by clicking the Start empty link.

Once you've added the block, there are further options available in the Settings Sidebar. You can change the Text and Background colours, along with the Submenu and overlay text, and Submenu and overlay background colours. You can also change various Typography settings like Font size, Appearance, Line height, Decoration and Letter case. There are also options for menu justification and orientation. Using the Overlay Menu buttons, you can choose whether or not the menu collapses down to a “hamburger” style icon. Selecting ‘Mobile’ will show the hamburger icon only on smaller mobile devices, while selecting ‘Always’ will show the hamburger icon on desktop and mobile devices. If you don’t want the menu to collapse down to a hamburger icon at all, select the ‘Off’ option.

To add a new menu option into your navigation menu, click the Add block icon (Block Toolbar Add Block). You’ll be shown a small popup window that allows you to search for the Page/Post to insert as the menu item. You can use the Open in new tab switch to choose whether you want your menu item to open in a new browser tab or not. If you wish to add a completely custom menu option to you menu, such as a link to an external website for example, simply enter in the custom URL in the small popup window that displays after clicking the Add block icon. Entering in a custom URL and hitting Return/Enter on your keyboard will add this URL as a new menu option. You can then click on the text and edit it, to change the actual text that shows within the menu. As an example, entering in the small popup window will add a new menu item using that link to the LEGO website. The text that is displayed in your menu, for that link, will be If you wish to change that link text so that it only displays the word ‘Lego’, you’ll need to click on the text and edit it.

There’s a couple of important things to note with the Navigation Block. If you’re using a theme specifically built for use with the new Full Site Editor, such as the new default Twenty Twenty-Two theme, you’ll no longer have access to the Appearance > Menus option in the Dashboard. The only way to create a new navigation menu or edit an existing menu, will be by using the Navigation Block. Also, the Navigation Block stores your menu data in a completely different way to how the Classic Appearance > Menus page stores your menu. If you select a menu that was created using the Classic Menus page, when you first add the Navigation Block into your content, any changes that you make to that menu will NOT be reflected if you decide to re-edit that menu at a later stage using the Classic Menus screen.

Navigation Block