Primary Menu

The Primary Menu is the main navigation for the site. It helps visitors understand the overall structure of the content and provides clear pathways to key pages and sections. Depending on the site’s content and design, the Primary Menu can range from a small set of simple links to a more complex navigation system with dropdowns or full mega menus.

Regardless of complexity, the Primary Menu is designed to be edited intentionally and with care, since it appears across the site and plays a critical role in usability and accessibility.

Primary menu purpose

The Primary Menu typically includes links to:

  • Top-level pages or sections
  • Key landing pages
  • High-priority or frequently accessed content

From a usability perspective, it’s generally best to:

  • Limit the number of top-level items. The ideal number of top-level items depends on the Header layout, but commonly ranges from 3 to 5 items.
  • Group related links into dropdowns or submenus
  • Avoid overwhelming users with too many choices at once

Accessing the primary menu

The Primary Menu is managed as a template part in the Site Editor.

  1. From the WordPress dashboard, go to Appearance → Editor
  2. Select Patterns, then All template parts
  3. Click primary-menu to begin editing

Alternatively, while editing the header template, select the Primary Menu block and click Edit in the block toolbar. Both approaches open the same Primary Menu template part.

Primary menu structure

The Primary Menu is built using a structured set of blocks designed specifically for navigation.

Because of its complexity and importance, it’s strongly recommended to:

  • Use List View to select blocks accurately and assist with editing
  • Preserve existing group structure, nesting, and settings

Accidentally moving or removing blocks can break layout, dropdown behavior, or responsive styles.

Editor experience

Unlike most page content, the Primary Menu editor view is focused on structure and link management, not a visual representation of the front-end design.

Because navigation menus — especially dropdowns and mega menus — rely on complex structure and responsive behavior, the editing experience is focused on organizing menu structure and managing links.

This means dropdowns and mega menus may not visually open and close as they do on the front end. Spacing, alignment, and layout may look simplified in the editor. Visual styling is handled by the design system, not the editor.

This is expected behavior. When editing the Primary Menu, focus on content, structure, and hierarchy, then review the front-end display after saving to confirm visual behavior.

Types of menu items

The Primary Menu supports three types of top-level menu items. Each serves a different navigation need.

  1. Standard Menu Item (simple link with no dropdown)
  2. Standard Menu Item with Dropdown (single dropdown menu)
  3. Mega Menu Item (dropdown with content areas and multiple submenus)

Standard menu item

A Standard Menu Item is a single link with no dropdown.

When to use it

  • For simple navigation needs
  • When a top-level link doesn’t need supporting links
  • For small or minimal menus

How to create a standard menu item

  1. Add a Standard Menu Item block
  2. Click the “Enter label text…” placeholder
    • This adds a Navigation Link block inside the menu item
  3. Type the menu label text
  4. Select the Navigation Link block
  5. Click Link in the block toolbar
  6. Enter a destination:
    • Full URL
    • Relative URL (for example, /contact)
    • Or start typing a page or post name to search existing content

Opening links in a new tab (use sparingly)

By default, menu links open in the same tab, which is best for accessibility.

If needed:

  1. Add the link
  2. Click the Pencil icon to edit the link
  3. Open Advanced
  4. Enable Open in new tab

Use this only when there’s a clear reason and it’s important for the user to keep the existing page open.

Standard menu item with dropdown

A Standard Menu Item with Dropdown allows multiple links to be grouped under a single top-level label.

When to use it:

  • To group related pages
  • To reduce the number of top-level menu items
  • To keep the Primary Menu easier to scan

How to create a dropdown menu item

  1. Add a Standard Menu Item block
  2. Select the Standard Menu Item block (Using List View is strongly recommended)
  3. In the block settings sidebar:
  • Enable Simple Dropdown
  • Enter the Menu Item Toggle Label (this text appears as the top-level menu label)

Adding dropdown links

  1. Inside the Standard Menu Item, add or select a Navigation Link block
  2. Use Duplicate (from the three-dot menu) to create additional links
  3. For each Navigation Link:
  • Enter the link text
  • Add the destination URL

All Navigation Links inside this block will appear in the dropdown.

Mega menu item

A Mega Menu Item is the most advanced Primary Menu option. It allows rich content and multiple submenus within a large dropdown panel.

When to use it:

  • For large or content-heavy sites
  • When top-level sections require explanation or grouping
  • When navigation includes many related links

Because of its complexity, Mega Menus should be edited carefully and intentionally.

Managing the mega menu

A Mega Menu Item includes several key components:

  • Mega Menu Item – Top-level menu label
  • Mega Dropdown – Group block that contains the dropdown layout
  • Mega Dropdown Card – Group block for featured content (often an image, text, and link)
  • Mega Dropdown Columns – Group block containing one or more submenus

This structure is already in place when a Mega Menu Item is added.

Step 1: Add the mega menu item

  1. Add a Mega Menu Item block
    • The dropdown structure is added automatically with placeholder content

Step 2: Set the top-level label

  1. Select the Mega Menu Item block
  2. In the block settings sidebar, enter the Mega Menu Item Label
    • This is the text shown in the Primary Menu

Step 3: Edit the featured content (Mega Dropdown Card)

  1. Select the Image block located inside the Mega Dropdown Card group
  2. Replace the image using the Media Library
    • Use an appropriately sized image to match the design.
    • Image sizes should be consistent across each mega menu.
  3. Edit the text content inside the card
    • This may include Paragraph blocks, Button blocks, Headings

Accessibility note: If a Heading block is used inside a mega menu, enable Decorative Heading and select an appropriate style size. This prevents heading tags from appearing in the Site Header before the main page content, which is important for accessibility and document structure.

Step 4: Build submenu columns

  1. Locate the Mega Dropdown Columns group
  2. Each submenu should live inside its own Column block. The mega menu can support up to three columns with submenus.

Note: Menu titles should be Paragraph blocks. If you use a Heading block, enable Decorative Heading

Step 5: Build submenu navigation links

Each submenu uses a Navigation block.

If the menu does not yet exist, the editor will display a message indicating the Navigation Menu is unavailable. In this case, click Create a new menu link in the editor and the Navigation block will be added.

  1. Select the Navigation block
  2. Use the block settings sidebar to build the menu (recommended)

Adding menu links from the sidebar

  1. In the sidebar, click +
  2. Choose a link type:
    • Page Link (for existing site pages)
    • Custom Link (for internal or external URLs)
  3. Enter the page name or URL
  4. Click Submit icon or press Enter

Repeat this process to add all submenu links. Menu items can be reordered as needed.

Publishing changes

The Primary Menu is a template part, and previewing changes is not available.
Once updates are complete click Save to publish your changes
Changes will take effect immediately wherever it’s used.

Making changes safely

Navigation is one of the most important usability features on a site. Thoughtful edits go a long way. Before editing the Primary Menu:

  • Use List View to understand structure
  • Avoid removing or rearranging Group blocks
  • Make small, intentional changes
  • Save and review carefully

Tips for editors

Reduce top-level items

Fewer top-level items improve scannability and decision-making. Use dropdowns to group related content.

Choose the simplest option that works

  • Use Standard Menu Items when possible
  • Use Dropdowns when grouping is needed
  • Use Mega Menus only when complexity is justified

Respect structure

If a block feels hard to move or edit, it’s often intentional. Check List View before making changes.

Keep accessibility in mind

  • Avoid opening links in new tabs unless necessary
  • Use Decorative Headings inside navigation dropdowns
  • Write clear, descriptive menu labels