Sidebar add-on - mmenu.js documentation

If you want the menu to always be partially or fully opened next to the page, use the sidebar options and configuration.

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

Example

Give it a go, hit the orientation-icon to toggle the sidebar add-on.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#menu", {
                sidebar: {
                    collapsed    : {
                        use: "(min-width: 250px)"
                    },
                    expanded    : {
                        use: "(min-width: 600px)"
                    }
                }
            });
        }
    );
</script>

Options for the "sidebar" add-on

Option	Datatype	Default value	Description
sidebar
{
collapsed
{
use	`boolean String Number`	`false`	Whether or not to enable the collapsed menu. Can be a boolean, a string (media query) or a number (for the window min-width).
}
expanded
{
use	`boolean String Number`	`false`	Whether or not to enable the expanded menu. Can be a boolean, a string (media query) or a number (for the window min-width).
initial	`String`	`"open"`	The initial state for the expanded menu.
}
}

Configuration for the "sidebar" add-on

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

CSS variables for the "sidebar" add-on

Variable	Datatype	Default value	Description
--mm-sidebar-collapsed-size	`pixels`	`50px`	The width of the visible part, in pixels.
--mm-sidebar-expanded-size	`pixels`	`var(--mm-max-size)`	The width of the menu, in pixels or viewport units.

API methods for the "sidebar" add-on

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