Last updated June 17, 2014. Created by Shyamala on May 13, 2013.
Edited by drupalshrek, astrocling, drclaw, travisc. 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!
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
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.
Installation
Pre-requisites - Modules & Js libraries
- Libraries module
- Backbone library, renamed to be available as sites/all/libraries/backbone/backbone-min.js.
- Underscore library (version >=1.5.0), renamed to be available as sites/all/libraries/underscore/underscore-min.js
- A preconfigured version of the modernizr library, renamed to be available as sites/all/libraries/modernizr/modernizr-min.js. This should be placed in sites/all/libraries/modernizr. Note that it is important to use a lowercase m (i.e. "modernizr" rather than "Modernizr") for the directory name.
Steps
- Place all the module in: your sites/all/modules directory; or your sites/[my site]/modules directory.
- Refer Library API documentation page.
Place the libraries in the sites/all/libraries directory. - Disable the Toolbar module before enabling the Navbar module. The Navbar module is incompatible with Drupal 7 core's Toolbar module.
- 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.
A cause of the above Underscore error is if you follow the current installation instructions on the Mobile Friendly Navigation Toolbar page, which incorrectly asks you to install 1.4.4. The correct version is >= 1.5.0. This issue has been raised: https://drupal.org/node/2173449.
You should aim to get all the Navbar libraries appearing in green on the Status Report:
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
Navigation toolbar in Smaller 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;
}| Attachment | Size |
|---|---|
 Navbar on desktop.PNG | 43.81 KB |
| Navbar on smaller screens.PNG | 1.36 MB |
| Status report errors | 8.17 KB |
| Required libraries working | 5.2 KB |
Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.
Comments
Its working fine.Thanks
Its working fine.
Thanks