A quick trip through time with the Navigation block


Where it’s been, and where it can take you now

By the time the Navigation block landed in WordPress 5.9, contributors had been talking about it, iterating on it, and working on refining it for several release cycles.

The work has continued, as you can see in this Hallway Hangout summary from the time and this GitHub issue tracking continuous updates.

You can expect more with every release, making the feature better-looking and easier to use, for the foreseeable future.

Since it was released in WordPress 5.9, contributors have been constantly updating its UI and have made significant progress in enhancing the user experience.

What a difference five years can make!

Let’s switch to the older version on the left.

The block since WordPress 5.9

First release

The Navigation block menu that landed in 5.9 gave everyone the power to build menus from scratch, from blocks, and intuitive tools for managing and reusing those menus across a site. This release post covered this rather robust set of features:

  • Reusing Navigation Menus and separation of concerns 
  • Reusing an existing Menu
  • Facilitating Menu reuse across Themes
  • Reusing and converting Classic Menus to block-based Menus, including handling highly customized Classic Menu items
  • User Permissions

WordPress 6.0

The second iteration of the block gave users an explicit list view in the Editor sidebar. You could move items up and down, control the submenu display, and invoke an overlay menu icon.

Better data fetching came from the REST API, and the UI streamlined the placement holder.

The WP 6.0 also brought quicker loading. Placeholder states helped you see what a brand-new menu would look like, and the UI would load the page-list block menu by default.

See more in this short video.

WordPress 6.1

The third update to the Navigation block brought:

  • Easier access and management of the navigation menu (see here). 
  • Decoupling of the “Select Menu” from the top toolbar to the settings sidebar panel.
  • Better behavior defaults:
    • The Page List block would show a list of pages if the site had no menus at all.
    • If the site had more than one block menu, the navigation block would show the newest block menu.

WordPress 6.2

6.2 dropped a fourth iteration of the block that added an editable block inspector to the list view in the settings sidebar that let you control lots of things from one place:

  • Add and remove navigation items.
  • Reorder navigation items.
  • Create new submenus.

  • When you activated a new theme, the default placeholder menu would show you the menu you had been using with the previous theme (#45286, #45976).
  • The navigation anchor links got easier to manage. You could import your classic menus. And the Page List block got easier to use in the Navigation block (see this short video).

WordPress 6.3

Iteration number five, below, shows the Site View, Detail View, and Edit View screens of the Site Editor in WordPress 6.3.

Image credit: WordPress.org

The Site Editor sidebar panel in 6.2, left, shows the editor as it was then—it took a few clicks to get to the Navigation area before you could work with it. On the right is Navigation as its own area in 6.3.

Here’s what that means: 6.3 lets you manage your navigation by itself: outside the context of a block or a template. Find out more about how it all works in this  Make WordPress post.

Hands-on with Navigation features in WordPress 6.3 and beyond

Let’s start with a fresh install. You can use the WordPress Playground, or you can download WordPress 6.3 and Twenty Twenty-Three. (At publication the current release was 6.4.2, but let’s keep things consistent and use the version that matches our screenshots.)

Now we’ll walk through the features listed above. Whenever it makes sense, we’ll sprinkle in some relevant use-case examples.  

Navigation in the Site Editor 

When you open your new site via Appearance > Editor, your screen will look a little like this:

Click the Navigation link.

On an existing site, you would see a list of all your Navigation menus at left. But here, on a brand-new site, you have yet to build any menus. So WordPress helpfully shows you a Page List block in two places: the site-view sidebar and the preview window at right.

The Navigation menu lets you do basic editing. You can rename, duplicate, or delete items from the three dots (also called vertical ellipsis) drop-down menu.

Duplicate the Navigation block menu and rename it to My Custom Nav (or something a little catchier). When you’ve finished, your screen should look a little like the one below.

In this view, you can move menu items up or down, remove them, or drag them around, but you can’t edit them. (Unless of course you click on the links in the preview window. Those links will let you drill down to a more granular view in the Editor sidebar, and then you can edit from there.)

By now,in the real world, you would have built at least one main menu already, and you would likely have several. In that case, you would see all of them in the navigation site view sidebar. When you select one, it will show up in the preview panel, so you can see how it looks in place.

Now, take a second to think about what just happened. The implications are huge.

Imagine this site after a year of healthy growth, or after ten years. And those menus are in perhaps hundreds of different places—in different kinds of containers. And you need to change them? You only ever have to touch them here.

Navigation in focus mode

Take a look at these two screenshots of the Navigation block. The first one is in the WordPress 6.2 focus mode; the second is the WordPress 6.3 focus mode, grabbed just as you’re editing the menu items. In each version, the settings sidebar panel looks almost exactly like its counterpart, with one exception: WordPress 6.3 streamlines your view, showing you only the controls you need to edit the menu data. (Need to edit the block itself? The controls for that will show up again when you need them.)

In the Settings sidebar, the menu has the same editing limitations as the navigation site view in the left sidebar. In 6.3, you don’t get the styling controls you do in templates or template parts—again, just the basic menu management tools you also get in the site view panel.

Remember the My Custom Nav you built in the previous section? It’s the default Page List menu. As of late 2023 you cannot edit that page list as it stands. But you can make it editable—click the Edit button on the page view top toolbar, or the one in the Settings sidebar panel.

If you clicked the Edit button in the top toolbar, now you can move items around. If you clicked on the same button in the Settings sidebar, you can drop items up or down. In both areas, you can make sub-menus.

The My Custom Nav menu below got some edits in the Settings sidebar. You could make the same edits in two other places: the focus mode window or the Navigation site view.

As you work, your changes will show up in the focus view window, and left site view sidebar as well. A click on any menu item will trigger the preview window to switch to the focus mode of My Custom Nav menu. 

Let’s take a minute and get our hands on the process. What happens if we add the My Custom Nav menu to both the header and footer sections of the home page? Then, let’s add a new menu item, “Portfolio,” and save the changes.

The new Portfolio menu item shows up in three places: the My Custom Nav site-view sidebar, the preview focus mode, and the Settings sidebar.

And below is the home page with the menu in place, before you added the “Portfolio” link to the menu and after. Notice the changes have also propagated to the footer menu—but only in content. The new link has taken on the styling of the menu it sits in.

Again, this is huge: you can edit your menu items’ content and function in one place. And when they display in multiple places that have very distinct styles, the menus take on the look of the containers they’re in.

What’s more, as of 6.3, the focus mode lets you (or anyone you authorize) directly edit the code of your Navigation inner blocks. 

Check out the screenshot below, of the code editor view of an inner block from My Custom Nav menu above.

So just as you can with other block markups, if there’s something you need your navigation to do, beyond what the editor interface can pull off, you can write whatever markup and other code you need to get the job done. You can preserve that code for posterity and backups in several ways, and WordPress will also save all your revisions in the wp_posts table.

Navigation in patterns and template parts

In 6.3, the template parts have moved from the Site Editor site view sidebar to Patterns. To get to the Header template parts from Appearance, select Editor > Patterns in the site-view sidebar (left).

You can find the header template part (right) under synced categories, because it gets synced across different templates.

Let’s do some more experimenting. 

Select the Header in the focus view, and change the background color of the Navigation block. (You can do that in the Styles options, which is in the Settings sidebar.) 

While you have made any changes you want, the screenshot below shows how things would look if you made the background blue and the text white.

If you saved those changes and refreshed the view, you’ll notice your color changes only affected the header section—not the footer. 

But why? We’re using the same My Custom Nav menu in both places. Shouldn’t they change in the same way?

The answer is that you were only working on one instance of the menu, in one template part. And you were making visual changes, not a global content edit.

If you had been editing the menu items in focus mode, then you would have been making global content edits—editing data the Navigation block would use across the entire site, taking on the styling of whatever template part or other container the menu happened to be in.

New in 6.3: the Login /out block

WordPress 6.3 added a new Login/out that can go right in any navigation menu. Below, a user has added the new block to the far right of the menu.

For details, check out GitHub PR #49160.

Improved performance

In WordPress 6.2.2, an initial load of the site triggered several Navigation query requests to the database. In turn, that slowed down the Site Editor.

By contrast, 6.3 and later releases expose Navigation in the sidebar panel of the Site Editor. Now, when a website first loads, all the site’s Navigation fetch requests have been preloaded and cached in the data layer by the time the site editor opens. And the editor opens much faster.

And that holds true when you click to show more than one, or even all, of the navigation menus. They have all been preloaded, so the Site Editor loads as fast for several menus as it does for just one.

Enhanced fallback menu

In WordPress 6.3 and beyond, every navigation block gets a fallback navigation menu, automatically, as soon as you have added it. So once a block is ready, edits happen in real time, because they synchronize with the menu that’s already been associated with the block.

This  Make WordPress post has all the details.

Keep up with the Navigation block!

The block has taken some big steps in 6.3 and 6.4, but there’s more to come. Follow the progress on the Navigation Block with this GitHub ticket, and stay up to date on its  ongoing progress for upcoming releases. And, of course, feel free to get involved! That’s what open-source software is all about.

Acknowledgments

The article is inspired by and based on Dave Smith’s extensive video tutorials, as well as Make WordPress blog articles (co-authored with @scruffian) about the new Navigation Block.

Props to Dave Smith, Justin Tadlock, Mary Baum and @bph for feedback and reviews.

Resources

,

One response to “A quick trip through time with the Navigation block”

  1. Good gosh, this is *exactly* the sort of detailed coverage we need for new and updated WordPress features. The Navigation Block has gone through several iterations — each requiring a learning curve — and having the historical context you’ve provided here is incredibly useful for seeing where my current understanding is in context and what has changed from that point.

    High fives for doing the tough work and getting all the research together to put this resource together. I hope to see updated with future iterations, too!