- Block Configuration
- Block Customization
- Block Toolbar Options
- Block Settings
- Advanced Settings
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 can be found here.
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.
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.
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.
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.
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
- 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:
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:
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.
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:
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.
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:
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.
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:
- 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.
This option allows you to change the menu being displayed.
This offers a limited List View that allows you to move around the blocks within the overall Navigation block.
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.
These options allow you to control the overall positioning of the Navigation block. This includes the following:
- Justification: The setting allows you to justify the items in the Navigation block to the left, center or right. Alternatively you can insert space between items.
- Orientation: This setting allows you to switch between vertical and horizontal orientations for all items within the Navigation block.
- All to wrap to multiple lines: This is an option that you can toggle on and off that allows the Navigation block to overflow into multiple lines if there isn’t enough space.
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.
These color settings allow you to customize the appearance of your Navigation block even further with options for the following:
- Text: Controls the color of the text of the Navigation block items.
- Background: Controls the background color of the Navigation block items.
- Submenu and overlay text: Sets both the color of the submenu text and the overlay built into the responsive display options.
- Submenu and overlay background: Sets both the color of the submenu background and the overlay built into the responsive display options.
These options allow you to customize the typography of the Navigation block items. This block currently supports the following options:
- Font family
- Line height
- Letter case
- Font size
You can access all options you need by clicking on the + button found in this section:
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.
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.
- Created 2022-01-05