Iconbar

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

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

Example

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

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {

        }
    );
</script>

Options for the "iconbar" add-on

Option Datatype Default value Description
iconbar
{
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.

CSS variables for the "iconbar" add-on

Variable Datatype Default value Description
--mm-iconbar-size pixels 50px The width of the iconbar, in pixels.

API methods for the "iconbar" add-on

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