The Navigation Block has taken a rocky and unpredictable path to its current state. And whereas nonetheless not fully polished it’s prepared for the rough-and-tumble of web site design and improvement.

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

Difficult for the good builders who devised the system and tough for individuals who are studying to make use of it for constructing their websites simply with blocks.

Consider what was concerned in remodeling the previous menu-building system to a Navigation Block. The tactic utilized by WordPress for 18 years was complete, that includes a drag-and-drop interface that folks turned accustomed to.

On a single web page, the whole lot you wanted to do to create, edit, handle and delete menu objects and menus themselves had been discovered.

Asking web site creators to adapt to a very totally different strategy to make a navigation menu was nearly an excessive amount of – particularly because the block underwent many iterations over the previous two years.

Issues have settled down now to the purpose the place there was sufficient improvement time behind the Navigation Block to make use of as a part of your workflow.

The place can I exploit the Navigation Block?

Anyplace. That’s, you needn’t use a block theme to get entry to the Navigation Block. You possibly can add the it to the content material space of any web page or put up, however that’s hardly the neatest method to make use of this most original web page component

The Navigation Block is handiest when utilized in block themes that use the positioning editor to, amongst different issues, set your headers and footers.

How the Navigation Block works

The Navigation block is very like the Group Block, in that it’s a container that holds different blocks, notably the Web page Hyperlink Block which is a single hyperlink (i.e. a menu merchandise).

However it may do much more than that.

The Navigation Block makes it straightforward to make use of different blocks within the Gutenberg system. For instance, including a search block or your web site brand inside the Navigation Block is not only sensible, it’s straightforward.

Let’s take a look at methods to use the Navigation Block. For this demonstration, I used the newest model of the Gutenberg plugin (15.0) and the TwentyTwentyThree theme.

What you will notice could be very more likely to be integrated into WordPress 6.2 when it ships on March 28, 2023.

The important thing parts

You will have seen just a few icons representing blocks that you just’re not accustomed to. Right here they’re.

There have been additionally these icons which might be the hyperlink builders

A couple of particular issues to pay attention to

Use record view

As of now, there isn’t any strategy to drag and drop hyperlinks inside the Navigation Block. As proven within the video, make use of the Checklist View characteristic. It’s a super strategy to re-organize or delete hyperlinks.

Block spacing

Throughout the Navigation Block settings (proper sidebar) the Block Spacing slider allows you to set an equal distance between every hyperlink. Nevertheless, at the moment, there isn’t any method (in need of utilizing CSS) to set padding, border, and margin properties inside and across the nav block itself.

What about cellular?

As proven within the video, choices to show – or to not show – a cellular hamburger icon is discovered within the Navigation Block settings (proper sidebar). Presently, there isn’t a no-code strategy to customise the breakpoints of the Navigation Block.

The Web page Checklist Block

It’s straightforward to confuse this block with the Web page Hyperlink block so watch out.

The Web page Checklist Block is solely an inventory of all pages that you just’ve printed in your web site. On this screenshot word that you may’t edit or transfer the hyperlinks themselves. And this block has very restricted use in or exterior the Navigation Block itself.

While you first begin with the Navigation Block you may even see that it makes use of the Web page Checklist block. In that case, choose the Edit choice you see right here.

A module will seem prompting you to transform Web page Lists hyperlinks to Web page Hyperlinks. That’s what you’ll wish to do for max flexibility as you progress ahead with creating your navgation menu.

Summing up

Whereas it does take some adjustment to a very totally different strategy to make your web site’s navigation, it’s effectively well worth the effort, particularly when utilizing a block theme that enables for using the Navigation Block within a header template half.

Now you can do the whole lot with a Navigation Block system as you are able to do with the classical method of creating menus and much more. With just a few extra enhancements on the way in which, you possibly can count on the Navigation Block to be a fully-featured, ready-to-use sub-design system.