Last updated March 4, 2015. Created on May 13, 2013.
Edited by eshta, Satraa, bleen18, drupalshrek. Log in to edit this page.

The Navbar module (formerly called Mobile Friendly Navigation Toolbar) introduces a responsive administrative toolbar. It is a backport of the responsive toolbar that Drupal 8 ships with!

About

The Navbar module displays links to top-level administration menu items and links from other modules at the top of the screen.

Uses

Displaying administrative links and quick access to administrative functions.
The Navbar module displays a bar containing top-level administrative components across the top of the screen. Below that, the Navbar module has a drawer section where it displays links provided by other modules, such as the core Shortcut module. The drawer can be hidden/shown by clicking on its corresponding tab. Additionally, the vertical orientation of Navbar provides deep-level access into administrative functions without refreshing the page.
This documentation is for the 7.x-1.x Version.

Installation

Prerequisites

Modules

  1. Libraries module (version >= 2.0)

JavaScript libraries

Navbar will use the minified variants of each JavaScript library whenever possible. See libraries module documentation for details regarding installation locations specific to your site.

  1. Backbone library (version >= 1.0.0)
    • Full source version named backbone.js (optional)
    • Minified named backbone-min.js
  2. Underscore library (version >=1.5.0)
    • Full source named underscore.js (optional)
    • Minified named underscore-min.js
  3. A preconfigured version of the modernizr library
    • Production version renamed to be available as modernizr-min.js
    • Development version renamed to be available as modernizr.js
      You can create this version by checking "Don't Minify Source" from the bottom of the download page

    While Navbar will use the production, minified version when available, the development version is needed in order to determine the library version. Unfortunately this information is not included in the minified Modernizr code.

    If you wish to generate a custom Modernizr build for use with other modules, be sure you have checked the following:

    • Input Types (HTML5)
    • SVG (Misc.)
    • Touch Events (Misc.)
    • Add CSS Classes (Extra)
    • Modernizr.addTest (Extensibility)
    • Modernizr.testStyles (Extensibility)
    • Modernizr._prefixes (Extensibility)
    • elem-details (Non-core detects)
    • JSON (Non-core detects)

    Note that this library should be saved in a libraries directory with a lower-case "modernizr" folder name.

Steps

  1. Place all the module in: your sites/all/modules directory; or your sites/[my site]/modules directory.
  2. Refer Library API documentation page.
    Place the libraries in the sites/all/libraries directory.
  3. Disable the Toolbar module before enabling the Navbar module. The Navbar module is incompatible with Drupal 7 core's Toolbar module.
  4. Enable the modules at: admin/modules

Check Status Report for error messages

Check Status Report for error messages. In Drupal 7 this is at admin/reports/status.

Any errors you see here will need to be fixed.

One cause of the above Modernizr error is if you do not use a lowercase m (i.e. "modernizr" rather than "Modernizr") for the directory name.

Another possible cause of a Modernizr error is if you did not download the source version of the library. While not loaded on the production site, the source code is required to determine the library version.

All Navbar libraries should appear in green on the Status Report:

Pointing to a specific library variant

The Modernizr, Backbone and Underscore library declarations each declare a 'source' and 'minified' variant that point to the source and minified file names respectively. The minified variant is selected by default, but you can override this on your site by setting a variable in a module. I've done this for Modernizr in a distribution install file since we can't produce a minified version of Modernizr during a drupal.org project build process. Here is an example.

// Use the source version of Modernizr since the build process can't produce
// a minified version from the library.
$variants = variable_get('navbar_libraries_variants', array());
$variants['modernizr'] = 'source';
variable_set('navbar_libraries_variants', $variants);

Mobile Friendly Navigation Toolbar administration pages

Configure Mobile Friendly Navigation Toolbar permissions at admin/people/permissions. Assign 'Use the administration toolbar' as applicable.

Resize the browser & watch the responsive navigation toolbar in action!

Navigation toolbar in a Desktop

Navbar on DesktopNavigation toolbar in Smaller screens

Navbar on Small screens

Icons

The toolbar uses the SVG icons designed by ry5n: https://github.com/ry5n/libricons.

If you are creating a custom tab or menu item that needs an icon, either draw them from this library, request a new icon, or use an icon as a base for your needs. Do send a pull request to the libricons and give back if the icon your create fills a gap in the set.

Including styling assets for a menu item

If you add a top-level menu item that requires an associated icon, you can add the styling assets to the page with hook_navbar. Follow this example.

function workbench_navbar() {
  $items['workbench'] = array(
    '#attached' => array(
      'css' => array(drupal_get_path('module', 'workbench') . '/workbench.navbar.icons.css'),
    ),
  );
  return $items;
}

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

vijay.cgs’s picture

Its working fine.

Thanks