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

The documentation below lists all of the modules and libraries needed to get Navbar to work.

You can also just use the drush make file in the module's path to scaffold the right libraries:

    cd sites/all/modules/contrib/navbar
    drush make navbar.make.example ../../../../../ --no-core  --shallow-clone

The path ../../../../../ should point to the root of your drupal install.

Once done, you should have:

  • sites/all/libraries/backbone
  • sites/all/libraries/modernizr
  • sites/all/libraries/underscore
  • sites/all/modules/libraries

You can then move the "libraries" module to "sites/all/modules/contrib/libraries" if you want.

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
    • Click the above link to take you to the Modernizr website with the appropriate configuration pre-checked
    • Click the "Build" button to open the build modal window
    • Click the "Download" link in the "Build" line
    • Save as "modernizr-min.js" in your "modernizr" folder within the site's library folder structure

    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.

Steps

  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 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 Desktop
Navigation 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;
}

Comments

vijay.cgs’s picture

Its working fine.

Thanks

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

Worked!

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.

PK

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

TIP:

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.

control.space’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.

that_developer’s picture

I am getting the follow error when attempting install your module "navbar-7.x-1.7.zip does not contain any .info.yml files." I am using the Acquia cloud environment and just set up my site about 3 days ago. Any reason why I might be getting this error when attempting to install the module?

Thanks!

joshf’s picture

It sounds like you're trying to use this module on a Drupal 8 installation. There's no need to install it on D8 as it's included in core.

ridefree’s picture

When I downloaded the built modernizr file as per the link above in the docs. I got a file called: modernizr-custom.js
I didn't think anything of it, but D7 would not recognize the library.

After changing it to modernizr-min.js everything is detected as it should be

bdporter’s picture

The link of "preconfigured version of the modernizr library" is bad, need to replace the touch with touchevents in the URL.
Working link:
preconfigured version of the modernizr library