Sidebar introduction

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, resize the browser to toggle the sidebar add-on.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#menu", {
                extensions: ["theme-dark"],
                sidebar: {
                    collapsed: {
                        use: "(min-width: 550px)"
                    },
                    expanded: {
                        use: "(min-width: 700px)"
                    }
                }
            });
        }
    );
</script>
Open in a new window

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).
blockMenu Boolean true Whether or not to block the collapsed menu from interaction. If true, clicking the collapsed menu will fully open it.
}
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
Sizes
--mm-sidebar-collapsed-size CSS number 50px The width of the visible part, in pixels.
--mm-sidebar-expanded-size CSS number 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.