How to theme Drupal menu compatible with Bootstrap with active classes parent

Step 1:


function your_theme_menu_link(array $variables) {

}


Step 2:

Read the element 

$element = $variables['element'];
$sub_menu = '';

Check sub menu is available or not

if ($element['#below']) {

}

Check Prevent dropdown functions from being added to management menu as to not affect navbar module.

if (($element['#original_link']['menu_name'] == 'management') && (module_exists('navbar') || module_exists('commerce_kickstart_menus'))) {
      $sub_menu = drupal_render($element['#below']);
}


other wise 

Add our own wrapper


else {

}

Unset default theme 


unset($element['#below']['#theme_wrappers']);

print sub menu ul 

 $sub_menu = '<ul class="dropdown dropdown-menu">' . drupal_render($element['#below']) . '</ul>';

add dropdown-toggle class 

$element['#localized_options']['attributes']['class'][] = 'dropdown-toggle';

check children is active or not  if active add active class for parent 

foreach ($element['#below'] as $branch) {
if (($branch['#href'] == $_GET['q'] || ($branch['#href'] == '<front>' && drupal_is_front_page())) && (empty($branch['#localized_options']['language']) || $branch['#localized_options']['language']->language == $language_url->language)) {
$element['#localized_options']['attributes']['class'][] = 'active';
}
}


add dropdown-submenu class 


 if ((!empty($element['#original_link']['depth'])) && ($element['#original_link']['depth'] > 1)) {
        // Generate as dropdown submenu
        $element['#attributes']['class'][] = 'dropdown-submenu';
      }
      else {
        // Generate as standard dropdown
        $element['#attributes']['class'][] = 'dropdown';
        $element['#localized_options']['html'] = TRUE;
        $element['#title'] .= ' ';
      }

add # if no link 

element['#localized_options']['attributes']['data-target'] = '#';

add active for active dropdown


if (($element['#href'] == $_GET['q'] || ($element['#href'] == '<front>' && drupal_is_front_page())) && (empty($element['#localized_options']['language']) || $element['#localized_options']['language']->language == $language_url->language)) {
   $element['#attributes']['class'][] = 'active';
 }

return the final menu 


$output = l($element['#title'], $element['#href'], $element['#localized_options']);
  return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";


All code ( copy and paste below code into your theme file )  replace your_theme with your theme name


function your_theme_menu_link(array $variables) {
  $element = $variables['element'];
  $sub_menu = '';
  
  if ($element['#below']) {

    // Prevent dropdown functions from being added to management menu as to not affect navbar module.

if (($element['#original_link']['menu_name'] == 'management') && (module_exists('navbar') || module_exists('commerce_kickstart_menus'))) {
    //if (($element['#original_link']['menu_name'] == 'management') && (module_exists('navbar'))) {
      $sub_menu = drupal_render($element['#below']);
    }

    else {

      // Add our own wrapper
      unset($element['#below']['#theme_wrappers']);
      $sub_menu = '<ul class="dropdown dropdown-menu">' . drupal_render($element['#below']) . '</ul>';
      $element['#localized_options']['attributes']['class'][] = 'dropdown-toggle';
      //$element['#localized_options']['attributes']['data-toggle'] = 'dropdown';

foreach ($element['#below'] as $branch) { 
if (($branch['#href'] == $_GET['q'] || ($branch['#href'] == '<front>' && drupal_is_front_page())) && (empty($branch['#localized_options']['language']) || $branch['#localized_options']['language']->language == $language_url->language)) {
$element['#localized_options']['attributes']['class'][] = 'active';
}  
}


      // Check if this element is nested within another

      if ((!empty($element['#original_link']['depth'])) && ($element['#original_link']['depth'] > 1)) {
        // Generate as dropdown submenu
        $element['#attributes']['class'][] = 'dropdown-submenu';
      }
      else {
        // Generate as standard dropdown
        $element['#attributes']['class'][] = 'dropdown';
        $element['#localized_options']['html'] = TRUE;
        $element['#title'] .= ' ';
      }

      // Set dropdown trigger element to # to prevent inadvertant page loading with submenu click

      $element['#localized_options']['attributes']['data-target'] = '#';
    }
  }

 if (($element['#href'] == $_GET['q'] || ($element['#href'] == '<front>' && drupal_is_front_page())) && (empty($element['#localized_options']['language']) || $element['#localized_options']['language']->language == $language_url->language)) {
   $element['#attributes']['class'][] = 'active';
 }
  $output = l($element['#title'], $element['#href'], $element['#localized_options']);
  return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}


Related Post


Latest Post


Recent Posts Widget

Make sure to never miss a thing...

Get the latest news from the creative industry along with other creative goodies, conveniently delivered to social media.