Make WordPress Core

Opened 8 years ago

Closed 8 years ago

#14701 closed defect (bug) (wontfix)

HTML markup inconsistency in menus

Reported by: jneuenhaus Owned by:
Milestone: Priority: normal
Severity: trivial Version: 3.0.1
Component: Menus Keywords:
Focuses: Cc:


Just a heads up on a minor inconsistency with the menu HTML classes.


In the source, menus have the following markup:

With a dropdown: li.current_page_ancestor
With no dropdown: li.current-page-ancestor

Detail (Steps to Reproduce)

One menu exists with two top-level pages, called A and B. Both have child pages, but only page A will display a drop-down menu. When you are on a child of page A, you will find:


But when you are on a child of page B, you will get this:



This currently requires you to target both versions to get consistent styling, JavaScript functionality. Could be a "feature", if you wanted to identify the list item without a drop down menu, but semantically, it could be done in a cleaner way.

Change History (2)

#1 @jneuenhaus
8 years ago

  • Keywords javascript added

#2 @filosofo
8 years ago

  • Keywords markup html css javascript menus drop down current-page-ancestor current_page_ancestor removed
  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from new to closed

This is intended behavior, because current_page_ancestor and current-page-ancestor have different meanings.

current_page_ancestor is meant to be backwards-compatible with wp_page_menu() as an alias for current-menu-ancestor. It indicates that the menu item assigned that class is an ancestor in the arbitrary menu hierarchy to the menu item of whatever page you're currently viewing.

For example, if C is a post (not a page) and is made a menu item under A in the menu hierarchy, when viewing C you will see that A has the current-menu-ancestor and current_page_ancestor classes. That's because in the menu A is ancestor to C.

In contrast, current-page-ancestor indicates a relationship among pages not menu items. If D is a page that's a child of A, viewing D will give A's menu item the current-page-ancestor class, because D is actually a child page of A.

Note: See TracTickets for help on using tickets.