Make wp_nav_menu() Items Unclickable

There have been many requests on the WP Support Forums asking how to make a menu item unclickable.

The stock answer is to use a Custom Link with a URL of a single hash mark (#).  This does not really make the link unclickable, it just makes it go nowhere when clicked.

It is fairly easy to make the link ‘appear‘ unclickable using only CSS.  That will be shown after a method to make the links really unclickable.

This  method will actually make the item unclickable.  That is, it removes the anchor tag from around the item text.

It works by using a filter on wp_nav_menu_items.  The code first finds all anchor tags within the string making up the menu.  Then it examines each anchor tag found for ‘href=”#”‘.  If that is found, it replaces the anchor tag with the link text enclosed in a span with a class of ‘unclickable’.

The ‘unclickable’ span must be assigned the same styling as the a tags within the menu in order to preserve the menu appearance.  Sample CSS is shown following the code for the filter.

add_filter('wp_nav_menu_items','mam_make_unclickable',10);
function mam_make_unclickable($nav) {
   // print_r('<p>NAV:');print_r(htmlentities($nav));print_r('</p>');
   $hrefpat = '/(href *= *([\"\']?)#\2)/';
   $atagpat = '|(<a\b[^>]*>(.*?)<\/a>)|i';
   $new_nav = $nav;
   if (preg_match_all($atagpat,$new_nav,$atag_matches,PREG_SET_ORDER)) {
      foreach ($atag_matches as $atag_match) {
         $atag = $atag_match[0];
         $link_text = $atag_match[2];
         // print_r('<p>A TAG:');print_r(htmlentities("$atag"));print_r('</p>');
         // print_r('<p>LINK TEXT:');print_r(htmlentities("$link_text"));print_r('</p>');
         if ( preg_match($hrefpat,$atag,$href_matches)) {
            // print_r('<p>HREF MATCH:');print_r(htmlentities("$href_matches[0]"));print_r('</p>');
            $new_nav = str_replace($atag,"<span class='unclickable'>$link_text</span>",$new_nav);
         }
      }
   }
   // print_r('<p>NEW NAV:');print_r(htmlentities($new_nav));print_r('</p>');
   return $new_nav;
}

Here is some sample CSS that works with the Twenty Ten theme:

/* Style menu items that had an href of #, but are now made unclickable */
#access span.unclickable {
    color: #AAAAAA;
    display: block;
    line-height: 38px;
    padding: 0 10px;
    text-decoration: none;
}

To make a link appear unclickable to CSS3 compatible browsers, you can style links in the menu that have an href=”#” attribute.

Assuming your HTML structure looks like this:

<ul id="menu-top-menu" class="menu">
   <li id="menu-item-381" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-381">
   <li id="menu-item-400" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-400">
      <a href="http://gosolarsandiego.com/wordpress/?page_id=85">Commercial</a>
      <ul class="sub-menu">
         <li id="menu-item-428" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-428">
            <a href="#">THE SOLUTIONS</a>
            <ul class="sub-menu">

you style all anchor tags with the attribute ‘href=”#”‘ at the level of ‘THE SOLUTIONS’ with CSS like this:

#menu-top-menu li ul.sub-menu li a[href="#"]:hover {
   text-decoration: none;
   cursor: default;
}

You may also need to add color and background-color rules to make the links appear the same as they would if actually unclickable.

Leave a Reply

Your email address will not be published. Required fields are marked *

*