Open the menu Skip to main content

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.
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.