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 template part. To add a Navigation block, follow these steps:
- Visit your site’s dashboard.
- Navigate to Appearance → Editor.
- Click on the right side to start editing the homepage, or select the template or template part where you want the navigation menu to appear.
- Click the + block inserter and search for “navigation”.
- 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 automatically shows all your published pages as a Page List block. To customize which pages appear or add other items like custom links, follow these steps:
- Use the List View to navigate to the Page List block inside your Navigation block.
- Click the Edit button in the block toolbar that appears after you select the Page List block.
- Confirm that you want to edit the page list by clicking Edit.
The Page List block will convert to individual page links, allowing you to customize your menu by adding, removing, or reordering items.
If you want to use an existing menu instead of the default page list, or if you’re switching between menus, follow these steps:
- Use the List View to select the Navigation block.
- In the block settings sidebar, click the (⋮) next to Menu in the List View section.
- 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. Classic menus will display with “Classic menu:” before the menu name.
- Tools: Select “Create new menu” to 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:
- Use List View to navigate to the Navigation block to select it.
- In the block settings sidebar, click the cog/gear icon to change the menu layout and display.
- 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.
- Configure Display settings for mobile devices:
- 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.
- 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.
To customize the visual appearance of your Navigation block, follow these steps:
- Click the Navigation block to select it.
- In the block settings sidebar, click the Styles icon, which looks like a black and white circle.
- 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.
- Click Save to apply your changes.
For comprehensive menu styling guidance, see how to customize the menu design.
To modify specific links within your Navigation block, follow these steps:
- Use List View to navigate to the individual link you want to customize within the Navigation block.
- In the block settings sidebar, you’ll see Link Settings where 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.
- In the block toolbar that appears when you select a link, 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.