Iconbar introduction

To prepend an iconbar to the menu, include the "iconbar" add-on .js and .css files and use the iconbar options.

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

Example

Give it a go, change the options below and see how it affects the menu in the example on the right.

Prepend a fixed iconbar to the menu.

<script>
   jQuery(document).ready(function( $ ) {

   });
</script>

Options for the "iconbar" add-on

Option	Default value	Datatype	Description
iconbar			A map of options or an array for `iconbar.top`.
{
add	`false`	Boolean	Whether or not to prepend an iconbar to the menu.
size	`40`	Boolean	The width of the iconbar in pixels. Possible values: `40`, `60` and `80`.
top	`[]`	Array	An array of strings (for text or HTML) or jQuery objects for icons to put in the top of the iconbar.
bottom	`[]`	Array	An array of strings (for text or HTML) or jQuery objects for icons to put in the bottom of the iconbar.
type	`null`	String	The type of iconbar. Set to `"tabs"` to make all anchors in the iconbar behave like tabs.
}

Configuration for the "iconbar" add-on

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

API methods for the "iconbar" add-on

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

CSS variables for the "iconbar" add-on

Variable	Default value	Datatype	Description
Sizes
--mm-iconbar-size	`$mm_iconbarSize`	CSS value	The width of the iconbar, in pixels.

SCSS variables for the "iconbar" add-on

Variable	Default value	Datatype	Description
¹ For the actual value, the datatype and a description, have a look at the default variable values reference.
Include CSS
$mm_opt_iconbar	`true`	Boolean	Whether or not to include CSS for the iconbar add-on throughout the entire CSS framework.
$mm_opt_iconbar_tabs	`$mm_opt_iconbar`	Boolean	Whether or not to include CSS for iconbar tabs throughout the entire CSS framework.
Sizes
$mm_iconbarSize	`$mm_btnSize` ¹	CSS value	The width of the iconbar, in pixels.

Compatibility

Dependencies:

Core (on-canvas).

Works great with:

The iconPanels add-on;
The sidebar add-on.

Next add-on:
Icon panels