Section indexer introduction

To append a section indexer to the menu, use the sectionIndexer options and configuration.

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

Example

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

  • Add a section indexer to the menu.
<script>
   document.addEventListener(
      "DOMContentLoaded", () => {

      }
   );
</script>

Options for the "sectionIndexer" add-on

Option Datatype Default value Description
sectionIndexer A map of options or true for sectionIndexer.add.
{
add Boolean false Whether or not to automatically append a section indexer to the menu.
addTo String "panels" Where to add the section indexer(s).
Possible values: "panels" and a valid query selector.
}

Configuration for the "sectionIndexer" add-on

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

API methods for the "sectionIndexer" add-on

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

CSS variables for the "sectionIndexer" add-on

Variable Datatype Default value Description
Sizes
--mm-sectionindexer-size CSS value $mm_sectionIndexerSize The width of the section indexer, in pixels.

SCSS variables for the "sectionIndexer" add-on

Variable Datatype Default value Description
Include CSS
$mm_include_sectionindexer Boolean true Whether or not to include CSS for the sectionIndexer add-on throughout the entire CSS framework.
Sizes
$mm_sectionIndexerSize CSS value 20px The width of the section indexer, in pixels.

Next add-on:
Set selected