Customizable Navigation Overlays are a new feature for WordPress 7.0 that gives you full control over “mobile” navigation menus using blocks and patterns.

We’re inviting the WordPress community to test this feature and share feedback. We’d love to hear from you by February 9, 2026 to allow time for refinements before the feature freeze.

Why This Change?

Mobile navigation overlays have been a significant pain pointPain point Pain points are “places where you know from research or analytics that users are currently getting hung up and have to ask questions, or are likely to abandon the site or app.” — Design for Real Life for WordPress users. Users have had very little control over the design and content of their mobile navigation menus. When someone taps a hamburger menu on mobile, they’ve been stuck with WordPress’s default overlay – no ability to customize branding, add promotional content, adjust styling, or control the layout.

This creates real problems:

• Sites can’t maintain brand consistency on mobile
• No way to add calls-to-action or promotional content in the mobile menu
• Mobile navigation feels disconnected from the rest of the site design
• Users resort to complex workarounds or custom code

Custom Navigation Overlays addresses this by giving users full control over their mobile overlay menus using the familiar blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor.

What’s New?

Navigation Overlays enable users to:

• Create custom mobile overlay menus using blocks and patterns
• Control overlay design, content, and behavior – add branding, images, calls-to-action, and more
• Manage multiple overlay variations – create different overlays for different contexts

Custom overlays are saved as template parts, which means they’re reusable components you can manage alongside your other theme templates. As such Themes can also provide their own Overlays suited to their particular design and use case.

This feature is targeting WordPress 7.0 and represents the first iteration of customizable navigation overlays. We’re shipping a solid v1 foundation that solves the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. user need, with plans to expand capabilities in future releases based on community feedback.

We’d Love Your Feedback

We’re inviting the WordPress community to test this feature before it ships in 7.0. Your feedback will help us:

• Catch bugs and edge cases
• Validate the user experience is intuitive
• Ensure compatibility across themes and use cases
• Identify what works well and what needs refinement

Timeline: We’d appreciate feedback by February 9, 2026 (this gives us time to address issues before the February 19 feature freeze)

How to Test

Testing Environment

Quick Start with Playground:

1. Open this Playground instance.
2. You’re ready to test in the Site Editor.

What you’ll need:

• Latest Chrome, Firefox, or Safari browser
• A Navigation block inserted to access overlay controls

What to Test

We’ve outlined three testing scenarios below. You don’t need to test everything – pick what interests you or matches your use case.

Scenario 1: Create Your First Custom Overlay

Try this if you: Want to experience the feature as a first-time user

Steps:

1. Insert a Navigation block on a page or in a template
2. Look for the overlay customization controls in the block settings
3. Create your first custom overlay
4. Preview it in the editor
5. View it on the frontend in mobile view

What we’d love feedback on:

• How easy was it to discover the overlay controls?
• Was the creation process clear and intuitive?
• Does the overlay look correct on mobile?

Scenario 2: Build a Custom Overlay from Scratch

Try this if you: Want to design a custom overlay with your own blocks and styling

Steps:

1. Create a new overlay starting with blocks (not a pattern)
2. Add various content: headings, images, buttons, navigation links, etc.
3. Style your overlay: colors, spacing, typography
4. Test submenu behavior
5. View on frontend mobile

Bonus: Try creating multiple overlay variations and switching between them.

What we’d love feedback on:

• Can you build the overlay design you want?
• Are the design controls sufficient?
• Does switching between overlays work smoothly?

Scenario 3: Test Edge Cases

Try this if you: Want to help us find bugs and boundary conditions

Ideas to test:

• Try creating an overlay without a close button – what happens?
• Test with different WordPress themes
• Delete a custom overlay and see how Navigation blocks handle it
• Add multiple close buttons to one overlay
• Test with complex block combinations

What we’d love feedback on:

• Does anything break or behave unexpectedly?
• Are error messages (if any) helpful?
• How does the feature handle edge cases?

Testing Tip: Try Both Editor and Frontend

For any scenario you test, it’s helpful to check both:

1. ✅ Editor experience – Does it work while editing?
2. ✅ Frontend experience – Does it work on the live site (especially mobile)?

You can use browser DevTools device emulation or resize your browser to mobile width to test.

SEO and AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) Feedback Wanted

We’re actively discussing the technical implementation of overlay markup and would especially value input from SEO and accessibility experts.

The question: Where should the overlay markup be placed in the HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites.?

Current options under consideration:

• Within the Navigation block’s <nav> element
• Outside the <nav> element (as a sibling)
• At the top of the page’s HTML markup
• At the bottom of the page’s HTML markup

Each approach has potential implications for:

• SEO: How search engines crawl and index content
• Accessibility: Screen reader behavior, navigation landmarks, focus management
• Performance: Initial page load and rendering

If you have expertise in SEO or accessibility, we’d appreciate your perspective on which approach would best serve users. Feel free to share relevant standards, best practices, or real-world considerations that should inform this decision.

Relevant discussion: https://github.com/WordPress/gutenberg/issues/74583

How to Share Feedback

Comment on this post with your findings, or create GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged by the repository owner. https://github.com/ issues in the WordPress/gutenberg repository and link to them in your comment.

Helpful to include:

• Browser and device/theme used
• Screenshots or recordings (visual evidence is super helpful!)
• Clear steps to reproduce any issues
• Your assessment of severity (if reporting a bug)

Example:

Browser: Chrome 131, macOS
Theme: Twenty Twenty-Five

Issue: Overlay close button not visible on dark backgrounds

Steps to reproduce:
1. Create overlay with dark background
2. Add default close button
3. View on frontend mobile

Expected: Close button should be visible
Actual: White close button disappears against dark background

Severity: Medium - workaround is to add custom close button

[Screenshot]

Known Limitations (v1)

This is the first iteration of Navigation Overlays for WordPress 7.0. Some capabilities are intentionally out of scope for this release and will be considered for future versions:

• Mega menus
• Dialog-block reuse for overlays
• Inline editing overlays directly in main canvas (currently must edit via template part editor)
• Custom mobile breakpoints

See the complete scope: https://github.com/WordPress/gutenberg/issues/73084

We’re focused on shipping a solid foundation that solves the core user need. Future releases will expand capabilities based on community feedback and real-world usage.

Resources

• Demo Video: Navigation Overlays Walkthrough
• WordPress 7.0 Roadmap
• GitHub Tracking Issue #73084

Thank you for testing! 🙏

Your feedback will help ensure Navigation Overlays provide a great experience for WordPress users managing mobile navigation. This is a v1 release, and your input will shape future iterations of the feature.

#call-for-testing #wordpress-7-0 #navigation

+make.wordpress.org/core/