Last updated April 9, 2014. Created by Shyamala on May 13, 2013.
Edited by travisc, jwant, ar-jan, jessebeach. Log in to edit this page.

The 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
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.This documentation is for the 7.x-1.x Version.


Pre-requisites - Modules & Js libraries

  1. Libraries module
  2. Backbone library, renamed to be available as sites/all/libraries/backbone/backbone-min.js
  3. Underscore library, renamed to be available as sites/all/libraries/underscore/underscore-min.js
  4. A preconfigured version of the modernizr library, renamed to be available as sites/all/libraries/modernizr/modernizr.min.js


  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

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


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.


Its working fine.