[wp-trac] [WordPress Trac] #52558: Menu items need more classes

WordPress Trac noreply at wordpress.org
Wed Feb 17 15:50:43 UTC 2021


#52558: Menu items need more classes
-----------------------------+-----------------------------
 Reporter:  ericgreenfield   |      Owner:  (none)
     Type:  defect (bug)     |     Status:  new
 Priority:  normal           |  Milestone:  Awaiting Review
Component:  General          |    Version:
 Severity:  normal           |   Keywords:  dev-feedback
  Focuses:  javascript, css  |
-----------------------------+-----------------------------
 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
 <?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?

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/52558>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform


More information about the wp-trac mailing list