How to Create and Manage Multiple Navigation Menus in Twenty Twenty-Two
Content
Many users of the Twenty Twenty-Two theme encounter a common challenge: creating and managing distinct navigation menus for different parts of their site. This is a frequent request for multilingual sites, conditional menus, or simply having a unique header for a specific page template. This guide explains why this happens and provides clear solutions.
The Core Concept: Template Parts and Navigation Blocks
Twenty Twenty-Two is a block-based theme built for Full Site Editing (FSE). Unlike classic themes, menus are not managed in the Customizer or a separate 'Menus' screen (unless legacy support is manually added). Instead, navigation is handled directly within the Site Editor using the Navigation block.
A single, site-wide Header template part is used by default. This is why editing the navigation menu in one place updates it everywhere—all templates are pulling from the same source.
Common Problem: One Menu Changes All Menus
As seen in user reports, a frequent issue is that editing a navigation menu in one header template affects all other headers. This occurs because multiple templates are using the same Header template part and the same Navigation block instance within it.
Solution: Create Unique Header Template Parts
To have truly separate menus, you need to create separate Header template parts for each template (e.g., Home, About, Blog).
- Open the Site Editor (Appearance → Editor).
- Navigate to the Template Parts list and then Header.
- Duplicate the existing default Header template part and give it a descriptive name (e.g., "Header - French").
- Edit this new Header. Select the existing Navigation block and choose a different menu from its settings, or create a brand new Navigation block with unique links.
- Save the new Header template part.
- Go to the Templates list and edit the template where you want this new header to appear (e.g., a page template for French content).
- In the template's List View, locate the Header block. Using its settings in the sidebar, replace the default Header with your newly created one.
- Save the template.
You have now assigned a unique header with a unique menu to a specific template. Repeat this process for any other menus you need.
Important Considerations and Limitations
- Multilingual Sites: This method is a foundational step for creating multilingual sites with plugins like Polylang or TranslatePress. However, these plugins may require additional configuration to work seamlessly with block themes. The issue of the navigation not retaining the language preference (as reported by a user) is often related to how the multilingual plugin generates its links, not the theme itself.
- Legacy Menu System: The traditional 'Menus' screen under Appearance is not available by default in Twenty Twenty-Two. Its appearance for some users is typically due to another plugin or custom code re-adding legacy theme support. Relying on the Site Editor and Navigation blocks is the recommended approach.
- Page Builders: If your site is built primarily with a page builder like Elementor, which creates its own headers and menus, you will need to manage those menus within the page builder's ecosystem, not the WordPress Site Editor.
By understanding the template part system in Twenty Twenty-Two, you can effectively create a flexible navigation structure tailored to your site's needs.
Related Support Threads Support
-
Double header (multilingual)https://wordpress.org/support/topic/double-header-multilingual/
-
different menu’shttps://wordpress.org/support/topic/differetn-menus/
-
Which menu plugin best for Twenty Twenty Twohttps://wordpress.org/support/topic/which-menu-plugin-best-for-twenty-twenty-two/
-
Adding site title to overlay menuhttps://wordpress.org/support/topic/adding-site-title-to-overlay-menu/
-
Nav menu not showinghttps://wordpress.org/support/topic/nav-menu-not-showing-3/
-
Navigation menu no longer retains language preference on translated sitehttps://wordpress.org/support/topic/navigation-menu-no-longer-retains-language-preference-on-translated-site/
-
Customize option with this themehttps://wordpress.org/support/topic/customize-option-with-this-theme/
-
WP 5.9.3 TwentyTwentyTwo : no menu optionhttps://wordpress.org/support/topic/wp-5-9-3-twentytwentytwo-no-menu-option/
-
Where to edit menus?https://wordpress.org/support/topic/where-to-edit-menus/
-
Multiple navigation menushttps://wordpress.org/support/topic/multiple-navigation-menus-2/
-
Language selector Polylang Menu Twenty Twenty-Twohttps://wordpress.org/support/topic/language-selector-polylang-menu-twenty-twenty-two/
-
Menus disabled by default?https://wordpress.org/support/topic/menus-disabled-by-default/
-
Twenty Twenty-two and CSS Herohttps://wordpress.org/support/topic/twenty-twenty-two-and-css-hero/
-
How to display conditional menus with Twenty-twenty two theme?https://wordpress.org/support/topic/how-to-display-conditional-menus-with-twenty-twenty-two-theme/
-
Principal menu + secondary burgerhttps://wordpress.org/support/topic/principal-menu-secondary-burger/
-
TwentyTwentyTwo theme Custom Menu items disappearhttps://wordpress.org/support/topic/twentytwentytwo-theme-custom-menu-items-disappear/