Dividers introduction

To use or automatically add dividers in the listviews, use the dividers options and configuration.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#my-menu", {
                dividers: {
                    // dividers options
                }
            }, {
                dividers: {
                    // dividers configuration
                }
            });
        }
    );
</script>

Example

Give it a go, change the options below and see how it affects the menu.

  • Automatically add dividers.
  • Works great with:
  • Prepend a fixed searchfield to the menu.
  • Add a section indexer to the menu. 
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {

        }
    );
</script>

Options for the "dividers" add-on

Option Datatype Default value Description
dividers A map of options or true for dividers.add.
{
add Boolean false Whether or not to automatically add dividers to the menu (dividing the listitems alphabetically).
addTo String "panels" Where to add the dividers.
Possible values: "panels" and a valid query selector for a listview.
}

Configuration for the "dividers" add-on

The "dividers" add-on has no configuration options, it does add an object to the classNames option.

<script>
    Mmenu.configs.classNames.counters = {
        divider: "Divider"
    };
</script>

CSS variables for the "dividers" add-on

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

SCSS variables for the "dividers" add-on

Variable Datatype Default value Description
Include CSS
$mm_include_dividers Boolean true Whether or not to include CSS for the dividers add-on throughout the entire CSS framework.

API methods for the "dividers" add-on

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

Next add-on:
Drag