I’ve been promising a walkthrough on this for a while, so I finally recorded one.

SnippetNest · WordPress Plugin

Use the WordPress menu editor with Etch. WP Menus for Etch exposes registered menus as nested dynamic data in templates—no sync, JSON setup, or extra configuration.

Quick refresher for anyone who missed the original release: there’s no native way to pull WordPress menus into Etch templates. The recommended path is to build your nav structure manually or as JSON within the loop manager. For developers, that’s workable. For clients or less technical team members who need to update a menu item? Not so much.

Others in the community have come up with approaches such as syncing WordPress menus with the loop manager, which is clever. I even have the ‘Etch JSON Loop Manager’ for giving clients a friendlier interface to edit JSON, and it works great for other loop data.

But specifically for menus, all of that is overcomplicated. The classic WordPress menu editor is great, and everyone already knows how to use it, so let’s just use that.

That’s what WP Menus for Etch does. No syncing, no converting, no caching layer. It uses wp_get_nav_menus() and wp_get_nav_menu_items() under the hood, both backed by WordPress’s native object cache, so you’re not hitting the database on every request. It reads your menu data directly and makes it available to Etch’s dynamic data.

The video covers how I use it:

  • The core pattern. Loop through the menu and check whether an item has children. If it does, output a button plus a submenu loop. If it doesn’t, output a link. That’s the whole structure.
  • aria-current for a11y. WordPress already knows the current page, so you just need to know where to put it. No conditional logic on your end.
  • Third-party component-based menus. Same looping approach, adapted to prop- and slot-based menu systems. I go through the tradeoffs with each and how to handle the spots where you don’t get to write the markup yourself.
  • One component, not slots. I don’t use slots for headers. The second you need per-template changes, you’re making the same edit over and over. Header, nav, burger, submenu logic, all wrapped up in one place.
  • Custom fields on menu items. I walk through adding an icon field and pulling those icons straight into the markup.
  • Mega menus. Same data, same loops. You can drive mega menu content from separate menus, or from custom post types if the content is already there.

New in the latest version:

  • Menu editing inside Etch. WordPress Menus access right inside Etch, so you’re not leaving your build environment to reorder a nav item. The only downside here is that the menu data is pulled in on builder load, so you won’t see it update right away.
  • List item classes and link classes, separately. The CSS Classes input is now List Item CSS Classes, and there’s a new Link CSS Classes input next to it. WordPress ancestor classes land on the <li> where they belong, and your utility classes go directly on the <a> where you actually want them. No workarounds.