Badge for menu link

Question

I am building a Bootstrap 3 sub theme where I want to display some information next to menu link in main menu. I tried to implement hook_menu_link_alter in template.php file in following way

function mytheme_menu_link_alter(&$item){
if($item['title'] == 'Messages'){
$item['title']= $item['title'].'<span class="badge">X</span>';
}
}

but it does not work. The same stuff with link_title. Whta should be fixed in code to make it work?

Answer 1

you can override the output of theme_menu_link() to produce what you want:

function THEME_menu_link(&$variables)
{
    $element = $variables['element'];
    $sub_menu = '';

    $element['#attributes']['class'][] = 'menu-' . $element['#original_link']['mlid'];

    if ($element['#below'])
    {
        $sub_menu = drupal_render($element['#below']);
    }
    $output = l($element['#title'], $element['#href'], $element['#localized_options']);


    if($variables['element']['#title'] == 'Messages')
    {
        // to just add the text
        $output .= '<span class="badge">X</span>';

        // to include it as a link
        $output .= l('X', $element['#href'], array('attributes' => array('class' => 'badge')));
    }

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