Use the Navigation block

The Navigation block 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.

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.

When you first add a Navigation block, it displays your site’s menu. If you haven’t created a custom menu yet, it will automatically include a Page List block that displays all published pages and updates automatically when new pages are published.

To customize which pages appear, add custom links, or change the order of menu items, it will first ask you to convert the Page List block to individual links.

Follow these steps to convert the Page List block:

1. Use the List View to navigate to the Page List block inside your Navigation block.

2. Click the Edit button in the block toolbar:

3. A warning will appear to say that the page list will no longer update automatically. Click Edit to confirm.

Now you will be able to add new links and pages, remove menu items, and reorder the links in your menu.

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:
   • Label: Change the text that appears in the navigation menu.
   • URL: Update the destination page or link.
   • Description: Add text that appears if your theme supports link descriptions.
   • Title Attribute: Add tooltip text that appears on hover and helps screen readers.
   • Rel Attribute: Set relationships like “nofollow” for SEO purposes.
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.

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. Adjust the Layout settings:
   • Justification: Choose left, center, right, or evenly spaced between menu items.
   • Orientation: Select horizontal (default) or vertical menu layout.
   • Allow to wrap multiple lines: Toggle off to keep navigation on a single line.
4. Configure 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.
5. If you have submenus, adjust Submenu behavior:
   • Open on click: 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:
   • Color settings: Change text, background, and link colors.
   • Typography settings: Adjust font family, size, and weight.
   • Dimensions settings: Control padding, margins, and spacing.

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