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 Navigation block, it populates it with a list of all your pages. In the Select menu dropdown within the Menu panel in the Settings Sidebar, you can then select which menu to use in your Navigation block. If you’ve previously created a menu using the Navigation Block, you’ll be able to select it from the Select menu dropdown. If this is the first time using the Navigation Block, you can import one of your existing “Classic” menus (i.e. a menu you’ve created using the Appearance > Menus option in the Dashboard), if you have any, or you can create a new empty menu by selecting the Create new menu option.

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, Letter Spacing, 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 Twenty Twenty-Two or Twenty Twenty-Three default themes, 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 choose to import an existing menu that was created using the Classic Menus page, 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