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.

<head>
   <script src="path/to/jquery.js"></script>
   <script src="path/to/jquery.mmenu.js"></script>
   <script src="path/to/jquery.mmenu.navbars.js"></script>
   <link href="path/to/jquery.mmenu.css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.navbars.css" rel="stylesheet" />
   <script>
      $(document).ready(function() {
         $("#my-menu").mmenu({
            navbars: [{
               // first navbar options
            }, {
               // second navbar options
            }]
         });
      });
   </script>

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.

Example

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

  • Prepend a fixed searchfield to the menu.
  • Prepend tabs to the menu.
  • Prepend breadcrumbs to the menu.
  • Append a fixed footer to the menu. 
<script>
   jQuery(document).ready(function( $ ) {

   });
</script>

Options for the "navbars" add-on

Option Default value Datatype Description
1 See the description.
navbars An array of navbar objects, a single navbar object or true for a single default navbar.
[
{
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 CSS variable --mm-navbar-height).
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".
type null String The type of navbar.
Set to "tabs" to make all anchors in the navbar behave like tabs.
}
{ ... } Object Second navbar object.
{ ... } Object Third navbar object.
}

Configuration for the "navbars" add-on

Option Default value Datatype Description
navbars
{
breadcrumbs
{
separator "/" String The separator between two breadcrumbs.
removeFirst false Boolean Whether or not to remove the first breadcrumb.
}
}

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.

CSS variables for the "navbars" add-on

The "navbars" add-on has no CSS variables.

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.
Include CSS
$mm_opt_navbars true Boolean Whether or not to include CSS for the navbars add-on throughout the entire CSS framework.
$mm_opt_navbars_top $mm_opt_navbars Boolean Whether or not to include CSS for the navbars positioned at the top throughout the entire CSS framework.
$mm_opt_navbars_bottom $mm_opt_navbars Boolean Whether or not to include CSS for the navbars positioned at the bottom throughout the entire CSS framework.
$mm_opt_navbars_breadcrumbs $mm_opt_navbars Boolean Whether or not to include CSS for the navbars breadcrumbs throughout the entire CSS framework.
$mm_opt_navbars_tabs $mm_opt_navbars Boolean Whether or not to include CSS for the type tabs navbars throughout the entire CSS framework.

Compatibility

Dependencies:
  • Core (on-canvas).
Works great with:

Next add-on:
Page scroll