Icon panels introduction

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( "#my-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.

  • Show a small part of the parent panel.
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {

        }
    );
</script>

Options for the "iconPanels" add-on

Option Datatype Default value Description
iconPanels A map of options, true for iconPanels.add or a number for iconPanels.visible.
{
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.
hideDivider Boolean false Whether or not to hide dividers in parent panels, showing only the listitems.
hideNavbar Boolean true Whether or not to hide navbars in parent panels, showing only the listviews.
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.

API methods for the "iconPanels" add-on

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

CSS variables for the "iconPanels" add-on

Variable Datatype Default value Description
Sizes
--mm-iconpanel-size CSS value $mm_iconpanelSize The width of the visible part, in pixels.

SCSS variables for the "iconPanels" add-on

Variable Datatype Default value Description
1 For the actual value, the datatype and a description, have a look at the default variable values reference.
Include CSS
$mm_include_iconpanels Boolean true Whether or not to include CSS for the iconPanels add-on throughout the entire CSS framework.
$mm_include_iconpanels_blocker Boolean $mm_include_iconpanels Whether or not to include CSS for the iconPanels blocker throughout the entire CSS framework.
Sizes
$mm_iconpanelSize CSS value $mm_btnSize 1 The width of the visible part, in pixels.

Next add-on:
Keyboard navigation