Menu items need more classes

[ericgreenfield]

As a front end engineer I have found that it is a pain to style menus. Especially if there are dropdowns.

To target top level menu items you currently need to do nav > ul > li, and even then there can be issues.

I would love to see a class on top level menu items. This way we can also style things with :not(.top-level-items) etc...

Submenus have classes. Why cant top menu items have some too?

Till now I have been able to get around it with filters like this. Unfortunately sometimes I am not given the ability to add this.

<?php

/**
 * @param $classes
 * @param $item
 * @param $depth
 *
 * https://developer.wordpress.org/reference/classes/walker_nav_menu/
 * Add top-level-item to top level menu items for easier styling.
 *
 * @return array
 */

function ign_nav_menu_css_class( $classes, $item, $args, $depth ) {

        if ( $item->menu_item_parent == 0 ) { //Count top level menu items
                $classes[] = 'top-level-item';
        }

        if ( $depth >= 2 ) { //Count top level menu items
                $classes[] = 'nested-menu-item';
        }

        return $classes;
}

add_filter( 'nav_menu_css_class', 'ign_nav_menu_css_class', 10, 4 );

At this point though it would be nice to have something like this in core.

(I would also love to change the markup of the submenus so they can be easily turned into megamenus but I know thats not happening...)

So...Thoughts?

[ericgreenfield]

Woah. I almost forgot. Would be also nice if besides a top-level-item class, we had classes for the .last-sub-menu, and .first-sub-menu

Tabbing out of the last submenu should close it and this requires adding classes manually via a walker or js. If more classes existed on key elements in the menu it would be very helpful!