How can I disable parent menu item links?

Question

I don't want to have the parent menu items of my site's nav menus linking to a separate page. For one thing I don't want to have a superfluous page. For another these links hobble site navigation for mobile users who can't "hover" over a link (to bring up the child items).

The best solution would be to disable the parent menu item links. But how do I do that, especially now that with WordPress 3.5 the Disable Parent Menu Item plugin has stopped working?

One possible solution is here.

Answer 1

Do not create fake URLs (#). This would be very bad for users with a screen reader: the are using a list of available links to browse your site. The same is true for javascript: links, they are not exactly elegant markup anyway.

You need two steps:

1. Mark the items with children before the walker starts.
2. Replace the markup for the top parents.

I will use an empty <a> element here to make it easy to get the cursor. You will probably need something like this in your stylesheet:

.menu > .has-children {
    cursor: pointer;
}

The filter to mark parent items is taken from this answer. The second function just checks for that property and it tests if the item is itself not a child item.

add_filter( 'wp_nav_menu_objects',      't5_add_has_children_to_nav_items' );
add_filter( 'walker_nav_menu_start_el', 't5_unlink_parent_item', 10, 4 );

/**
 * Add aproperty 'has_children' to menu items
 *
 * @wp-hook wp_nav_menu_objects
 * @param   array $items
 * @return  array
 */
function t5_add_has_children_to_nav_items( $items )
{
    $parents = wp_list_pluck( $items, 'menu_item_parent' );
    $out     = array ();

    foreach ( $items as $item )
    {
        in_array( $item->ID, $parents ) && $item->has_children = TRUE;
        $out[] = $item;
    }
    return $items;
}
/**
 * Replace top parent element markup.
 *
 * @wp-hook walker_nav_menu_start_el
 * @param   string $item_output
 * @param   object $item
 * @param   int    $depth
 * @param   object $args
 * @return  string
 */
function t5_unlink_parent_item( $item_output, $item, $depth, $args )
{
    // not first level parent item
    if ( empty ( $item->has_children ) or 0 != $item->menu_item_parent )
        return $item_output;

    $title = apply_filters(
        'the_title',
        $item->title,
        $item->ID
    );
    $id = apply_filters(
        'nav_menu_item_id',
        'menu-item-'. $item->ID,
        $item, $args
    );
    $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    $classes[] = 'menu-item-' . $item->ID;
    $classes[] = 'has-children';
    $class_names = join(
        ' ',
        apply_filters(
            'nav_menu_css_class',
            array_filter( $classes ),
            $item,
            $args
        )
    );
    $class_names = $class_names
        ? ' class="' . esc_attr( $class_names ) . '"'
        : '';

    return "<li$id>$args->before<a class='menu-item has-children'>$title</a>$args->after";
}

Answer 2

I would simply create custom menu items with a javascript:void(0) as the href whenever a parent item is needed.

Answer 3

Works with WordPress 3.5:

1. Add a Link entry with the name you want and a # URL
2. Edit the menu entry you just created and remove the #

You have to do both steps, as you can't add a menu entry with an empty URL.

Answer 4

A little late but for future use. You can create a custom link for the parent. When you add it you have to add a #, but once it's added you can remove it which disables the link.

Answer 5

To eliminate the active "hover" cursor:

Theme Options > Drop down menu > Make parent menu items clickable : disable