Last updated November 26, 2015. Created on May 13, 2013.
Edited by keopx, milodesc, authentictech, thewilkybarkid. 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!


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


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.




  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 unchecking "minify" in the "Options" section

    While Navbar will use the production, minified version when available, the development version is needed in order to determine the library version (See also if your version is not being detected). 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)

The Modernizr library should be saved in a libraries directory with a lower-case "modernizr" name. The Backbone library should be saved in a libraries directory with a lower-case "backbone" name. The Underscore library should be saved in a libraries directory with a lower-case "underscore" name.


  1. Place the Navbar 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 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 Desktop
Navigation toolbar in Smaller screens

Navbar on Small screens


The toolbar uses the SVG icons designed by ry5n:

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 forums, or join #drupal-support in IRC.


vijay.cgs’s picture

Its working fine.


pk81’s picture

Hello i have installed module but left side menu is not displyed. I have disabled other adminstration modules but only i see is top fixed toolbar with 2 icons.

are there any other actions i should take?

Anonymous’s picture

Try double checking that you have the Backbone, Modernizr, and Underscore libraries installed correctly.

If you have drush set up, try running the command drush libraries-list. You should see something like

$ drush libraries-list  
Name        Status        Version  Variants          Dependencies
backbone    OK            1.0.0    source, minified  -
modernizr   OK            2.7.1    source, minified  -
underscore  OK            1.7.0    source, minified  -
pk81’s picture


There were 2 reasons:

Primary: wrong libraries location: sites\all\modules\libraries instead of sites\all\libraries
Secondary: libraries were not in sub directories ex. sites\all\libraries\modernizr

Thanks very much for the clues.


dzinelabs’s picture

It took me a while to figure out how to install the modernizr library correctly so I decided to recap the process since it seems that library causes a few issues:

1) head over to the modernizr library page

2) scroll to the bottom and select the code under generate/download button (depending the browser you use it seems that sometimes the buttons do not work) and copy.

3) open up your text editor and paste the code. Rename the file to "modernizr-min.js".

4) return to the modernizr library page and this time check the "Don't Minify Source" check box. You will see that the code changes. If not, refresh the page and check the box again.
Select and copy the code, open your text editor and paste. Rename the file to "modernizr.js".

5) create a new folder(directory) in your sites/all/libraries/ called "modernizr". Do not call it Modernizr, or full capital letters ...
Upload the modernizr-min.js and modernizr.js files into this folder (directory).

Done. You should get green light at the status report and the library should be picked up by navbar.

Hope this is helpful for somebody in the communitythat is not familiar with libraries, js and the likes.

Niklan’s picture


In the generated version, comment have 'modernizr' but module looks for 'Modernizr'.

So, if you complete all steps above and stiil have error at the status page. Check out file comments.

float-diagonal’s picture

Ok, wow. Yeah, that was the exact issue I was having. The "m" in the source comment needs to be "M." Very misleading considering the docs actually specifically say the directory needs to be all-lowercase.’s picture

Also, the minified version of modernizr now includes the version number. Hence there's no need for the dev version. The module seems to work fine with minified js file.