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.

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.

API methods for the "autoHeight" add-on

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

Next add-on:
Back button