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.
}
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).
}
}

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 Default value Datatype Description
Sizes
--mm-sidebar-collapsed-size $mm_sidebarCollapsedSize CSS value The width of the visible part, in pixels.
--mm-sidebar-expanded-size $mm_sidebarExpandedSize CSS value The width of the menu, in pixels or viewport units.

SCSS variables for the "sidebar" add-on

Variable Default value Datatype Description
1 For the actual value, the datatype and a description, have a look at the default variable values reference.
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_sidebarCollapsedSize $mm_btnSize 1 CSS value The width of the visible part, in pixels.
$mm_sidebarExpandedSize $mm_menuMaxWidth 1 CSS value The width of the menu, in pixels or viewport units.
Dependencies:
  • Core (on-canvas + off-canvas).
Works great with:
Incompattible with:

Next add-on:
Page scroll