– the bodger in action –

Navigation

Categories

Navigation Block

Topics

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:

Select an existing menu: You can choose a menu you have already created on your site.
Add all pages: You will be able to add every existing page of your site, which you will be able to edit and rearrange.
Create empty: This creates a blank menu for you to add pages or links of your choice.

Image showing what the Navigation block looks like before it's been configured.

Select an existing menu

If you have a menu you’ve already created with the Navigation block or one from a previous theme, you can choose to use it upon setting up the Navigation block. To do so, add a Navigation block and choose “Select Menu”. From there, you’ll see all the menus you’ve created, including menus from any classic themes that you can select and use.

Image of the Navigation block setting where you can select from an existing menu.

Add all pages

By selecting this option, you can automatically add all pages on your site to the Navigation block to then customize as you want. This option can help streamline menu creation, depending on the number of pages you have on your site. If you add new pages, they will automatically appear in this menu.

If you’re unable to see this as an option when setting up your menu, it’s due to there being a limited amount of space where the block is being added. When that happens, the setup state simplifies to just “Start Empty” and “Select Menu” to make it easier to get started.

If you use this option, you’ll need to do the following to move around the menu items:

Select an individual menu item in the Navigation block that you’re unable to move around or move a block near.
Click on “Edit” in the Block Toolbar.
From there, select “Convert” on the pop up that appears. This will convert the menu items to links so that you’re able to move them around.
You will then see the options to move around your menu items.

Below is a video showing the steps below.

Start empty to create a new menu

After adding a Navigation block, select the “Start empty” option. From there, you can customize to your liking by having a blank canvas to build from.

Block Customization

Add additional menu items

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

Open the Inserter and select a block to add.
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:

Image showing how the block inserter changes after you've adding a block that's not a link.

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.

Image with a red arrow pointing out where the submenu icon is in the block toolbar.

Below is a video demonstrating this feature in action:

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:

Image showing the List View built into the navigation block.

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 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:

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.

Image with an arrow pointing to the transform menu in the Navigation block.

Manage menus (delete, rename)

If you want to delete the currently selected Navigation Menu, expand the Advanced section within the settings sidebar for the block. Selecting the Delete menu button will delete the Navigation Menu and reset the current Navigation block to its default state.

To make it easier to delete and rename all of your menus in one place, click on the “Select Menu” item in the toolbar and click on “Manage menus” as shown below:

Image showing the Select Menu option open with the Manage Menus section highlighted.

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.

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:

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.

Image showing the various justification settings built into the Navigation block's block toolbar.

Select Menu

This option allows you to change the menu being displayed.

List View

This offers a limited List View that allows you to move around the blocks within the overall Navigation block.

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.

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.

Image showing typography controls and where to find additional controls.

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

Image of the Advanced section of the Navigation block.

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.

Changelog:

Created 2022-01-05

Was this article helpful? How could it be improved?

You must be logged in to submit feedback.

Visit our Facebook page Visit our Twitter account Visit our Instagram account

Visit our LinkedIn account

Code is Poetry