Navigation Block

The Navigation Block is an advanced block in WordPress 5.9 that enables you to edit your site’s navigation menu, both in terms of structure and design. The Navigation block can be used with a block theme or a theme that has support for template editing.

In order to add a Navigation block, click on the add block button and select the Navigation block. You can also type “/navigation” and hit enter in a new paragraph block to add one quickly.

Detailed instructions on adding blocks

Block Configuration

At a high level, there are three ways to add links to the Navigation block:

1. Select an existing menu: You can choose a menu you have already created on your site.
2. Create a new menu: This creates a blank menu for you to add pages or links of your choice.

Select an existing menu

When you add a Navigation block, it will automatically use an existing menu to the block.

You can switch between menus from the “Menu” section on block settings panel.

Create a new menu

If you wish to create a menu, open the “Menu” drop-down menu and select Create new menu. All menu items in the block will be removed and you will find a block inserter button to add menu item.

When you click the block inserter button, it will add a Custom Link block where you can edit the menu text and link.

Block customization

Add additional menu items

There are a few ways to add additional menu items to the Navigation block:

1. Open the Inserter and select a block to add. 
2. Select the overall navigation block and select the + button that appears upon doing so.  After selecting the + icon, you will see a section under “Transform” where you can add additional blocks beyond links too.

Keep in mind that you are only able to add a smaller selection of blocks to the Navigation block at this time. This includes the following blocks:

• Spacer block
• Custom link
• Post link
• Page link
• Category link
• Tag link
• Home link
• Page list
• Search
• Social Icons
• Site Logo
• Site Title

Each comes with their own level of customization after adding. After adding one of these options, you’ll then be shown additional options when adding more blocks to your Navigation block:

Add submenu items

To add submenu items, simply select the block you want to add submenu items to and, in the block toolbar, click on the submenu icon. This will automatically add a submenu item below the block you selected.

Below is a video demonstrating this feature in action:

Change links and title

Each block added to the navigation menu has two parts to it: a link and a title.

To change the title, you can edit the block text directly.

To edit the link, simply select the individual block and select the link icon in the toolbar. From there, an option will open up allowing you to edit what the menu item links to and the title. Below is a demonstration of this functionality:

From there, you will be taken to a dedicated screen for deleting and renaming the menus used across your site. You will not be able to edit your menus directly from this section.

Use a menu across themes

Thanks to how menus are saved in the database, you will be able to reuse menus across other Block themes. If you go from a Block theme to a Classic theme, you will not be able to re-use the menus you created with the Navigation block. 

Block Toolbar Options

Each block has its own block-specific controls that allow you to manipulate the block right in the editor.

The Navigation block has the following options:

Transform menu items into other blocks

Each block within the Navigation block can be transformed to other blocks via the Transform menu. This option makes it easy to build your menu with different blocks.

Move blocks

There are two ways you can move blocks once you’ve added them to the Navigation block. Using these tools, you can rearrange each menu item as you’d like. 

If you are trying to make quick changes, the movers in the toolbar that you normally see when interacting with blocks are likely the easiest option:

For more advanced and complex moving, check out the List View built into the Navigation block. To access this, select the overall Navigation Block then select the List View Icon:

Below is a video demonstrating the movers in action:

If you’re unable to move around all menu items or certain menu items, it’s likely that you need to convert the menu to links first. This happens if you use the “Add All Pages” option and there are instructions for how to convert to links in the section above.

Change Justification

• Justify items left: align the overall block and it’s contents to the left. 
• Justify items center: align the overall block and its contents to the center. 
• Justify items right: align the overall block and its contents to the right.
• Space between items: automatically add space between menu items.

Block Settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. You can use these settings to customize the overall block.  If you do not see the sidebar, simply click the ‘cog’ icon next to the Publish button.

Layout

Layout settings allow you to change the justification and orientation of child blocks nested inside their parent blocks, with layout controls found on the parent blocks.

This article provides details about layout settings. 

Menu

You can select other existing menus using the drop-down menu on the Menu section. Select Create a new menu in the drop-down menu if you want to start a new menu from scratch, or select Manage menus to open the Navigation Menus admin panel.

Display

Currently, this section consists of one setting that allows you to control what is shown for the Navigation block across different screen sizes, allowing for a responsive menu option:

• Off: This turns off displaying a menu icon when on smaller screen sizes. 
• Mobile: This enables a menu icon to be displayed when viewing your site on smaller screens that one can click on to see the entire menu. 
• Always: This enables the menu icon to be displayed regardless of screen size. 

At default, this option is set to Mobile, meaning it will show a menu icon on smaller screen sizes automatically. When you click on the menu icon, it will open up an overlay that shows your entire menu. 

Color

These color settings allow you to customize the appearance of your Navigation block. Pick a color from the suggestions, or add a custom color using the color picker or by adding a color code.

See this guide for more information about changing colors.

Typography

Typography settings allow you to change a block’s font size, appearance, line height, letter casing, and spacing.

Get more details about changing typography settings.

Dimensions

The Navigation block currently supports Block Spacing, which allows you to add custom spacing between each block. This makes it easy to set a uniform appearance across the entire block.

Learn more about dimension controls.

Advanced

The advanced tab lets you accomplish a few things:

• Rename the menu.
• Delete the menu.
• Add an HTML anchor.
• Add a CSS class in order to style the block as you’d like.