Sidebar introduction

If you want the menu to always be fully or partially opened next to the page, include the "sidebar" add-on .js and .css files and use the sidebar options.

<head>
   <script src="path/to/jquery.js"></script>
   <script src="path/to/jquery.mmenu.js"></script>
   <script src="path/to/jquery.mmenu.sidebar.js"></script>
   <link href="path/to/jquery.mmenu.css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.sidebar.css" rel="stylesheet" />
   <script>
      $(document).ready(function() {
         $("#my-menu").mmenu({
            sidebar: {
               // sidebar options
            }
         });
      });
   </script>

Example

Give it a go, resize the browser to toggle the sidebar add-on.

<script>
   $(document).ready(function() {
      $("#my-menu").mmenu({
         sidebar: {
            collapsed: "(min-width: 550px)",
            expanded: "(min-width: 700px)"
         }
      });
   });
</script>
Open in a new window

Options for the "sidebar" add-on

Option Default value Datatype 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 false Mixed 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 true Boolean Whether or not to block the collapsed menu from interaction. If true, clicking the collapsed menu will fully open it.
hideDivider false Boolean Whether or not to hide dividers in a collapsed menu, showing only the listitems.
hideNavbar true Boolean Whether or not to hide navbars in a collapsed menu, showing only the listviews.
size 40 Number The width of the sidebar in pixels.
Possible values: 40, 60 and 80.
}
expanded A map of options or true, a number or string for sidebar.expanded.use.
{
use false Mixed Whether or not to enable the expanded menu. Can be a boolean, a string (media query) or a number (for the window min-width).
size 30 Number The width of the sidebar in percentages.
Possible values: 25, 30 and 35.
}
}

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.

SCSS variables for the "sidebar" add-on

Variable Default value Datatype Description
Include CSS
$mm_opt_sidebar true Boolean Whether or not to include CSS for the sidebar add-on throughout the entire CSS framework.
$mm_opt_sidebar_collapsed $mm_opt_sidebar Boolean Whether or not to include CSS for the collapsed sidebar throughout the entire CSS framework.
$mm_opt_sidebar_expanded $mm_opt_sidebar Boolean Whether or not to include CSS for the extended sidebar throughout the entire CSS framework.
$mm_opt_sidebar_blocker $mm_opt_sidebar Boolean Whether or not to include CSS for the sidebar blocker throughout the entire CSS framework.
Sizes
$mm_sidebarCollapsedSizes [40, 60, 80] Array Array of the available widths in pixels.
$mm_sidebarExpandedSizes [40, 60, 80] Array Array of the available widths in percentages.
Dependencies:
  • Core (on-canvas + off-canvas).
Works great with:
Incompattible with:

Next add-on:
Page scroll