Iconbar introduction

To prepend an iconbar to the menu, use the iconbar options and configuration.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#my-menu", {
                iconbar: {
                    // iconbar options
                }
            }, {
                iconbar: {
                    // iconbar configuration
                }
            });
        }
    );
</script>

Example

Give it a go, change the options below and see how it affects the menu.

  • Prepend a fixed iconbar to the menu.
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {

        }
    );
</script>

Options for the "iconbar" add-on

Option Datatype Default value Description
iconbar A map of options or an array for iconbar.top.
{
use Boolean | String | Number false Whether or not to prepend an iconbar to the menu. Can be a boolean, a string (media query) or a number (for the window min-width).
position String "left" Where to position the iconbar in the menu. Possible values: "left and "right".
bottom String[] | HTMLElement[] [] An array of strings (for text or HTML) or HTML elements for icons to put in the bottom of the iconbar.
top String[] | HTMLElement[] [] An array of strings (for text or HTML) or HTML elements for icons to put in the top of the iconbar.
type String null 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 Datatype Default value Description
Sizes
--mm-iconbar-size CSS value $mm_iconbarSize The width of the iconbar, in pixels.

SCSS variables for the "iconbar" add-on

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

Next add-on:
Icon panels