WordPress Menu with Submenu Dropdown

The current wp_smart_navwalker does a great job of making top-level menu items but doesn’t do anything to let you create or style sub-menus. The only way I’ve seen to make dropdown submenus (even common single-level ones) easily is to use the Bootstrap framework, and the custom walker Pinegrow built for it. Those of us using Tailwind or no framework are left out in the cold.

Granted, WordPress will create a ul > li > ul for any submenus, but they only have a class of “sub-menu” and don’t carry over any classes or attributes from Pinegrow. It’s easy enough to make CSS rules to take care of basic styles but even doing something like adding an aria-expanded=“false” attribute now has to be done with some janky javascript when the page loads.

The current system also copies the same classes from the ul > li elements to ul > li > ul > li. I know that I like to have different hover styles for submenus, so this is especially problematic.

In my opinion, this is one of the biggest shortcomings of Pinegrow’s theme creation features. I’ve had to rely on 3rd party plugins like Max Mega Menu to make my menus, and I’d love to remove that dependency.

As a side note: The Help button in the Nav Menu action goes to the old documentation site, which is no longer available. Here is a link to the text of the old article that I saved from the wayback machine.

2 Likes

Yes. This is much needed.

1 Like

Yes, we need this. Thinking about it, should be possible to support at least 1 level of dropdowns with Smart walker.

The task has two parts:

  • Updating the PHP Smart menu walker
  • Updating the Menu action to be able to figure out additional template elements

I have to do the 2nd one, but the 1st one is open to any hero who wants to try :slight_smile: Just let us know so that we don’t duplicate the effort.

1 Like

As much as I’d love to try, I suspect it would kick my butt pretty quickly. I’ll have one of my devs take a look though, and put them on it if it seems reasonable.

2 Likes