Navigation block

The Navigation block enables you to edit your site’s navigation menu, including its structure and design.

Each menu item in a Navigation block is also a block. Standard block operations are available through the block toolbar, settings sidebar, keyboard shortcuts, and other editor tools.

Add a Navigation block

To add a Navigation block, open the block inserter and select the Navigation block. You can also type /navigation in a new paragraph and press Enter to add the block quickly.

Detailed instructions on adding blocks

Initial view of the Navigation block

When you add a Navigation block for the first time and do not have an existing menu, it starts with a Page List block. The Page List block automatically displays your existing pages. Pages that you add later are also added to the menu automatically.

A Navigation block can use multiple menus. If you already have other menus, a Navigation block will load it. You can switch to one of them or create a blank menu. For more information, see Menu options below.

Before customizing a menu

To add, remove, or reorder individual menu items, first convert the Page List block into individual Page Link blocks by selecting Edit. To customize the menu:

1. Select the Navigation block.
2. Select the Page List block by clicking any menu items.
3. Click Edit in the block toolbar.
4. Click Edit of the popup dialog.

Customize a menu

Customize existing menu items

After selecting Edit, you can customize individual menu items.

1. Select the menu item you want to customize.
2. Open the Content tab in the settings sidebar and update the available settings:

• Text: Change the label displayed in the menu.
• Link to: Select a page or enter any URL.
• Open in new tab: Choose whether the link opens in a new browser tab.
• Edit: Open the linked page for editing.
• View: Open the linked page.
• Description: Add text that may be displayed in the menu if the active theme supports link descriptions.
• Rel attributes: Set relationship attributes for the link.

You can also use the Advanced and Styles tabs to customize the selected menu item as like as common blocks.

Reorder menu items

1. Select the menu item you want to move.
2. Click Move up or Move down in the block toolbar.
   Alternatively:
3. In the List View in the settings sidebar, drag and drop the menu item into a new position.

Note: The following procedures use the block toolbar. The same actions can also be performed from the List View in the settings sidebar.

Add an existing page as a menu item

1. Click + (Add page) in the Navigation block or in the List View in the settings sidebar.
   Tip: When you move the pointer between menu items, a + icon appears so that you can insert a new menu item at that position.
2. Enter part of the page title, then select the page.

Add a new page as a menu item

You can create a new blank page while editing the menu, then add content to the page later.

1. Click + (Add page) in the Navigation block or in the List View in the settings sidebar.
2. Click Create page.
3. Enter the page title.
4. Turn off Publish if you do not want to publish the page immediately.
5. Click Create page.

Add a custom link as a menu item

1. Click + (Add page) in the Navigation block or in the List View in the settings sidebar.
2. Click Add block.
3. Select the Custom Link block.
4. Enter the URL and press Enter.

Add a submenu item

To add a submenu under an existing menu item:

1. Select the menu item.
2. Click Add submenu in the block toolbar.
3. Select a page, enter a URL, or click Add block.

To create a new submenu:

1. Click + (Add page) in the Navigation block or in the List View in the settings sidebar.
2. Click Add block.
3. Select the Submenu block.
4. Select a page, enter a URL, or click Add block. Alternatively, press Escape to close the dialog and enter the submenu label.

To add menu items to the submenu:

1. Click the down arrow for the submenu item.
2. Click + (Add page) in the submenu.
3. Add a Page Link, Custom Link, Submenu, or another supported block.

Delete a menu item

You can delete a menu item like any other block.

1. Select the menu item.
2. Open Options in the block toolbar and select Delete.

Block settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, click the Settings button next to the Save or Publish button.

List View

In the List View, you can drag and drop menu items to reorder them or create a submenu by moving an item beneath another menu item.

Menus and menu items have their own options.

Menu options

Click Options (the vertical three-dot icon) on the right of menu name to access the following menu actions:

• Menus: Switch between existing menus.
• Import classic menus: Convert an existing classic menu for use with the block editor. This option appears only when classic menus are available.
• Create new menu: Create a new blank menu.

Menu item options

When you hover over a menu item, the Options button appears on its right. You can move, add, remove, or otherwise manage the item, just as you would in the editor canvas.

Settings

Use the Settings tab to control how the menu is displayed, including its submenu and mobile behavior. The Advanced section also contains menu-management options.

Display

• Submenu visibility: Choose how submenus open.
  • Hover: Open the submenu when a visitor points to the menu item.
  • Click: Open the submenu when a visitor clicks the menu item.
• Show arrow: Display an arrow next to menu items that contain a submenu.

Overlay

• Overlay visibility: Control whether the menu is collapsed into a menu icon.
  • Off: Never collapse the menu. All menu item labels remain visible.
  • Mobile: Display a menu icon on smaller screens. Visitors can select the icon to view the full menu.
  • Always: Display the menu icon at every screen size.

When you select Mobile or Always, a menu icon preview appears. Select the preview to display the available options.

• Show icon button: Turn this off to display the text labels “Menu” and “Close” instead of icons.
• Icon: Select the icon style.

Overlay template

You can customize the dialog that opens when a visitor selects the menu button. By default, the overlay displays a vertical list of menu items. To customize it:

1. Click Create overlay in the Overlay template section.
2. The Template Parts editor opens. Customize the mobile menu as needed. In the example below, a predefined design is selected from the Design section in the settings sidebar.
3. 3. Click Save.
4. Click Back at the top of the editor.

The following video demonstrates the default mobile menu and a customized mobile menu created using an overlay template.

Advanced

In the Menu name section, you can manage the currently selected menu.

• Menu name: Rename the current menu.
• Delete menu: Delete the current menu. This does not delete any pages, posts, or other content linked from the menu.
• Manage menus: View, create, and update the menus used on your site.

The following Advanced settings are also available: HTML Anchor, Additional CSS Class(es), Additional CSS, and Styles.

Learn more about advanced settings

Styles

Typography

Use Typography settings to customize the font family, size, appearance, line height, letter spacing, and other typography options for the block.

Learn more about typography settings.

Color

Use Color settings to customize menu and submenu text and background colors.
Learn more about color settings.

Learn more about color settings.

Laout

Use Layout settings to control the justification and orientation of menu items.

Learn more about laout settings.

Dimensions

Use Dimensions settings to control spacing between menu items.

Learn more about dimension settings.