Skip to content

Customisable Navigation Overlays #73084

@getdave

Description

@getdave

Goal

Empower users to take full control over the design and content of mobile navigation overlays – creating flexible, professional menu experiences that scale from simple personal sites to complex eCommerce and enterprise layouts.
In the interests of clarity, this Issue now supersedes (and encompasses):

Rationale

The current Navigation block handles basic menus well but its fixed mobile overlay limits what users and theme authors can achieve. It restricts styling, layout, and interactivity, making it difficult to produce mobile menus that feel cohesive with modern site designs.

A customisable overlay experience will:

  • Improve mobile usability for complex and multi-level menus.
  • Enable themes to offer tailored, on-brand overlay designs.
  • Lay the architectural foundation for more complex menus

Background and Inspiration

The need for richer mobile menu experiences has been widely recognised within the community.

The Ollie Menu Designer plugin stands out as a thoughtful and well-executed solution, demonstrating both demand and design excellence.

It has served as a valuable reference for understanding how creators wish to manage and design overlays.

However, this initiative is not a direct port of Ollie Menu Designer to Core.

The aim is to build a native, extensible foundation for overlay customisation – one that integrates with Core architecture and evolves sustainably alongside the Navigation block.

This effort builds upon earlier Core explorations in:

  • PR #55657 – initial experiments with overlay structure.
  • Issue #39142 – proposal for overlay customisation.
  • Issue #49156 – ongoing discussion and design iteration.

Expected Functionality

As a site creator, I want to:

  • Create a custom mobile overlay for my Navigation block using familiar block editing tools.
  • Have control over the styling of the my overlay (see exclusions)
  • Choose from existing overlays or create new ones directly from the Navigation block sidebar.
  • Use Core or Theme patterns to quickly start from best-practice overlay designs.
  • See my chosen overlay render correctly on the front end with the same interactivity and accessibility as the current default overlay.
  • Have SEO and a11y concerns handled out of the box

Tasks

See Sub-issues.

This initiative has been broken down into high level sub-tasks, each tracked as a separate issue linked to this parent item.

Out of Scope

The following are out of scope for this effort:

Mega Menus

While this work lays the foundation for more advanced menu systems, we need to proceed carefully and gather feedback before extending to complex multi-column or hierarchical layouts. Building a solid foundation for overlays is the prerequisite step.

Custom Mobile Breakpoints

The ability to define or modify the breakpoint at which the mobile overlay activates is a highly desirable feature, but it falls outside the current scope. Contributors are welcome to explore this as a related enhancement, but it is not planned within this phase.

Editing Within the Main Canvas

There has been discussion about using the proposed Dialog block for inline editing of overlays. However, that block is not yet stable and would introduce considerable additional complexity and unanswered questions around editing flow, accessibility, and SEO. The current approach prioritises stability by editing overlays within focused Template Part mode.

Automatic Overlay Generation

Earlier explorations into pre-creating overlays automatically led to confusion and unnecessary complexity. In most cases, overlays will be used on a single Navigation block only. Leaving creation and design in the hands of users avoids potential conflicts, reduces assumptions, and maintains clarity in site structure.

Alternative Overlay Types

The overlay will continue to follow the "full screen" pattern established with the current overlay experience as of WordPress 6.9. Other types of overlay (slide sidebar) and animations have been proposed but are out of scope for this effort.

Sub-issues

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Block] NavigationAffects the Navigation Block[Feature] Navigation MenusAny issue relating to Navigation Menus[Type] Tracking IssueTactical breakdown of efforts across the codebase and/or tied to Overview issues.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions