The navigation menu in WordPress is vital for your website. It guides visitors and greatly affects their experience.
A good menu is clear, easy to use, and works well on all screen sizes. Consistency is key.
In classic WordPress themes, creating a menu is under Appearance settings and there is not much in terms of the customizations an average end user can do. However, with the Site Editor, it’s different.
Let’s explore how to create a WordPress navigation menu using the Site Editor.
Navigation in WordPress full site editing
WordPress full-site editing (FSE) isn’t as popular among users yet, which is why the Classic Editor plugin boasts over 5 million active installs.
Despite this, FSE brings a more robust editing experience, making it worth a try, even though it’s still in development.
FSE replaces everything in the classic editor with blocks. This eliminates the need for third-party plugins for website creation. You can insert page elements with blocks right in the Site Editor. Blocks provide consistency and a streamlined website-building experience.
Of course, there’s a learning curve. It takes some time to get used to the Site Editor but once you do, you’ll be glad you made the switch.
The navigation block
Mastering the block paradigm is the key to designing visually appealing websites and content using FSE. You will use the navigation block to create a menu in the Site Editor.
In line with the block-based approach, you can customize the navigation block to finer detail to make it your own.
You can do all your customizations right in the Site Editor but can also take it further using custom CSS in the stylesheet.
Inserting the navigation block
By default, most block themes have a default header already inserted, within which there’s usually a navigation block.
You can also create a new custom header and insert a navigation block, using layout elements (rows and columns) to place the nav block exactly where you want.
Let’s create a new menu for this post in the Twenty Twenty-three theme header.
The Twenty Twenty-three theme has a nav block already inserted in all its header templates. This default nav block populates the menu with the list of pages already created.
In the image, you can see that there’s already a menu that’s auto-populated with the available pages, in this case, the Sample Page that comes with every new WordPress installation.
Let’s create our own custom menu:
Access the Site Editor in the toolbar by clicking the Edit site link. Alternatively, you can browse to the Dashboard, navigate to Appearance > Editor, and click Template parts > Header to access the Header template part.
A list of the theme’s available template parts will then be displayed in the left side pane of the edit window.
Click on the template part you want to edit, in this case, the Header.
Click on the edit icon in the left pane to launch the edit window, as shown in the figure below.
When the edit window launches, click on the three dashes on the left side of the top bar to view the Header elements in the list view. You can then easily isolate an element for editing and customization.
Once you have the Header elements listed, click on the Group block item to expand it and list the elements.
Click on the Navigation element to highlight it. From here, there are a couple of ways to create your menu.
You can either edit the existing default page list by adding new link items or pages, or you can create a completely new custom menu and add link items or pages to it.
Clicking on the three vertical dots in the right side panel reveals all the navigation menus already created (if any), and also allows you to create a new one. From there, you can add menu items as you please, including links, pages, or the search block.
I’ve used the Create New menu option to create a basic menu of four links and added a search bar to the menu.
Each menu link has a toolbar activated when that link is selected as active. I’ll point out just two functions in the toolbar – the link and sub-menu buttons.
The link icon in the toolbar lets you insert a URL for that particular link, while the sub-menu icon creates a sub-menu for the active link.
Also, when a link is active in edit mode, you get more elaborate link settings in the right side pane of the editor. You can modify the label or URL from these settings and add an optional description.
When viewing your site’s front end, you should have a fully working navigation menu.
And that’s a wrap
And that’s a wrap for this post. We’ve not delved into customization, as it wasn’t the goal of this post.
I wanted to show you how easy and intuitive it is to use the navigation block to insert a menu on your WordPress website. You can certainly go deeper and customize the menu.
