What’s New In WordPress 5.9 Navigation Block

What’s New In WordPress 5.9 Navigation Block

The new navigation block introduced in WordPress 5.9 is a welcome addition to WordPress. It makes navigating your site easier by letting you place that navigation block in any area of your site. This means you no longer have to rely solely on the menu bar to navigate around your site.

That being said, most site designs will still have the navigation block with your menus located in the header and or footer.

A great example of this is the new menu bar in the header and footer at wordpress.org – check it out when you get a chance.

Here is a video version (pretty much) of this post:

Do I need a block-based theme to use the navigation block?

The navigation block is like any other block in that you can put it anywhere a block can go. The sidebar – if there is one, in the middle of your post or page or, as in most cases, in the header and or footer.

You can only edit your footer or header by using a block-based theme. A great example is the default twenty-twenty-two theme included with the new WordPress version 5.9.

That is what I’m going to use in this demonstration, the default twenty-twenty-two WordPress theme. Once I make sure it is my active theme, I’ll go to the Appearance tab in my admin sidebar then click on Site Editor in the flyout.

Let us begin to build out our navigation block.

The default template in most themes will have the three main sections in your editor window – the header, body, and footer.

The header section will already have the navigation block inserted, with the primary menu already being the active menu.

We covered a lot of the site editor stuff in a previous class. If you need a refresher on that, you can go check it out.

When you open the List View tool, you can see all the blocks in your editor window, including the navigation block along with the blocks that make up the menu within your navigation block.

We will cover the menu settings in a different post, so check that out.

For this demonstration, I want to start from scratch.

For this demonstration, though, I want to start from scratch, so instead of working in the entire site editor, I want to just edit the header template. So let’s click on the big W in the top left corner to get back into the editor, select template parts, and select the header. Yes, you can do what I am about to show you in any Templates, Template Parts, or even where we began in the Site Editor window. I just wanted to do this demonstration without the distractions of all those other sections in our editor window.

Okay, now, while in the list view, I’ll select the Navigation block select remove Navigation from the inline toolbar or from the three vertical dots (kabob menu) on the right side of the Navigation block in List View.

OR…

Select the existing container block you want to add your navigation block to. It’s probably the same container block you just removed the original navigation block from, but wherever you want it. Again, while still in the List View – it is so much easier to do this work in the List View tool.

With that container block selected, go to the block inserter (the square with the plus sign icon inside, located in the top left corner next to the big W) and search for Navigation. Then click on the navigation block when it is displayed.

If, for some reason, the navigation block lands in the wrong container within your editor window, just select it in your List View and drag & drop it where you want it.

A brief overview of the menu options

I’ve got two options here, select menu or start empty.

If we select menu (1), it’s going to pop up all the already existing menus (2), like maybe primary or Navigation or header Navigation, which is, in my case, the same as Navigation, or we can click on start empty.

Clicking on Start Empty (1) displays an empty container with the block inserter icon (3) in the far right of that empty block.

Now, this block inserter is only going to add menu-related blocks.

In other words, you are not going to find columns or embed or any of the other blocks – only menu-related like pages, page lists, posts or categories, or custom URLs (and other special Navigation Blocks). You also have the open-in new tab option that you can toggle on if you want.

In addition to selecting any recently updated pages, you can type in the search box (4) for an existing post, page, or even category. You can even create a custom URL by typing in the search box, the name of the post or page or site you want to add to the navigation block, then scroll to the very bottom of the list that displays, and choose custom or create new.

NOTE: When typing in the search box, sometimes you need to type in the full name before the existing category displays. For example, when I type in pet, the category named pets did not display until I added the s at the end.

However, when I typed in the category name dog, the category named dogs showed up. I’m not sure if that says something about a glitch in WordPress or that dogs are more special than cats.

So let us type in Home and select that as our first menu block item.

To add more menu block items, just hit your enter key, and a new custom link block will display for you to customize. It will say ‘Add Link’ until you select the post, page, or whatever you want in that menu block space.

How to create sub-menus.

You can also create sub-menus super easily. First, make sure the list view tool is open, then in the list view tool, click on the menu item you want to add the sub-menu to (1), then click on the sub-menu icon (2) in the inline toolbar.

Then a box opens under the parent link containing a plus-sign (3). Click that plus-sign to search for and select the sub-menu item (4).

So that is how you create a sub-menu and now let us do the social icon block.

How to add social icons to the menu.

While in the list view, select the navigation block, then in the editor window, click on the menu block inserter and select the social icon, then click on the social icon block inserter and select or search for the social icon you want. Like Twitter, Facebook, Twitch, and so on. Once that Social icon is in your navigation block, click on that social icon, enter the URL to your profile for that social icon account, and click on apply. Ez Pz Lemon Squeezy.

If you want to add more social icons, in the list view, select the Social icons block and then in your editor window, click on the social icons block inserter and repeat that process of choosing your social icon, clicking on it, and adding your profile URL and repeat for more.

How to access the special Navigation Block items.

Before I show you how to add a search box to your menu, I want to mention that the Navigation block has its own set of menu-related block types. Here is a link to the information on WordPress.org that lists them.

At the time of me writing this, there is a quirky way to access those blocks, and here it is.

This first image shows the normal menu block types (3) displayed when you click the menu block inserter (2) after selecting the Navigation block (1) from within the List View.

In this second image, again in the List View (1), if one of the menu items you selected was under the Transform section (2) like the Search Box, for example, then that Block Inserter (4) displays those additional Navigation block-types (5)

How to add a Search and Spacer Block.

If you also want to add a Search box to your Navigation block, head to the List View and select the Navigation block. Then, go back to your editor window, click on the menu block inserter, and click on Search down in the Transform section below the open in new tab toggle.

If that block is a spacer block because you want some distance between your Search box and the rest of your menu, then follow the guide in the second image above, where I show the additional Navigation block-types (5).

Once that spacer block is on your menu, there is what looks like a dot on the right side of the spacer block. Use that to adjust the size of your space.

When you are finished creating the menu in your Navigation block, click on save in the top right corner of your editor. You will be presented with options of saving the template part and or just the menu you created.

That part seemed a little buggy to me because if I un-checked the template part and only wanted to save the menu part, it still saved both.

It was not that big of a deal since it did save the menu, which was the main thing.

Play with it, and you will see what I’m talking about.

As you are making these menus for the first time, you may notice navigation 1 or navigation 2 or 3 or 5, and you do not remember creating them. Not to worry, you are not losing your marbles. I’ll cover that and more about menus specifically in the next class.