WordPress in the Gutenberg era treats navigation menus differently than it did pre-Gutenberg. We no longer register menu locations via our theme and build menus via Appearance>Menus in the dashboard. We now have the Navigation Block, which we can use to create menus anywhere we can create content in the Block Editor.
I’ve been a WordPress developer for over a decade and am used to the “old-fashioned way” of registering menu locations such as header, footer, primary, etc., in a theme. It took me a while to grok this new way of menu creation. I always take notes when learning a new process, so I thought I’d turn my notes on working with the Navigation Block into a post in case others are similarly confused. In case I’m the only dunce who needs this primer, at least I’ve got something to look back on.
Add Navigation Block
While editing a post or page, insert the Navigation Block into your content area by selecting it from the list in the left-hand Block Inserter side-bar or by hitting the forward-slash key (/) and typing navigation.
Clicking the Document Overview icon will reveal the Block Inserter
Type “/navigation” in the Content editor
Navigation Block inserted with default links (selected)
The Navigation Block will populate itself with links from a random menu that you will most likely want to replace. Often it’s the Primary Nav menu.
To create a new menu for this block (or replace it with one previously created), select the entire Navigation Block either by selecting it in the content area or by selecting it from the left sidebar after clicking the Document Overview button in the top left portion of your screen.
Pro tip: The Document Overview button will reveal a List View of your page’s blocks in the left sidebar. Very handy for page navigation when creating content.
Document Overview icon (in black)
Selecting the Navigation Block will reveal its settings panel in the right column of your editing screen. The items in the current menu will be shown vertically under the heading Menu.
Navigation Block default settings, showing current menu
Create a New Navigation Menu
To either create a new menu or select a different menu you created previously, click the vertical-three-dot menu to the right of the Menu heading. An overlay menu will appear listing your previously created menus as well as the option to create a new menu.
Add Navigation Links
Clicking Create new menu will present you with an empty Navigation Block. Add new navigation items via either the block in the content area or the right sidebar. You can drag-and-drop your menu items in the right sidebar to re-order them. You can also re-order your items in the Navigation Block’s content area by selecting the link itself and clicking either the left or right arrow in the formatting menu that appears.
Select an existing menu or create a new menu
Select a menu item and click the left or right arrows to reorderDrag to re-order items in the Navigation Block menu settings
Types of Links
Similar to the old Appearance->Menus method of adding navigation items, the Navigation Block allow you to place links to content other than pages or posts, such as an external link, custom post-type, taxonomy, or, in the case of the Navigation Block, just about any other content block that is available. A popular use of the Navigation Block is to create a set of anchor links to aid on-page navigation.
Different types of links in the “Classic” WordPress Dashboard Menu area
Content Blocks available in the Navigation Block
Rename, Style and Format the Navigation Block
Once you create your menu, it might not look that great. Perhaps it’s displaying vertically and you want it to display horizontally. Maybe you want to change the background. Generally jazz it up a bit. No sweat!
As discussed above, when you select the whole Navigation Block (not just a list item), its formatting and settings panel will appear in the right column of your editing screen.
There are three icons above the Menu heading that toggle the List (“stepped hamburger” icon) Settings (gear icon), and Styles (half-dark-half-light-circle icon) views of the block. We were in the List view when we created our new menu. Now we will use the Settings and Styles views to set it up.
List, Menu and Styles icons
Settings
The Settings view allows you to adjust your menu’s layout appearance. You can adjust its orientation (horizontal or vertical), its item justification (left, center, right, etc.) and how it displays on mobile screens. The Settings view also gives you access to the Advanced settings area where you can rename your menu.
Navigation Block’s Layout settings
Rename Your Menu
When you create a new menu, WordPress adds a default name to it ( Navigation 1, Navigation 2, Navigation 3, etc.). You can change its default name to something that better describes its contents by accessing the Advanced drop-down menu in the Settings view.
Navigation Block Advanced settings with default name
Navigation Block Advanced settings with renamed menu
Your newly renamed menu will now show up in the menus list.
Current menu with default name
Current menu renamed
Styles
The Styles screen allows you to apply styling typical to most blocks, such as text and background color, font size, etc.
Navigation Block’s Style settings
Adjust the layout and style settings to your liking an save your work!
Before: Navigation Block inserted into content area with default content and layout
After: Navigation Block with new styles and layout applied
Finalize and Use
Whether you are using the Left navigation Pattern or not, once you get your menu settings and styles dialed in, Save your work! As stated above, your new menu will be available for use globally throughout your site, not just where you created it. However, if you created it where you intend to use it, you’re good to go.
Note though, that the next time you insert a Navigation Block elsewhere in your site, it will automatically populate with the menu you created in this exercise. You can create a new menu by repeating the steps outlined in this post.