What’s New In WordPress 5.9 Menus

What’s New In WordPress 5.9 Menus

What’s New In WordPress 5.9 Menus detail how to create and delete menus, the different types of menus and how to add them to the navigation block.

The new Navigation block is probably one of the most important theme blocks that have been added to version 5.9 of WordPress.

You may feel a bit confused when using the new navigation block the first few times you use it, but you’ll appreciate all the cool things you can do with it once you get used to it.

I went over much of the Navigation block in the previous post, so now I want to go deeper into the menu part of the Navigation block.

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

Just a quick recap on starting from scratch with a new navigation block

I’ll be starting from scratch with a new Navigation block, so after going into our site editor and choosing the header (or any of the template parts for that matter) template part, I’ll open the List View and select the navigation block, then click on the 3 vertical dots (kabob menu) on the right side of the block (in the List View) I’ll click on remove navigation.

And while still in the List View, within the row we just removed the Navigation block from, click the block inserter, type nav or navigation in the block search box. Then click on and add the Navigation block, click on Start empty.

Adding a custom link to our menu

I touched briefly on the Custom Link option in creating a menu within our Navigation block in the previous class on the Navigation block. I just didn’t go through the entire step.

So click on the Menu block inserter (1), and in the search box (2), type the name of something (3) that is not a post, page, or category that you want to make into a custom link.

And then just click on Submit (4). 

Now, with that item selected (5), go to the inline toolbar for that item and click on the link icon (5). Then click on edit (6) and type in the URL for that custom link (7). For example, the URL for Google then click on submit (the curved arrow at the right end of that URL box).

To add more items to your menu, whether they are custom links or existing pages, posts, or categories, just hit your enter key and repeat the process.

Now let us add some style to our menu items.

Next up, I want to show you the styling options and how to add some flair to your menu items. In the List View, select the Navigation block, and then in the far right sidebar, you should see the block settings. If not, click on the gear icon located in the top right part of the top toolbar to open the settings sidebar. That toggles the block settings sidebar on and off.

With the Navigation block selected, the first item in the layout section is justification. You cannot see much of a change until you have something like a long name of one of your menu items and change your orientation (1) from horizontal to verticle. If your design needs these features, now you know where they are.

It is best to leave the feature titled Allow to wrap to multiple lines (5) toggled to the on position unless you need to turn it off. It is on by default.

Making adjustments for the Hamburger Menu

The next item below the layout area is the display area. This talks about collapsing the menu into an icon which is also called the hamburger menu. In case you are not familiar with what a hamburger menu icon looks like, it is a series of 3 small lines stacked on top of each other like that of the parts of a hamburger. 

On a related note, a Kabob menu is the icon with three vertical dots that look like a shish kabob. Kinda makes you wonder what the people that came up with these names were doing at the time.

When someone clicks on that hamburger icon, the menu opens up in either vertical or horizontal orientation depending on the device it is being displayed on. A mobile device will usually open it vertically, while tablet and desktop are in horizontal mode.

In the Display settings for the Overlay Menu, you have 3 options – Off, Mobile, and Always.

Having the default setting of Mobile is best. The off position is not recommended since it disables the menu from being switched to the hamburger menu on smaller screens. Still, some designs will look better if that hamburger menu is always on instead of the full-sized menu. That is where the Mobile and Always settings come into play.

When the hamburger menu is open, a big ‘X’ or some other similar icon is used to close the menu back to the hamburger icon. Myself, I always have mine set to Mobile. That way, when it is viewed on a desktop, the site visitors see it in the spelled-out horizontal mode. And whenever they’re on a mobile device, they’ll see the little hamburger menu icon.

Add color and style the text in your menus.

And Scrolling down, we’ve got color options where you can adjust the color of the text and background areas within the menu. There are the same options to adjust the text and background colors for the sub-menu areas.

The next item in the settings area is typography. We covered the typography feature in a previous post when we were going over WordPress version 5.9 Introduction.

A quick reminder is that when you click on the plus sign to the right of the word typography, you reveal the various options you can activate. Those typography tools are then displayed in the settings area under the typography area when activated. This is basically a way to save space in your block settings sidebar until you need to use specific typography tools. When you are finished, if you want to hide them again, just click on the Reset All button or click on the toggled-on tool, to toggle it off.

The last item in the Typography section is the default or custom font size toggle. The default setting displays 4 preset font sizes, small to extra large. You can use custom font sizes when you click on the adjustment icon to the right of Size.

Naming your menus something other than Navigation 2, 3, 4…

The next item in the block settings section is titled Advanced. When you click to open this, you are given a few options. The first option is a box where the default menu name is displayed. So if you have created or even tried to create menus and did not name them, you will see the names are something like Navigation 2 or Navigation 3 and so on. Here is where you can rename them, or if it is a new menu, this is where you can give it a name.

Below that is where you can delete that menu.

So if you have been playing around and now you see that you have 7 or 8 dummy menus that are named something like navigation 5 through 12, you can select them from the Navigation blocks inline toolbar (3), then come into the advanced section (4) hit the delete button.

That works fine if you have one or two menus you want to delete, but there is a faster way to delete several menus at one time.

While in the List View (1), with the Navigation block selected (2), click on Select Menu (3) on the inline toolbar, then at the bottom of that displayed list, click on Manage menus (4).

The hidden Navigation menu management page and what you can do here

This brings you to your Navigation menus management page. On this page, you will see all your menus, and right now, the only use I can see with this page is the bulk delete option. Just tick the boxes to the left of each menu you want to move to trash. Then under the bulk actions drop-down, select move to trash, then click on apply. Then I would go into the trash and empty it out.

When you hover over the menu name, you see three options – edit, quick edit, and trash. The edit and quick edit do the exact same thing, which is nothing. Okay, you can change the menu’s name here then click on update, but that is it.

Pretty much the same goes for the Add New button at the top of the page. You click on the Add New button, and all you can do is name a menu but not add any menu items. To add the menu items, you need to go back into your site editor as we have been doing and select that newly named menu and build on it from your editor window.

I suspect that as we move closer to version 6.0 of WordPress later on in 2022, things like the Navigation menus will evolve a bit here and there. I’ll keep you posted on those changes, so watch this space. In the meantime, if you want to see what else might be happening in the world of WordPress menus, check out the support page here on WP.org