Recommended releases

Download Links

A very simple mobile friendly navigation toolbar. The Navbar module displays a bar containing top-level administrative components across the top of the screen or on left side.

In addition to providing deep-level responsive access into administrative functions without refreshing the page.
Navbar module has a drawer section where it displays links provided by other modules. The drawer can be hidden/shown by clicking on its corresponding tab.


The Navbar module requires Backdrop core's Administration bar module, but Administration bar is suppressed if the Navbar module is enabled.


3rd party JavaScript libraries

The Navbar module depends on several third party JavaScript libraries, which included in 'js' directory:

  • Backbone (version >= 1.0.0)
  • Underscore (version >=1.5.0)
  • Modernizr: preconfigured version of Modernizr. Configuration:
    • 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)

Application programming interface (API)

You can integrate your custom module's links in Navbar toolbar. See 'navbar.api.php'

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;


The toolbar uses the SVG icons designed by ry5n:
Recommended application for create an icon: Inkscape
Set the page size to 16x16px (Inkscape: File -> Document Properties -> Width: 16, Height: 16, Units: px)


Bugs and Feature requests should be reported in the Issue Queue:

Current Maintainers



This project is GPL v2 software. See the LICENSE.txt file in this directory for
complete text.


Vertical orientation of Navbar:

Horizontal orientation of Navbar: