WordPress.org

Make WordPress Core

Opened 10 months ago

Last modified 10 months ago

#52558 new defect (bug)

Menu items need more classes

Reported by: ericgreenfield Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Menus Keywords: dev-feedback
Focuses: template Cc:

Description

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?

Change History (2)

#1 @sabernhardt
10 months ago

  • Component changed from General to Menus
  • Focuses template added; javascript css removed

#2 @ericgreenfield
10 months ago

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!

Note: See TracTickets for help on using tickets.