WordPress 7.0 introduces Customisable Navigation Overlays, giving site owners full control over their mobile navigation menus using the block editor. Previously, when a visitor tapped a hamburger menu icon on a mobile device, WordPress displayed a fixed default overlay with no support for customisation. The design, layout, and content were locked. Customisable Navigation Overlays remove…

WordPressCore's platform is a central hub for WordPress developers and contributors, offering insights into WordPress core development, plugin development, and theme customization. Through articles, tutorials, and community forums, WordPressCore offers insights into WordPress architecture, development best practices, and contributing to the WordPress open-source project. Readers can learn about WordPress coding standards, security guidelines, and performance optimization techniques to build powerful and secure websites with WordPress.

Make WordPress Core

WordPress 7.0 introduces Customisable Navigation Overlays, allowing site owners to build fully custom mobile navigation menus using the block editor's Site Editor. Previously, the mobile hamburger menu overlay was fixed and non-customisable. The new feature uses a dedicated `navigation-overlay` template part area, supports any block content inside overlays, and includes a Navigation Overlay Close block. It is opt-in by default. Theme developers can bundle pre-built overlays via template parts and patterns, register them in `theme.json`, and optionally pre-configure Navigation blocks to reference specific overlays. Known limitations include overlays being tied to the active theme (lost on theme switch), full-screen-only rendering in this initial release, and the feature being scoped only to the Navigation block rather than a general-purpose dialog.

Customisable Navigation Overlays in WordPress 7.0

For theme developers: bundling overlays with your theme