Navbars introduction

To prepend one or multiple fixed navigational bars to the menu, include the "navbars" add-on .js and .css files and use the navbars options.

   <script src="path/to/jquery.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.navbars.js" type="text/javascript"></script>
   <link href="path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.navbars.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript">
      $(document).ready(function() {
            navbars: [{
               // first navbar options
            }, {
               // second navbar options

A menu can have up to 8 navbars (4 positioned at the top and 4 positioned at the bottom).

A navbar can contain a back-, next- and close button, a title, breadcrumbs, a searchfield, a range of buttons (like tabs), custom content or any combination thereof.


Give it a go, change the options below and see how it affects the menu in the example on the right.

  • Prepend a searchfield to the menu.
  • Prepend a fixed header to the menu.
  • Append a fixed footer to the menu.
<script type="text/javascript">
   jQuery(document).ready(function( $ ) {


Options for the "navbars" add-on

Option Default value Datatype Description
navbars An array of navbar objects, a single navbar object or true for a single default navbar.
{ ... } null Object First navbar object.
{ ... } null Object Second navbar object.
Navbar object Default value Datatype Description
1 See the description.
content null 1 Array An array of strings (for text or HTML), jQuery objects or the keywords: "breadcrumbs", "close", "next", "prev", "searchfield", "title".
If omitted, a fully styled and functional navbar with a title and back button will be created.
height 1 Number The size of the navbar, will be multiplied bij 40px (the SCSS variable $mm_navbarHeight).
Any number higher than 1 will decrease the maximum number of navbars with the same amount.
position "top" String The position for the navbar.
Possible values: "top" and "bottom".

Configuration for the "navbars" add-on

Option Default value Datatype Description
breadcrumbSeparator "/" String The separator between two breadcrumbs.

The "navbars" add-on also adds an object to the classNames option.

$.mmenu.configuration.classNames.navbars = {
   panelTitle  : "Title",
   panelNext   : "Next",
   panelPrev   : "Prev"

API methods for the "navbars" add-on

The "navbars" add-on has no API methods.

SCSS variables for the "navbars" add-on

Variable Default value Datatype Description
1 For the actual value, the datatype and a description, have a look at the default variable values reference.
$mm_navbarHeight $mm_btnSize 1 CSS value The height of the navbar.
$mm_breadcrumbPadding $mm_padding/4 1 CSS value The padding for all breadcrumbs and seporators.
  • Core (on-canvas).
Works great with:

Next add-on:
Page scroll