Use a Navigation Block to create Block Themes Menus in WordPress

Managing Navigation Menus with Block Themes

The Navigation Block will release with WordPress 5.9 and be available in Block Themes. With it, you can create navigation menus while viewing how the content will display. Before the Navigation Block, we managed website navigation by going to Appearance > Menu. When you use a Block theme, that will all change.

Where is the Navigation Block?

To get to the new Navigation Block, go to Appearance > Editor. From here, you can hover your mouse over the navigation menu area. In our example, we have the List View displayed. You could access the Navigation from here as well.

Block theme > appearance > editor > navigation

You’ll then be presented with two methods of choosing menus.

Choose an existing menu

If you have already created your menu, you can select an existing menu. You can see both menus made in Block Themes and those created in a Classic Theme, or before installing a block theme.

navigation block menu > select menu

Create a new menu

If you choose the Start Empty option, you will be presented with an add block prompt. Select that + icon.

navigation menu > start empty

You will be presented with a search option to locate the Page or Post you would like to include. It may be helpful to open Pages > All Pages in another browser tab to review what you’ve named the pages. Once you’ve found the page, click on it and it will be added to the navigation.

add link drop menu showing a search box

To add an additional link, hit Enter on the keyboard.

A second navigation link is highlighted. The user hit enter after adding the first navigation block item.

How to add a submenu link

Do you want to insert drop menus? Select the Add submenu link.

Then Add block and search for the page or post as before. You can repeat the process to create a submenu of a submenu as well.

 

How to customize your navigation

visible is the list view at left and a navigation menu with a search block included

Would you like to do more to customize your navigation? You can add these additional menu items:

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

Managing menus

Ordering menu items

In addition to using the List View within Appearance > Editor, you can also access a List View specific to just the Navigation block.

Select the entire Navigation Block, then list view, for the pop up modal of just the navigation block list view

Shuffling menu items

If you’d like to move the blocks within the navigation around, you can use either List View, or the < > blocks.

mouse hovering over the move right or left options

Additional options

Notice that the three-dot kebab menu at the right reveals additional options as well, including more settings for individual blocks.

expanded view of the 3 dot kebab menu

Alignment options

To align the content inside the menu, select the entire navigation block.

Navigation alignment options dropdown displayed

Mobile navigation menu

If you’d like to specify mobile navigation behavior, you can specify that within the block options panel shown at right in this image.

right panel showing block options for mobile navigation

Other Navigation Block settings

Notice you can modify the colors, typography, and menu name in the navigation block settings.

navigation block settings for typography, color, size, and menu name

 

Conclusion

Managing menus is essential to every website. The new approach to creating menus within block themes may feel very different than how we created menus in classic themes. As you practice using the menus more, you’ll appreciate the ability to view menus within the Editor and options to include the site logo or search blocks.