WordPress.org
Get WordPress

How to Create a Menu with the Navigation Block

Are you ready to create a Navigation menu? In Block Themes, you will use the Navigation block to create a Navigation menu while designing your site.

Objectives

After completing this lesson, participants will be able to:

  • Set up a Navigation menu with a block theme.
  • Arrange Navigation block items in a block theme.

Prerequisite Skills

Participants will get the most from this lesson if they have familiarity with:

Readiness Questions

  • Have you created a Navigation menu in classic themes?
  • Have you ever had to recreate a Navigation menu because you changed themes?

Materials Needed

Notes for the Presenter

Lesson Outline

  • Show where the Navigation menu block is located
  • Configure a small Navigation menu
  • Demonstrate all options with the Navigation block toolbar and Options > Settings

Exercises

Create a secondary Navigation menu

Participants have watched you create a Navigation menu. Have them create their own Navigation menu to use in a secondary location, such as a custom template for a social profile landing page, or a sidebar widget.

Assessment

You can include the Site Logo in a Navigation menu.

  1. True
  2. False

Answer: 1. True

Navigation menus created in classic themes are available in block themes.

  1. True
  2. False

Answer: 1. True

You can manage your Navigation block with List View

  1. True
  2. False

Answer: 1. True

Additional Resources

Example Lesson

The Navigation block is a feature within block themes as a way to manage your website’s navigation. Before the Navigation block, we managed website navigation by going to Appearance > Menu. When you use a Block theme, that will happen within the Editor, giving you a live preview of your menu.

There are several ways to add links to your Navigation menu. Start at Appearance > Editor. Then select the Navigation block. You can select the block yourself, or use the List View.

How to Select an Existing Menu

If you have previously created menus, they will be available when using Select menu. If you have a menu created with a classic theme, see the Classic Menus section.

List View showing at left with the Select menu dropdown showing available menus created on this site.

How to Create a New Navigation Menu

When you select Start Empty, the Navigation menu will look like a block inserter prompt. Use this to add links to specific pages.

In the Block options at right, within Advanced, you can rename the menu.

The prompt for inserting a Block is highlighted on the navigation menu

How to Customize the Navigation Menu

Now that the Navigation menu is started, it is time to add links and finish configuring items.

How to Add Navigation Menu Items

After selecting the + Block inserter prompt, the text will shift to an Add link prompt. Here you can search for the name of a page or post already created.

Navigation menu prompting to add link with a dropdown showing suggested pages.

It may be helpful to have a second tab open displaying Pages > All Pages to find the names of pages.

To add a second Navigation item, place the cursor at the end of the initial menu link. Hit Enter and an additional Add link prompt will display.

A second navigation link is displayed prompting the user to search

Notice that you can also use this prompt to create draft pages.

The user has searched for a page that does not yet exist. A prompt to create a draft page is shown with a mouse cursor hovering over it.

Here we have used the Options (3 dots or kebab menu at right) to enable the top toolbar for easier viewing while adding the additional Navigation item so that the block toolbar does not block the visibility of submenu items.

At left, the List View is visible. On the far right, the Options menu is displayed with the Top Toolbar enabled. In the post content, the add submenu item is outlined in red with an add block prompt under the top level menu item

To add an additional layer within the sub-navigation, repeat the process.

List view is shown on the left. On the right, an additional sub-layer is added to a menu item.

Ordering Navigation Menu Items

After getting the menu items in place, you may be ready to move where these links are located.

You can use the Move left or Move right options.

Highlights the move to the right button when a menu item is selected.

You can also use the List View to drag and drop items around. You have two List View options available.

  1. The List View is available for the entire Editor
  2. By selecting the Navigation menu in the toolbar, a List View option specifically for this Navigation block is available.
To the right is a List view for the entire Editor. To the left is the List View option selected for a particular navigation block.

To change the name of a link, click on the item and type in the block to modify it.

To change the link destination, select the Link option in the block toolbar.

Navigation menu with the link button displayed.

To change the name or link, select the options at right.

Navigation menu edit link visible with a highlight with an edit or unlink option visible.

Blocks supported by the Navigation Block

There are some new possibilities with using the Navigation block compared to classic menus. Centering the site logo with additional spacing or providing a search box within the navigation is possible.

Navigation block with site icon, spacer, and search used

The following blocks are supported by the Navigation menu:

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

Transform Navigation Block Items

To transform the items in the Navigation block into a different item, select the transform options.

Navigation block visible with a Site Icon block selected. Below it is the option to transform this block to a custom link or other option.

Manage Navigation Menu

When you have the Navigation Menu selected, within the Select Menu dropdown is Manage menus.

To the left is the List View. To the right is the Select Menu dropdown selected with Manage menus highlighted.

From here, you will see all of the Navigation Menu names.

Manage Navigation menus editor.

If you edit one of these, you can rename and update the menu name.

Editing a navigation menu name in the Manage Editor Menu.

Block Toolbar Items and Options

Each block presents different options to manage the block. The Navigation block includes several options.

Justification

To change the alignment of the Navigation block, you can select the Change items justification option from the block toolbar or use the Settings > Block panel.

Navigation menu bar showing the Change items justification options dropdown and the block settings panel at right for the layout.

Mobile Options

If you would like to modify when a mobile menu toggle is displayed, view the Block settings panel.

Navigation block settings panel with the Mobile options toggled on.

Additional Block Settings Options

If you would like to modify additional settings in your Navigation block, go to Settings > Block.

Navigation block settings from global settings
  1. Configure your Navigation block justification and orientation
  2. Toggle the overlay menu you would like to use and decide how submenus open
  3. Set the color of text, links, and background colors
  4. Adjust the size of fonts and block gap spacing
  5. Advanced settings such as naming the menu, creating an HTML anchor, or defining additional CSS classes

Lesson Wrap Up

Managing Navigation menus with blocks offers a visual way to build menus. We have created the main Navigation menu for your site. It is your turn now to create an additional menu.

Follow with the Exercises and Assessment outlined above.