Need a way to produce menus with custom markup structure

[eric-michel]

What problem does this address?

Website menus vary wildly in structure, styling, and function. While there are definitely common standards, site developers need to have the freedom to expand or enhance those standards. Right now, the navigation block is too rigid to allow that, and creating a custom navigation block feels really onerous.

This issue is the singular blocker to us transitioning our sites to fully-block-based (which we'd very much like to do).

More thorough explanation

In classic or hybrid themes, menu creation and menu markup are separate. All of my menus are created the same way, in Appearance -> Menus, but I have a great amount of freedom in the markup via wp_nav_menu, and greater still via a custom walker.

In block themes, menus are both created and output on the frontend via the navigation block, which has very opinionated styling and function, and the markup is not easily customized. Unless I'm mistaken, the only way to really customize the output of the navigation block is via the render_block filter, which just gives you the full markup, not an array of menu items you can iterate over, for example.

That means the solution is a custom block. But replacing the navigation block seems like a pretty tall order, because I don't just have to recreate the output of the navigation block, I also have to recreate the creation of the menu itself. As far as I can tell, the menu creation tool that exists in the sidebar of the navigation block does not seem to be an easily-reusable component for a custom implementation.

Example of why this matters

We commonly create sites that have a slide-out menu similar to amazon.com's "All" menu at the top left. This requires submenu ul tags to be on the same level as the top-level menu, not nested within the li tags of their parent links. In a classic or hybrid theme, I could use a custom walker to whip this up pretty quickly without having to worry about the menu creation as well. Not so with the navigation block.

What is your proposed solution?

One of two options:

• Significant filter options for the navigation block to customize its markup output
• Package up the menu construction feature of the navigation block in such a way that it's easily added as a component to a custom block

Best I can tell, neither of these options exist (although it's entirely possible I'm missing them).

---

I'm closing #46552 in favor of this one as I feel this one is a more comprehensive summary of our issue.

[eric-michel]

I have spent some more time on this and found some workarounds that will probably allow me to do what I want.

If I create a menu via a dummy navigation block, then remove that block, I can then reference that menu in a shortcode or custom block that will allow me to get an array of menu items via parse_blocks(). From there, I can produce whatever markup structure I need.

What I will likely do is create a custom block with a SelectControl populated by existing menus, then have that block output the custom markup I need for the menu selected.

The main issue with this method right now is menu creation. I can manage menus at /wp-admin/site-editor.php?path=%2Fnavigation but it does not appear that I can create them. Adding the ability to create a new menu to this UI would give me a solution that won't confuse the heck out of my users.

Of course, in the long run, making the entire menu-creation UI from the navigation block reusable would be better!

[eric-michel]

I have completed my theme customizations and managed to do what I set out to do: create a custom flyout menu that appears on mobile and is more fully-featured than the default mobile menu for the Navigation block. It's fairly clunky - mainly because the nav menus used in the custom flyout menu have to be created in a placeholder Navigation block before they can be referenced.

Long term, I really think that some significant enhancements are needed for the Navigation block in order to allow theme developers to create more distinct designs. Navigation is one of the biggest elements that sets sites apart from one another. The current Navigation block is too rigid to allow for much creativity, and creating custom block options for navigation isn't well supported.