The Navigation Block: Its time has come (almost)

The Navigation Block has taken a rocky and unpredictable path to its present state. And while still not completely polished it’s ready for the rough-and-tumble of website design and development.

As WordPress continues to evolve to an all-block design system (aka Gutenberg), one of the trickier elements was and is the Navigation Block.

Tricky for the brilliant developers who devised the system and tricky for those who are learning to use it for building their sites just with blocks.

Think of what was involved in transforming the old menu-building system to a Navigation Block. The method used by WordPress for 18 years was comprehensive, featuring a drag-and-drop interface that people became accustomed to.

On a single page, everything you needed to do to create, edit, manage and delete menu items and menus themselves were found.

Asking site creators to adapt to a completely different way to make a navigation menu was almost too much – especially as the block underwent many iterations over the past two years.

Things have settled down now to the point where there has been enough development time behind the Navigation Block to use as part of your workflow.

Where can I use the Navigation Block?

Anywhere. That is, you need not use a block theme to get access to the Navigation Block. You can add the it to the content area of any page or post, but that’s hardly the smartest way to use this most unique page element

The Navigation Block is most effective when used in block themes that use the site editor to, among other things, set your headers and footers.

How the Navigation Block works

The Navigation block is much like the Group Block, in that it is a container that holds other blocks, notably the Page Link Block which is a single link (i.e. a menu item).

But it can do a lot more than that.

The Navigation Block makes it easy to use other blocks in the Gutenberg system. For example, adding a search block or your site logo within the Navigation Block is not just practical, it’s easy.

Let’s have a look at how to use the Navigation Block. For this demonstration, I used the latest version of the Gutenberg plugin (15.0) and the TwentyTwentyThree theme.

What you will see is very likely to be incorporated into WordPress 6.2 when it ships on March 28, 2023.

The key components

You may have seen a few icons representing blocks that you’re not familiar with. Here they are.

There were also these icons that are the link builders

A few special things to take note of

Use list view

As of now, there is no way to drag and drop links within the Navigation Block. As shown in the video, make use of the List View feature. It’s an ideal way to re-organize or delete links.

Block spacing

Within the Navigation Block settings (right sidebar) the Block Spacing slider lets you set an equal distance between each link. However, currently, there is no way (short of using CSS) to set padding, border, and margin properties within and around the nav block itself.

What about mobile?

As shown in the video, options to display – or not to display – a mobile hamburger icon is found inside of the Navigation Block settings (right sidebar). Presently, there isn’t a no-code way to customize the breakpoints of the Navigation Block.

The Page List Block

It’s easy to confuse this block with the Page Link block so be careful.

The Page List Block is simply a list of all pages that you’ve published for your site. In this screenshot note that you can’t edit or move the links themselves. And this block has very limited use in or outside the Navigation Block itself.

When you first start with the Navigation Block you may see that it uses the Page List block. In that case, select the Edit option you see here.

A module will appear prompting you to convert Page Lists links to Page Links. That’s what you’ll want to do for maximum flexibility as you move forward with creating your navgation menu.

Summing up

While it does take some adjustment to a totally different way to make your site’s navigation, it’s well worth the effort, especially when using a block theme that allows for the use of the Navigation Block inside of a header template part.

You can now do everything with a Navigation Block system as you can do with the classical way of making menus and even more. With a few more enhancements on the way, you can expect the Navigation Block to be a fully-featured, ready-to-use sub-design system.

The post The Navigation Block: Its time has come (almost) appeared first on GoDaddy Blog.


*Third-party logos and marks are registered trademarks of their respective owners. All rights reserved.

*Price excludes applicable taxes and ICANN fees.

*We don’t limit the amount of storage and bandwidth your site can use as long as it complies with our Hosting Agreement. Should your website bandwidth or storage usage present a risk to the stability, performance or uptime of our servers, we will notify you via email and you may be required to upgrade, or we may restrict the resources your website is using. It’s very rare that a website violates our Hosting Agreement and is typically only seen in sites that use hosting for file sharing or storage.

**Email account storage is limited to 100 email accounts with 100 MB of total storage.

***After the initial free year, the certificate will automatically renew at the then-current price until canceled. You can
cancel your automatic renewal certificate at any time. 

*Google will blacklist sites that could be considered dangerous to visitors, which makes it nearly impossible for people to find you. We identify and resolve any blacklisting issues, so there’s no interruption to your business.

**As opposed to simply scanning for malware that may have already infected your site, our Web Application Firewall (WAF) provides around-the-clock, proactive protection to block malware from ever reaching your website.

***Our Content Delivery Network (CDN) stores your content on multiple servers around the world, which means visitors connect to servers that are physically closer to them. This speeds up your website’s performance by at least 50%.

This website uses cookies to ensure you get the best experience on our website. By continuing to browse on this website, you accept the use of cookies for the above purposes.