How to Build Clear Navigation in a WordPress Block Theme

In a WordPress block theme, your site navigation is built using the Navigation block inside the Site Editor. If you are used to classic themes, you might look for Appearance > Menus, but block themes do not use that old screen. Instead, menus are treated as modular blocks that sit directly inside your page templates and template parts.

This tutorial shows you how to plan, build, and test your WordPress block theme navigation. By following these steps, you will create a clean menu in the Site Editor, ensure it adapts properly on mobile screens, and verify that changes appear correctly across your entire website without breaking individual page layouts.

Prerequisites Before You Start

Before opening the Site Editor, make sure you have the following ready:

• Administrator access: You need full permissions to access the WordPress dashboard and template editor.
• An active block theme: Themes like Twenty Twenty-Four, Twenty Twenty-Three, or any theme designed for Full Site Editing. If you recently moved from a classic theme, review How to Change a WordPress Theme Without Losing Site Features to make sure your site features transferred smoothly.
• Published core pages: Create your primary pages first (such as Home, About, Blog, Services, and Contact). It is much easier to attach existing pages to a menu than to create blank links during layout design.

Step 1: Confirm Block-Theme Capabilities

Let us first verify that your theme supports block-based navigation. In your WordPress admin dashboard, look at the left-hand sidebar menu under Appearance.

If you see only Themes and Editor, your site is using a full block theme. If you still see Menus and Widgets, you are running a classic theme or a hybrid theme. In a block theme, all layout adjustments happen inside the Site Editor.

Inside the block theme system, two terms are very important:

• Template: The overall layout structure for a specific page type, like your Front Page, Single Post, or 404 error page.
• Template Part: A reusable block area intended to appear on multiple templates, such as your site Header or Footer.

Decision rule: Never place a standalone Navigation block on an individual template unless that specific page requires a completely custom, one-off menu. Always place your main menu inside the Header template part. That way, any link you add or change will update across the entire site automatically.

Step 2: Plan Essential Menu Destinations

Clear navigation helps visitors find key content in just one or two clicks. A crowded navigation bar confuses users and causes layout overflow on smaller laptop screens.

Aim for five to seven top-level links. If an item does not serve the majority of your visitors, consider moving it to a dropdown submenu or placing it in the website footer.

When selecting pages for your menu, link directly to clean, canonical addresses. Google advises webmasters to use fully qualified, absolute URLs so that search crawlers and visitors always reach the intended destination without unexpected redirects Build and Submit a Sitemap.

Example Menu Architecture

Here is an illustrative layout plan for a content or service website:

Menu Label	Destination Type	Placement Location
Home	Front Page URL	Top level
Services	Parent Page	Top level (with submenu)
- Web Design	Child Service Page	Submenu under Services
- SEO Audits	Child Service Page	Submenu under Services
Blog	Posts Archive Page	Top level
About	Static Information Page	Top level
Contact	Inquiry Page	Top level (or call-to-action button)

Step 3: Edit the Intended Navigation Area

Let us open the Site Editor and locate your navigation block.

1. Go to Appearance > Editor.
2. Click on Patterns (in some WordPress versions, this is labeled as Template Parts).
3. Select Header. Choose the default header used across your site.
4. Click the main editing canvas or the pencil icon to begin editing.

Working in the canvas can sometimes make it difficult to click the right block. To avoid selecting the wrong element, open the List View. The List View icon looks like three horizontal stacked lines in the top toolbar.

In List View, expand your Header group. Look for the block named Navigation. Click directly on that item in the List View. Now, your settings panel on the right side will strictly control the navigation block.

Adding and Reordering Items

With the Navigation block selected:

1. Click the plus (+) icon inside the Navigation block to add a new item.
2. Type the name of your published page into the search field. Select the page from the list to create a Page Link block.
3. To turn an item into a dropdown menu, click the item in the editor toolbar, click the Add Submenu icon, and insert your child links.
4. To change the order of your items, open the List View, find the links nested inside the Navigation block, and drag them up or down to your preferred position.

Step 4: Check Labels and Link Targets

After your links are in place, inspect their settings to prevent usability problems.

Click on each individual link item and examine the Settings tab on the right-hand panel:

• Label: Keep link labels short and clear. Use plain words like "About" or "Contact" rather than long, confusing phrases.
• Open in new tab: Leave this setting toggled off for internal links. Internal links that force new tabs break browser history navigation and frustrate mobile users. Reserve new tabs only for external resources or downloadable PDF files.
• Link title and rel attributes: Only fill these if you have a specific accessibility requirement or need a nofollow attribute on an external sponsor link.

Step 5: Test Mobile and Keyboard Access

Navigation must work effortlessly on both touchscreens and desktop keyboards. A menu that looks great on a widescreen monitor can easily fail on a phone if the mobile trigger is misconfigured.

Configuring the Responsive Overlay

Select the parent Navigation block in the List View. Look at the right sidebar under the Overlay Menu settings. You will see three options:

• Off: The menu will always display as a full horizontal list. Do not use this unless your menu contains only two or three very short links, as it will break on small screens.
• Mobile: The menu displays as a horizontal bar on desktop computers, but collapses into an accessible hamburger icon button on mobile screens. This is the recommended choice for almost every website.
• Always: The menu is hidden behind an icon button on all devices, including desktops.

Choose Mobile. You can also customize the icon style and whether the opened mobile menu displays a close button.

Keyboard and Focus Testing

Website accessibility requires that visitors who do not use a mouse can still browse your site:

1. Save your changes in the Site Editor.
2. Open your website in an incognito or private browser window.
3. Press the Tab key on your keyboard repeatedly.
4. Ensure that a visible focus outline highlights each menu item in order.
5. When you reach a dropdown parent, press Enter or the Spacebar to verify that the child links expand properly.

Step 6: Verify Shared Template Effects

Because block themes link templates together dynamically, you must confirm that editing your header did not accidentally alter other areas or disconnect the template part.

When you click Save in the top right corner of the Site Editor, WordPress displays a confirmation panel showing exactly what will be saved. Look at this list carefully:

• If it lists Header (Template Part) or Navigation, confirm and proceed.
• If it shows that you modified an entire base template (such as Page or Single) when you only meant to change the menu, step back. You may have detached the header or added a template-specific block by mistake.

Once saved, open multiple live pages on your site: your home page, a standard blog post, and a static page. Confirm that the exact same navigation appears in the header across all three templates.

Common Mistakes to Avoid

When configuring block theme menus, watch out for these frequent mistakes:

• Editing menus inside the template canvas directly: If you edit the navigation while viewing the "Single Post" template rather than the Header template part, you risk detaching the shared header, causing posts to show a different menu than pages.
• Creating excessive dropdown nesting: Nesting submenus three or four levels deep makes touch navigation nearly impossible on mobile devices. Keep your dropdowns to a single tier.
• Creating duplicate Navigation blocks: When testing, users sometimes insert a new Navigation block without deleting the old one. This leaves hidden menus or conflicting styles in the code.
• Using custom HTML anchors for internal pages: Always use the Page Link option to connect pages. If you type relative URLs manually (like /about), you may create broken links if your permalink structure changes later.

How to Verify Your Result

Run through this quick five-point verification routine to ensure your menu is production-ready:

1. List View check: Verify in the Site Editor that your Navigation block sits cleanly inside the Header template part without stray container blocks around it.
2. Multi-page audit: Visit at least three different page types (Home, Blog post, and Contact) to make sure the header looks identical on all of them.
3. Mobile responsive test: Resize your desktop browser window to a narrow phone width, or test on an actual mobile device. Click the hamburger icon to confirm it opens smoothly and that every link is tappable.
4. Link target audit: Click every single link in the menu to verify that none result in a 404 error page.
5. Keyboard audit: Use the Tab and Enter keys to navigate from the first link to the last link without getting trapped.

Limitations and Rollback Steps

The Site Editor does not have an independent "trash" screen for menus like the old WordPress menu manager. If you make a mistake and save an unwanted layout change, do not panic. WordPress provides built-in revision history.

To roll back a template part:

1. Open Appearance > Editor > Patterns > Header.
2. Open the right-hand settings panel and select the template part name.
3. Click on Revisions.
4. Review the timestamps of previous saves and choose a version saved before your mistake occurred.
5. Click Restore to revert the header back to its previous working state.

If you have heavily customized theme files and want to ensure structural changes stay safe during parent theme updates, consider working with a child theme. You can learn more about this approach in How to Choose a Child Theme for WordPress Customizations.

Next Steps

Now that your primary header menu is established, test your footer area. Open your Footer template part in the Site Editor and apply the same Navigation block principles to create a secondary menu. Use the footer for secondary destinations like your Privacy Policy, Terms of Service, and copyright notices, keeping your main header lean and user-focused.

Frequently Asked Questions

Where did the Appearance > Menus screen go in my WordPress dashboard?

If you are using a modern block theme, the classic Menus screen is replaced by the Navigation block inside the Site Editor. You can build, adjust, and reorder your navigation links by going to Appearance > Editor > Patterns > Header and selecting the Navigation block.

Why did my navigation menu change only on my blog posts but not my pages?

This happens when the Navigation block is edited directly on a specific page template rather than within the shared Header template part. To keep menus uniform across your whole site, always edit your navigation within the Header template part so changes propagate everywhere.

How do I make a phone-friendly hamburger menu in a block theme?

Select the parent Navigation block in the Site Editor, open the block settings sidebar on the right, and find the Overlay Menu setting. Set this option to 'Mobile'. This keeps your full horizontal menu on desktop screens while collapsing it into a clean hamburger icon on mobile devices.