Use the Navigation block

The Navigation block in the WordPress editor displays your site’s menu to help visitors navigate between pages. In this guide, you will learn how to add and customize the Navigation block.

In this video, you will learn how to set up and customize a navigation menu. It covers how to add and reorder menu items, use the Navigation block, customize the menu design, adjust mobile settings, and create drop-down menus.

The Navigation block is typically added to your site’s templates, most commonly in the header or footer.

To add a Navigation block, follow these steps:

1. Visit your site’s dashboard.
2. Navigate to Appearance → Editor.
3. Click the homepage preview on the right side to edit your homepage, or select the template or template part where you want the navigation menu to appear (such as the header).
4. Click the + block inserter and search for “navigation”.
5. Click the Navigation block to add it to your site.

For more information, visit our detailed instructions on adding blocks.

To modify specific links within your Navigation block, follow these steps:

1. Use List View to navigate to the individual link you want to customize within the Navigation block.
2. In the block settings sidebar, you can modify:
   • Text: Change the text label that appears in the navigation menu.
   • Link: Update the destination page or URL.
   • Open in new tab: Tick the box to set the link to open in a new tab.
   • Description: Add text that appears if your theme supports link descriptions.
   • Rel Attribute: Set relationships like “nofollow” for SEO purposes.
   • Styles: Click the styles tab to change the font size and other typography settings.

3. In the block toolbar, you can:
   • Change the link: Click the link icon to modify the URL or set it to open in a new tab.
   • Add formatting: Use bold, italic, or other text formatting options.
   • Add submenu: Click the submenu icon to create a drop-down menu.
   • Move the link: Use the left/right arrows to reposition the link within the menu.

For more details on managing menu items, see edit menu items, or learn how to add links and pages, remove menu items, and reorder the links.

If you have created more than one menu, you can choose a different menu for the Navigation block.

Follow these steps to choose a different menu:

1. Use the List View to select the Navigation block.
2. In the block settings sidebar, click the (⋮) next to Menu.

3. Choose from the following options:
   • Menus: Pick from existing menus you’ve already created.
   • Import classic menus: Convert a classic WordPress menu to use with the block editor. You will only see this option if you have classic WordPress menus to convert.
   • Create new menu: Start fresh with a completely new menu.

For detailed menu management, see our guides on adding links, creating drop-downs, and reordering items.

To customize how your Navigation block appears to visitors, follow these steps:

1. Use List View to select the Navigation block.
2. In the block settings sidebar, click the settings icon.

3. Configure the Display settings:
   • Show icon button: Toggle on for a hamburger icon, or off to show “Menu” text.
   • Icon: Choose between two or three horizontal lines for the hamburger icon.
   • Overlay Menu: Select Off, Mobile (default), or Always to control when the menu collapses into an overlay. Design an overlay template to customize the appearance of the mobile menu overlay.
4. If you have submenus, adjust the Submenu behavior:
   • Submenu visibility: Toggle on for click-to-open, or off for hover-to-open submenus.
   • Show arrow: Toggle on to display arrows indicating submenu presence.

For more menu customization options, see customize the menu design.

To customize the visual appearance of your Navigation block, follow these steps:

1. Use List View to select the Navigation block.
2. In the block settings sidebar, click the Styles icon.

3. Customize the appearance using:
   • Typography settings: Adjust font family, size, and weight.
   • Color settings: Change text, background, and link colors.
   • Layout: Adjust the menu’s structure:
     • Justification: Choose left, center, right, or evenly spaced between menu items.
     • Orientation: Select horizontal (default) or vertical menu layout.
     • Allow to wrap to multiple lines: Toggle off to keep navigation on a single line.
   • Dimensions settings: Control padding, margins, and spacing.

For more menu styling options, see customize the menu design.