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.

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.

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.

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.

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.

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.

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.

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.

Your newly renamed menu will now show up in the menus list.

Styles

The Styles screen allows you to apply styling typical to most blocks, such as text and background color, font size, etc.

Adjust the layout and style settings to your liking an save your work!

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.