The old WordPress Menus screen is no longer the only way to build navigation for your site. If you are using a block theme, the WordPress Site Editor gives you a completely visual way to create, style, and manage your navigation menus without touching any code. This guide walks you through the full process, from creating your first menu to adding dropdowns and styling your mobile navigation.
With FSE and block themes, navigation is now a block – the Navigation block. It lives directly in your site’s header template (or wherever you place it). You edit it visually in the Site Editor, style it with the block settings panel, and see the result immediately. No more disconnected menu screen and theme location assignments.
Important: The Navigation block in the Site Editor is available with block themes (like Twenty Twenty-Four, Twenty Twenty-Five, or any FSE-compatible theme). If you are using a classic theme, you still use the traditional Appearance > Menus screen.
If you only see Appearance > Themes and Appearance > Customize (but no Editor), your current theme is a classic theme and does not support the Site Editor. You would need to switch to a block theme to use this workflow.
- Go to Appearance > Editor to open the Site Editor.
- In the left sidebar, click on “Patterns” to see your template parts, or click directly on the canvas where your header appears.
- Find the “Header” template part and click it to open it for editing, OR simply click on your header area in the site preview on the right side of the editor.
- Once the header is selected, click the pencil icon or “Edit” button to enter editing mode for that template part.
You are now editing your site header. The Navigation block should already be there if your theme includes a header with navigation. If not, you can add it.
Inside the Navigation block, each menu item is a separate block – either a Page Link block, a Custom Link block, or a Submenu block (for dropdowns). You can reorder these by dragging them, and you can add new ones using the block inserter or the plus button that appears when you hover over a menu item.
- Click on the Navigation block to select it.
- Click the plus (+) button that appears at the end of your current menu items, or click the “+” icon in the block toolbar.
- A search box appears. Type the name of the page you want to add. WordPress will search your existing pages, posts, categories, and custom links.
- Select the page or post from the search results. It will be added as a new menu item.
- You can also type a full URL in the search box if you want to link to an external site.
To reorder menu items, hover over a menu item until the move handle (six dots icon) appears, then drag it to a new position. You can also use the up/down arrows in the block toolbar to move items.
- Click the plus (+) button inside the Navigation block.
- In the search box, type the full URL (starting with https://).
- Press Enter or click “Add link” to add it as a custom link menu item.
- After adding it, click on the menu item to edit its label text. By default it may show the URL as the label – click on the text to change it to something readable.
You can also check “Open in new tab” for external links by selecting the menu item and looking at the link settings in the right sidebar or by clicking the link icon in the block toolbar.
Method 1: Using the Submenu Block
- Click on an existing menu item that you want to make a parent (the top-level item that will have a dropdown).
- In the block toolbar that appears above the selected item, look for the “Add submenu” button (it may look like an indented list icon).
- A Submenu block replaces the simple link, and you can now add child items inside it.
- Click the plus (+) button inside the Submenu to add child links using the same search-and-select interface as regular menu items.
Method 2: Drag and Drop Nesting
- Add all your menu items at the same level first.
- Drag a menu item slightly to the right to nest it under the item above it. A visual indent indicator appears to show the nesting level.
- Drop it when the indented position is highlighted. It becomes a child item of the parent above it.
The parent item automatically becomes a Submenu block with a dropdown trigger. On hover (desktop) or tap (mobile), the dropdown expands to show the child items.
Settings Panel
- Layout – Choose between horizontal (for desktop navigation) or vertical (for sidebar menus or mobile menus). You can also set justification (left, center, right, space between) and alignment.
- Overlay Menu – Controls when the mobile hamburger menu kicks in. Set to “Mobile” to show a hamburger icon on small screens, “Always” to always show the overlay menu, or “Never” to always show full navigation.
- Wrap on mobile – Lets menu items wrap to a new line instead of activating the hamburger menu on narrow screens (useful for simple menus with few items).
Styles Panel
- Colors – Set text color, background color, and submenu text/background colors separately. This lets you give your dropdown menus a different look from the main navigation bar.
- Typography – Control font family, size, weight, line height, and letter spacing for your menu links.
- Dimensions – Adjust padding, margin, and block gap (spacing between menu items).
- Select the Navigation block and look at the Settings panel on the right.
- Find “Overlay Menu” and set it to “Mobile” – this is the recommended setting for most sites. It shows the full horizontal menu on desktop and switches to a hamburger icon (three horizontal lines) on smaller screens.
- Under “Overlay” in the Styles panel, you can style the mobile menu overlay separately – set its background color, text color, and padding to match your mobile design.
- You can also change the hamburger icon and the close button (X) by clicking on them in the preview and adjusting their settings.
The breakpoint at which the mobile menu activates is controlled by the theme’s CSS, not the block settings. Most block themes set this around 780px. If you need a custom breakpoint, you can add CSS through Appearance > Editor > Styles > Additional CSS.
Saving a Navigation as a Named Menu
- After building your navigation, click the three-dot menu (ellipsis) on the Navigation block in the List View panel on the left, or in the block toolbar.
- You can give the navigation a name to distinguish it from others. The name appears in the block settings sidebar under “Menu” at the top of the Settings panel.
- Click Save in the Site Editor toolbar to save your changes. The navigation is saved as part of the template part.
Adding Navigation to Different Locations
If your theme has separate header and footer areas, you can place different Navigation blocks in each location with different sets of links. Each Navigation block can reference a different saved menu, or you can build them independently.
To add a Navigation block in a new location (such as a footer), open the Footer template part in the Site Editor and use the block inserter to add a Navigation block there.
If your header template part does not have a Navigation block, you can add one. Open the Header template part in the Site Editor, click the plus (+) button to insert a block, and search for “Navigation.” Add it and start building your menu from scratch.
My Menu Changes Are Not Showing on the Front End
Make sure you clicked the blue “Save” button in the Site Editor toolbar (top right). Edits in the Site Editor are in preview mode until you explicitly save them. If you saved and still do not see changes, clear your browser cache and any caching plugins.
The Dropdown Is Not Working on Mobile
Check that your Overlay Menu setting is configured correctly (set to “Mobile”). Also verify that your theme’s scripts are properly enqueued – some lightweight block themes may need the Navigation block’s interactive features enabled. You can check this under your theme’s settings or contact your theme author if dropdowns are broken on mobile.
I Do Not See the Editor Option Under Appearance
This means your current theme does not support Full Site Editing. You need to switch to a block theme. See our guide on choosing the best WordPress theme for your site to find a block theme that fits your design needs. You can also go to Appearance > Themes > Add New and filter by “Full Site Editing” or look for the “Site Editor” badge in the theme listings.
Once you are comfortable with basic navigation, explore these patterns to create more sophisticated menu systems that serve larger or more complex websites.
Mega Menus with Columns
Some block themes support mega menu layouts where dropdown menus expand into multi-column layouts showing categories, featured content, or promotional blocks alongside the navigation links. To create this effect, add a Submenu block and inside it, use a Columns block to arrange menu items into two, three, or four columns. Each column can contain a mix of Page Link blocks, headings for section labels, and even image blocks for visual navigation. Not all themes render this well out of the box, so test on your specific theme before committing to this pattern. The Twenty Twenty-Five theme handles multi-column submenus reasonably well, while simpler themes may need additional CSS to style the mega menu properly.
Conditional Navigation for Different Pages
Block themes allow different templates for different page types. This means you can have different navigation on your homepage versus your blog archive versus your product pages. Create separate header template parts (like “Header – Blog” and “Header – Shop”) and assign different Navigation blocks to each. Then assign these headers to the appropriate templates. This is especially useful for WooCommerce sites where the shop navigation needs different links than the blog navigation, showing product categories in the shop header and blog categories in the blog header.
Adding Non-Link Elements to Navigation
The Navigation block can contain more than just links. You can insert a Search block directly into the navigation for a built-in search bar, add a Site Logo block for branding, or include a Social Icons block to display your social media links inline with your menu. These composite navigation layouts replace the need for separate widget areas in the header that classic themes relied on. Experiment with adding a Search block at the end of your navigation, it provides a convenient search function without taking up additional header space.
Your navigation menu is one of the most critical elements for website accessibility. Users who cannot use a mouse rely on keyboard navigation, screen readers, and other assistive technologies to move through your site. The WordPress Navigation block includes built-in accessibility features, but there are several things you should verify and configure to ensure your menu is usable by everyone.
First, make sure your navigation has a clear ARIA label. When you select the Navigation block, check the Advanced section in the block settings panel on the right. There should be a field for the navigation label, set this to something descriptive like “Main navigation” or “Primary menu”. Screen readers announce this label to users so they know which navigation section they are in. If your site has multiple navigation blocks (header and footer), give each one a distinct label so screen reader users can distinguish between them.
Second, test your dropdown menus with keyboard navigation. Press Tab to move through the top-level menu items. When you reach a menu item that has a dropdown, pressing Enter or the Space bar should open the submenu, and the arrow keys should let you navigate within it. Press Escape to close the dropdown and return to the parent item. The default WordPress Navigation block supports this behavior, but custom CSS or JavaScript modifications can sometimes interfere with it. Test after any styling changes to make sure keyboard access still works.
Third, verify that your navigation has sufficient color contrast. The WCAG 2.1 guidelines require a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Use a free tool like the WebAIM contrast checker to verify that your menu text color against the navigation background color meets these minimums. This applies to all states, default, hover, focus, and active. Light gray text on a white background is a common accessibility failure that is easy to fix by simply darkening the text color in the block’s style settings.
Finally, check that your mobile overlay menu is accessible. The hamburger button should have an ARIA label (like “Open menu”), and the close button should have one too (like “Close menu”). The focus should move into the overlay when it opens and return to the hamburger button when it closes. These behaviors are handled by the Navigation block’s built-in JavaScript, but it is worth testing on an actual mobile device with a screen reader to confirm everything works as expected.
Navigation menus affect your site’s performance in ways that are easy to overlook. Every page on your site loads the navigation, so performance issues in the navigation multiply across your entire site. Here are the key considerations for keeping your navigation fast and lightweight.
Keep your menu structure shallow. Two levels deep (top-level items with one level of dropdowns) is ideal for both performance and usability. Three or more levels of nesting creates complex DOM structures that slow rendering on mobile devices and confuse users trying to navigate through multiple layers of menus. If you find yourself needing three levels of navigation depth, it usually means your site structure needs reorganizing rather than deeper menus, consider consolidating categories or creating landing pages that group related content.
Limit the total number of menu items. A navigation with 50 or more total items (including dropdown children) generates a significant amount of HTML that loads on every page. On mobile, this HTML is hidden behind the hamburger icon but still downloaded and parsed by the browser. For large sites with many pages, use your top-level navigation for the 5-7 most important sections and rely on sidebar navigation, breadcrumbs, or in-page links to help users find deeper content. The goal of your primary navigation is not to link to everything, it is to link to the entry points that guide users to everything else.
If your navigation includes images (common in mega menu patterns), make sure those images are optimized and properly sized. An unoptimized 2MB logo in the navigation loads on every single page of your site. Use compressed PNG or SVG formats for logos, and resize images to the exact dimensions they display at rather than relying on CSS to scale down larger images. WordPress 6.x automatically generates responsive image sizes for uploaded media, but images added directly to Navigation blocks may not always benefit from this optimization.
Navigation that works for a 10-page site becomes unwieldy when your site grows to 50 or 100 pages. Plan your navigation structure to accommodate growth from the start. Use descriptive top-level categories that can contain new subcategories as your content expands. For example, a “Resources” dropdown can accommodate new content types (blog posts, guides, videos, webinars) without changing the top-level structure that returning visitors have learned.
Review your navigation quarterly. Check your site analytics to see which navigation items get the most clicks and which are rarely used. Items that nobody clicks are taking up space and adding cognitive load without providing value. Either move them to a less prominent location (like the footer) or remove them entirely. The Site Editor makes this easy, open the header template part, remove or rearrange items, and save. The visual editing experience means you can see the impact of navigation changes before they go live.
When adding new pages to your site, do not automatically add them to the navigation. Ask whether the new page deserves a permanent place in the navigation that appears on every page, or whether it is better served by internal links from related content, a sidebar widget, or the footer menu. Over time, the tendency to add items to the navigation without removing old ones leads to bloated menus that overwhelm visitors and dilute the prominence of your most important pages. Treat your primary navigation as premium real estate, every item should earn its place by serving a high percentage of your visitors.
The key steps to remember: open Appearance > Editor, find your header template part, select the Navigation block, add your pages and links using the search interface, create dropdowns by nesting items, and set the Overlay Menu to “Mobile” for responsive hamburger navigation on small screens. Save your changes and check the front end.
If you are new to the Site Editor, take some time to explore the Patterns and Styles sections as well. Our guide on getting started with the WordPress block editor covers the fundamentals that apply across all block-based editing – the navigation work you do is part of a bigger FSE system that gives you full visual control over your entire site’s layout and design.
Next step: Open your WordPress admin right now, go to Appearance > Editor, and click on your header template part. Even if your navigation already works, try clicking on the Navigation block to see what styling options are available. You may find improvements you can make in just a few minutes, adjusting spacing between items, changing the font weight for better readability, or configuring the mobile overlay menu colors to better match your brand. Small visual refinements to navigation make a noticeable difference in how professional and polished your site feels to visitors on both desktop and mobile devices.
Beginner WordPress Tips Full Site Editing Navigation Block WordPress Menu Setup
Last modified: March 11, 2026
