You are here : › How To Render Bootstrap Sub Menus
Jun 26, 2015

How To Render Bootstrap Sub Menus

  • Author: 
    Ashok, Module Developer

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.

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

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. 

Step 3:

Now add the following code to sites/all/themes/<my_bootstrap_theme>/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.

<?php
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 = '<ul class="dropdown-menu">' . drupal_render($element['#below']) . '</ul>';
      $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 = '<ul class="dropdown-menu">' . drupal_render($element['#below']) . '</ul>';
      $element['#title'] .= ' <span class="caret"></span>';
      $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'] == '<front>' && drupal_is_front_page())) && (empty($element['#localized_options']['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";
}

 

Step 4:

Add the following css in one of your stylesheets or in

sites/all/themes/<my_bootstrap_theme>/css/overrides.css

.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.

 

If your business is in need of a new or improved website to establish or enhance its internet presence, you should seriously consider using one of the many Bootstrap themes in Drupal offered by DrupalGeeks. You can expect a wide variety of themes and templates to choose from, friendly and professional customer service, and all the technical support you might need to get started. If customization is required, DrupalGeeks can assist with that as well, so you end up with exactly the kind of website that will be best for your company.