(S)CSSintroduction

The mmenu.js plugin uses CSS variables for most of its sizing and styling. The default CSS variables can be overridden to customize your menu without having to make changes to the plugin.

<style>
   .mm-menu {
      --mm-listitem-size: 50px;
   }
</style>

Because CSS variables are cascading, they can be overriden for each part of the menu. Learn how to do so in the CSS variables tutorial.

Note that the CSS variables are declared for the .mm-menu and/or .mm-slideout elements.


The mmenu.js plugin uses SCSS to compile its .css files. The default SCSS variables can also be overridden. Learn how to do so on the custom build page.

Note that add-ons and extensions might have their own set of CSS and SCSS variables.

Available CSS variables

Variables Datatype Default value Description
Colors
--mm-color-background CSS value $mm_backgroundColor The background-color for the menu.
--mm-color-background-emphasis CSS value $mm_emphasizedBackgroundColor The background-color for emphasized listitems.
--mm-color-background-highlight CSS value $mm_highlightedBackgroundColor The background-color for highlighted listitems.
--mm-color-border CSS value $mm_borderColor The border-color for navbars, listitems, etc.
--mm-color-button CSS value $mm_dimmedTextColor The color for buttons.
--mm-color-text CSS value $mm_textColor The text-color for the menu.
--mm-color-text-dimmed CSS value $mm_dimmedTextColor The text-color for dimmed out elements in the menu.
Positioning
--mm-offset-top CSS value $mm_offsetTop Menu top offset.
--mm-offset-right CSS value $mm_offsetRight Menu right offset.
--mm-offset-bottom CSS value $mm_offsetBottom Menu bottom offset.
--mm-offset-left CSS value $mm_offsetLeft Menu left offset.
Sizes
--mm-line-height CSS value $mm_lineHeight The line-height for the menu.
--mm-listitem-size CSS value $mm_listitemSize The height for the listitems.
--mm-navbar-size CSS value $mm_navbarSize The height for the navbars.

Note that add-ons and extensions might have their own set of CSS variables.

Available SCSS variables

Variables Datatype Default value Description
Include CSS
$mm_include_vertical Boolean true Whether or not to include CSS for vertical submenus throughout the entire CSS framework.
$mm_include_rtl Boolean true Whether or not to include CSS for RTL support throughout the entire CSS framework.
Animations
$mm_transitionDuration CSS value 0.4s The duration of all transitions.
$mm_transitionFunction CSS value ease The function to use for all transitions
Colors
$mm_backgroundColor CSS value #f3f3f3 The background-color for the menu.
$mm_borderColor CSS value rgba(0,0,0,0.1) The border-color for navbars, listitems, etc.
$mm_dimmedTextColor CSS value rgba(0,0,0,0.3) The text-color for dimmed out elements in the menu.
$mm_emphasizedBackgroundColor CSS value rgba(255,255,255,0.4) The background-color for emphasized listitems.
$mm_highlightedBackgroundColor CSS value rgba(0,0,0,,0.05) The background-color for highlighted listitems.
$mm_navbarColor CSS value rgba(0,0,0,0.3) The text-color for navbars.
$mm_textColor CSS value rgba(0,0,0,0.75) The text-color for the menu.
Positioning
$mm_offsetTop CSS value 0px Menu top offset.
$mm_offsetRight CSS value 0px Menu right offset.
$mm_offsetBottom CSS value 0px Menu bototm offset.
$mm_offsetLeft CSS value 0px Menu left offset.
Sizes
$mm_btnSize CSS value 44px Base size for listitems, navbars, etc.
$mm_lineHeight CSS value 20px The line-height for the menu.
$mm_listitemIndent CSS value $mm_padding*2 The left indent of the listitems.
$mm_listitemSize CSS value $mm_btnSize The height of the listitems.
$mm_navbarSize CSS value $mm_btnSize The height for the navbars.
$mm_padding CSS value 10px The padding for elements throughout the CSS framework.
$mm_panelPadding CSS value $mm_padding*2 The padding of the panels.
$mm_subopenWidth CSS value $mm_btnSize + $mm_padding The width of the buttons that open submenus.
$mm_subpanelOffset CSS value 30% How far a panel slides out to the left when opening a subpanel as a percentage. From 0% (not moved) to 100% (fully moved out).

Note that add-ons and extensions might have their own set of SCSS variables.