Auto height introduction

By default, a menu opened from the top or bottom will fill up 80% of the available height. To automatically measure the height, use the autoHeight options and configuration.

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

Example

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

  • Automatically measure the menu height.
<script>
   document.addEventListener(
      "DOMContentLoaded", () => {

      }
   );
</script>

Options for the "autoHeight" add-on

Option Datatype Default value Description
autoHeight A map of options or true for autoHeight.height = "auto".
{
height String "default" What type of height to use.
Possible values: "default", "auto" and "highest".
}

Configuration for the "autoHeight" add-on

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

API methods for the "autoHeight" add-on

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

CSS variables for the "autoHeight" add-on

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

SCSS variables for the "autoHeight" add-on

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

Next add-on:
Back button