Icon panels

When opening a submenu, it will completely cover it's parent panel. To always have a small part of the parent panel visible (most commonly when you're using icons), use the iconPanels options and configuration.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#menu", {
                iconPanels: {
                    // icon panels options
                }
            }, {
                iconPanels: {
                    // icon panels configuration
                }
            });
        }
    );
</script>

Example

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

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {

        }
    );
</script>

Options for the "iconPanels" add-on

Option Datatype Default value Description
iconPanels
{
add boolean false Whether or not a small part of parent panels should be visible.
blockPanel boolean true Whether or not to block the parent panels from interaction. If set to true, the parent panels will be faded out to imply a disabled state.
visible Number 3 The number of visible parent panels (max 3).
Set to "first" to always keep a part of (only) the first panel visible
}

Configuration for the "iconPanels" add-on

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

CSS variables for the "iconPanels" add-on

Variable Datatype Default value Description
--mm-iconpanel-size pixels 50px The width of the visible part, in pixels.

API methods for the "iconPanels" add-on

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