Counters introduction

To append a counter to the listitems that have a submenu, use the counters options and configuration.

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

Example

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

  • Append a counter to the listitems.
  • Works great with:
  • Prepend a fixed searchfield to the menu.
<script>
   document.addEventListener(
      "DOMContentLoaded", () => {

      }
   );
</script>

Options for the "counters" add-on

Option Datatype Default value Description
counters A map of options or true for counters.add and counters.count.
{
add Boolean false Whether or not to automatically append a counter to each menu item that has a submenu.
addTo String "panels" Where to add the counters.
Possible values: "panels" and a valid query selector.
count Boolean false Whether or not to automatically count the number of items in the submenu.
}

Configuration for the "counters" add-on

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

<script>
   Mmenu.configs.classNames.counters = {
      counter: "Counter"
   };
</script>

API methods for the "counters" add-on

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

CSS variables for the "counters" add-on

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

SCSS variables for the "counters" add-on

Variable Datatype Default value Description
1 For the actual value, the datatype and a description, have a look at the default variable values reference.
Include CSS
$mm_include_counters Boolean true Whether or not to include CSS for the counters add-on throughout the entire CSS framework.
Sizes
$mm_counterWidth CSS value $mm_btnSize 1 The width of counters.

Next add-on:
Dividers