Dividers introduction

To automatically add dividers, to enable dividers to be fixed or to change the style of dividers, include the "dividers" add-on .js and .css files and use the dividers options.

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

Learn how to manually setup a divider in this tutorial.

Example

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

  • Automatically add dividers.
  • Make the dividers fixed.
  • Works great with:
  • Prepend a fixed searchfield to the menu.
  • Add a section indexer to the menu.
<script>
   jQuery(document).ready(function( $ ) {

   });
</script>

Options for the "dividers" add-on

Option Default value Datatype Description
dividers A map of options or true for dividers.add and dividers.fixed.
{
add false Boolean Whether or not to automatically add dividers to the menu (dividing the menu items alphabetically).
addTo "panels" String Where to add the dividers.
Possible values: "panels" and a valid jQuery selector.
fixed false Boolean Whether or not to keep the divider of the currently viewed section fixed at the top.
type "compact" String The style of the dividers.
Possible values: "compact" or "light"
}

Configuration for the "dividers" add-on

The "dividers" add-on has no configuration options.

API methods for the "dividers" add-on

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

SCSS variables for the "dividers" add-on

Variable Default value Datatype Description
Include CSS
$mm_opt_dividers true Boolean Whether or not to include CSS for the dividers add-on throughout the entire CSS framework.
$mm_opt_dividers_light $mm_opt_dividers Boolean Whether or not to include CSS for type light dividers throughout the entire CSS framework.
$mm_opt_dividers_fixed $mm_opt_dividers Boolea Whether or not to include CSS for fixed dividers throughout the entire CSS framework.
Dependencies:
  • Core (on-canvas);
Works great with:

Next add-on:
Drag