Drupal 7: Empty Menu Link Titles

Create Drupal 7 menu links with empty titles! With Drupal’s hook_menu_link and <none>, create icon links & other styled links that have no text.

Drupal

One of my biggest pet-peeves is creating Drupal 7 empty menu link titles since there’s no out-of-the-box solution. As a result it can be difficult to create stylized links, such as icons or background images. After many frustrating sessions I finally sat down to find a way to make this happen. Consequently, I began to think this was an impossibility and was unable to find a solution already in existence that did exactly what I needed it to do. However, Drupal 7 empty menu link titles are absolutely possible with just this one little snippet! Have no fear, theme_menu_link to the rescue!

Using <none> to Create Drupal 7 Empty Menu Link Titles

drupal 7 empty menu link titles

First of all, you must start by using the snippet provided below and will need to enter <none> as the link title in order to render it empty. To accomplish this, in your theme’s template.php file add:

/**
 * Implements theme_menu_link().
 *
 * @link https://api.drupal.org/api/drupal/includes!menu.inc/function/theme_menu_link/7.x
 */
function your_theme_menu_link($vars)
{
  $element = $vars['element'];
  $sub_menu = '';

  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
  }

  if ( '<none>' === $element['#title'] )
  {
    $element['#title'] = '';
  }

  $output = l($element['#title'], $element['#href'], $element['#localized_options']);

  return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}

theme_menu_link returns HTML for menu and submenu links, so that it can be used to alter the menu’s output. In the above, we’re checking to see if the menu link title has been set to <none>. If this has been done correctly it removes the title text while leaving the link intact. Be sure to check your work before moving on because sometimes the simplest mistakes in the beginning will cause you grief in the future.

Finally, be sure to clear your cache if you’re not seeing the change!

Have you already added this snippet and yet not seen anything change? It’s probably due to Drupal not yet seeing the new hook in your code. In order to fix this, you’ll need to clear your cache so that Drupal will register the changes you’ve made. Most of the time, this will fix issues like these quickly rather than spending hours trying to debug something that truly isn’t broken.

You can also use this hook to alter other menu link attributes. For instance, if you wanted to avoid using the Menu attributes module you’re able to use this hook to add or remove classes.

For more information on theme_menu_link, see https://api.drupal.org/api/drupal/includes!menu.inc/function/theme_menu_link/7.x.

Is there a Drupal module that can handle this?

Of course there is! Icon API accomplishes this in addition to some extra features you may find useful. I’ve never used it personally, and I’d rather stay away from modules that don’t produce production releases. Consequently, if you have created or know of a module that can handle this feel free to shoot me a line in the comments below and I’ll gladly take a look at it to potentially include in this post as a footnote. In conclusion, don’t ever believe something is impossible because you’re often just a few days of banging your head against the wall away from a breakthrough!

Author: Ben Marshall

Red Bull Addict, Self-Proclaimed Grill Master, Entrepreneur, Workaholic, Front End Engineer, SEO/SM Strategist, Web Developer, Blogger

Leave a Reply

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