Sidebar introduction

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

<script>
   document.addEventListener(
      "DOMContentLoaded", () => {
         new Mmenu( "#my-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( "#my-menu", {
            sidebar: {
               collapsed: "(min-width: 550px)",
               expanded: "(min-width: 700px)"
            }
         });
      }
   );
</script>
Open in a new window

Options for the "sidebar" add-on

Option Datatype Default value Description
sidebar A map of options or true, a number or string for sidebar.expanded.
{
collapsed A map of options or true, a number or string for sidebar.collapsed.use.
{
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.
hideDivider Boolean false Whether or not to hide dividers in a collapsed menu, showing only the listitems.
hideNavbar Boolean true Whether or not to hide navbars in a collapsed menu, showing only the listviews.
}
expanded A map of options or true, a number or string for sidebar.expanded.use.
{
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).
}
}

Configuration for the "sidebar" add-on

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

API methods for the "sidebar" add-on

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

CSS variables for the "sidebar" add-on

Variable Datatype Default value Description
Sizes
--mm-sidebar-collapsed-size CSS value $mm_sidebarCollapsedSize The width of the visible part, in pixels.
--mm-sidebar-expanded-size CSS value $mm_sidebarExpandedSize The width of the menu, in pixels or viewport units.

SCSS variables for the "sidebar" 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_sidebar Boolean true Whether or not to include CSS for the sidebar add-on throughout the entire CSS framework.
$mm_include_sidebar_collapsed Boolean $mm_include_sidebar Whether or not to include CSS for the collapsed sidebar throughout the entire CSS framework.
$mm_include_sidebar_expanded Boolean $mm_include_sidebar Whether or not to include CSS for the extended sidebar throughout the entire CSS framework.
$mm_include_sidebar_blocker Boolean $mm_include_sidebar Whether or not to include CSS for the sidebar blocker throughout the entire CSS framework.
Sizes
$mm_sidebarCollapsedSize CSS value $mm_btnSize 1 The width of the visible part, in pixels.
$mm_sidebarExpandedSize CSS value $mm_menuMaxWidth 1 The width of the menu, in pixels or viewport units.

Next add-on:
Toggles