Add a custom menu to the navbar module

The navbar aka "Mobile Friendly Navigation Toolbar" module for Drupal 7 adds a mobile friendly admin menu to your Drupal site.

You can add your own custom menu to the navbar, the following code is for at least version 1.6, so make sure the module is up to date.

mymodule.module

You need to overwrite the theme function to make this work with navbar, the easiest way is to use the functions from the navbar module, so any future updates will keep working.


/**
 * Implements hook_theme().
 */
function mymodule_theme($existing, $type, $theme, $path) {
  $my_menus = array(
    'menu-create-content' => t('Content'),
    'menu-configuration' => t('Configuration'),
  );

  // Use the theme functions from the navbar module.
  foreach ($my_menus as $menu_name => $title) {
    $safe_name = str_replace('-'), array('_'), $menu_name);
    $items['menu_tree__' . $safe_name] = array(
      'render element' => 'tree',
      'function' => 'theme_navbar_menu_tree',
      'preprocess functions' => array('template_preprocess_navbar_menu_tree'),
    );
  }

  return $items;
}

mymodule.navbar.inc

This file will get loaded automatically by the navbar module, so don't include it in your mymodule.info file.

In short:

  • it loads the menu.
  • it addds required attributes from the navbar module.
  • it creates a tab and the attached menu.
  • it loads a css file so you can style the icons on the admin theme as well


/**
 * @file
 * Navbar hooks.
 */

/**
 * Implements hook_navbar().
 */
function mymodule_navbar() {
  $my_menus = array(
    'menu-create-content' => t('Content'),
    'menu-configuration' => t('Configuration'),
  );

  $items = array();

  foreach ($my_menus as $menu_name => $title) {
    $tree = menu_tree_all_data($menu_name);
    if (!empty($tree)) {

      // Add attributes to the links before rendering.
      navbar_menu_navigation_links($tree);
      $tree_ouput = menu_tree_output($tree);
      $safe_name = str_replace(array('menu-', '-', '_'), array('', '', ''), $menu_name);

      $items[$safe_name] = array(
        '#type' => 'navbar_item',
        'tab' => array(
          '#type' => 'link',
          '#title' => $title,
          '#href' => 'admin',
          '#options' => array(
            'attributes' => array(
              'title' => $title,
              'class' => array('navbar-icon', 'navbar-icon-menu', 'navbar-icon-' . $safe_name),
            ),
          ),
        ),
        'tray' => array(
          '#heading' => $title,
          'navbar_' . $safe_name => array(
            '#type' => 'container',
            '#attributes' => array(
              'class' => array('navbar-menu-' . $safe_name),
            ),
            'administration_menu' => $tree_ouput,
          ),
        ),
        '#weight' => -15,
        '#attached' => array(
          'js' => array(
            drupal_get_path('module', 'mymodule') . '/js/mymodule.navbar.js',
          ),
        ),
      );

      // Add custom css when using a non-default theme.
      global $theme;
      if (variable_get('theme_default') != $theme) {
        $items[$safe_name]['#attached']['css'] = array(
          drupal_get_path('module', 'mymodule') . '/css/mymodule.navbar.css',
        );
      }
    }
  }
  return $items;
}

js/mymodule.navbar.js

Trigger the navbar javascript function for each menu.


(function (Drupal, $) {
  Drupal.behaviors.mymoduleNavbar = {
    attach: function() {
      $('.navbar-menu-createcontent').drupalNavbarMenu();
      $('.navbar-menu-configuration').drupalNavbarMenu();
    }
  };
})(Drupal, jQuery);

css/mymodule.navbar.css


.navbar-bar .navbar-icon-createcontent.navbar-active:before {
  background-image: url("/sites/all/themes/custom/mytheme/svg/filewhite.svg");
}
.navbar-bar .navbar-icon-createcontent:active:before,
.navbar-bar .navbar-icon-createcontent:before {
  background-image: url("/sites/all/themes/custom/mytheme/svg/filegray.svg");
}
.navbar-bar .navbar-icon-configuration.navbar-active:before {
  background-image: url("/sites/all/themes/custom/mytheme/svg/wrenchwhite.svg");
}
.navbar-bar .navbar-icon-configuration:active:before,
.navbar-bar .navbar-icon-configuration:before {
  background-image: url("/sites/all/themes/custom/mytheme/svg/wrenchgray.svg");
}

Comments