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
1 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 1 CSS value The width of the iconbar, in pixels.
Dependencies:
  • Core (on-canvas).
Works great with:

Next add-on:
Icon panels