How To Render Bootstrap Sub Menus

Image

Working on a Drupal website? Kicking off with Bootstrap or its starterkit? Well! The first main issue that we encounter is with the Bootstrap Main Menu. The Bootstrap theme package lacks rendering submenus with multiple levels by default. This compels us to install a module similar to ‘Nice Menus’ to enable multi-level submenus. But the solution comes really simple by making use of a small section of code, keeping the website lightweight.

Assume that the primary menu involves a hierarchy as provided in the screenshot.

Image

The default bootstrap menu rendered in Drupal will display only the first level of submenus from the hierarchy.

Image

This can be fixed by the following steps,

Step 1:

Navigate to the Primary Menu management page as the administrator via admin/structure/menu/manage/main-menu.

Step 2:

The listing page displays all the links present in the Main Menu.

From the edit page of each menu link, ensure that the “Show as Expanded” checkbox is checked. 

Image

Step 3:

Now add the following code to sites/all/themes//template.php

Ensure that the function name is renamed to the theme’s appropriate hook name by replacing the word hook with your theme name. ie. If your theme name is bootstrap or menubootstrap then the function name should be bootstrap_menu_link__main_menu and menubootstrap_menu_link__main_menu respectively.

function hook_menu_link__main_menu($variables)
{
  $element = $variables['element'];
  $sub_menu = '';
  
  if ($element['#below']) {
    // Prevent dropdown functions from being added to management menu so it
    // does not affect the navbar module.
    if (($element['#original_link']['menu_name'] == 'management') && (module_exists('navbar'))) {
      $sub_menu = drupal_render($element['#below']);
    } elseif ((!empty($element['#original_link']['depth'])) && $element['#original_link']['depth'] > 1) {
      // Add our own wrapper.
      unset($element['#below']['#theme_wrappers']);
      $sub_menu = '

• ' . drupal_render($element['#below']) . '';
        $element['#attributes']['class'][] = 'dropdown-submenu';
        $element['#localized_options']['html'] = TRUE;
        $element['#localized_options']['attributes']['class'][] = 'dropdown-toggle';
        $element['#localized_options']['attributes']['data-toggle'] = 'dropdown';
      } else {
        unset($element['#below']['#theme_wrappers']);
        $sub_menu = '
  • ' . drupal_render($element['#below']) . '';
          $element['#title'] .= ' ';
          $element['#attributes']['class'][] = 'dropdown';
          $element['#localized_options']['html'] = TRUE;
          $element['#localized_options']['attributes']['class'][] = 'dropdown-toggle';
          $element['#localized_options']['attributes']['data-toggle'] = 'dropdown';
        }
      }
      if (($element['#href'] == $_GET['q'] || ($element['#href'] == '' && drupal_is_front_page())) && (empty($element['#localized_options']['language']))) {
        $element['#attributes']['class'][] = 'active';
      }
      $output = l($element['#title'], $element['#href'], $element['#localized_options']);
      return '
  • ' . $output . $sub_menu . "\n";
    }
  '>

Step 4:

Add the following css in one of your stylesheets or in

sites/all/themes/

.dropdown-submenu{position:relative}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px;border-radius:0 6px 6px 6px}
.dropdown-submenu:hover>.dropdown-menu{display:block}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#ccc;margin-top:5px;margin-right:-10px}
.dropdown-submenu:hover>a:after{border-left-color:#fff}
.dropdown-submenu.pull-left{float:none}
.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px}

Step 5:

Now clear the website’s cache. This can be done by clicking on “Clear all caches” button present in the page admin/config/development/performance. The entire bootstrap menu with all sublevels will now be rendered.

Image