Recommended releases

Download Released

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 the Administration bar is suppressed if the Navbar module is enabled.


  • Enable Backdrop core's Administration bar module.
  • Install this module using the official Backdrop CMS instructions at
  • You can show or hide some components (search bar, shortcuts, notification badge etc.) on the module's "Configure" page and switch light/dark theme.

Shortcuts tray

It provides a toolbar on the top of the page to which you can add links.


  • You can enable the shortcuts tray on module's configure page: Administration > Configuration > Administration > Navbar
  • Go to Administration > Configuration > User interface > Navbar shortcuts. Here you can create and delete shortcut set, and add, modify, delete links of a shortcut set.
  • On the 'List links' page use the 'Show row weights' for more details.
  • You can switch current shortcut set on the user profil page on 'Navbar shortcuts' tab.
  • Shortcut sets can be imported, exported by Configuration management: Administration > Configuration > Development > Configuration management

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 into the Navbar toolbar. See this: '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(backdrop_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 (light theme):

Horizontal orientation of Navbar (light theme):

Vertical orientation of Navbar (dark theme):

Horizontal orientation of Navbar (dark theme):