Iconbar introduction

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.

  • Prepend a fixed iconbar to 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
Sizes
--mm-iconbar-size CSS number 50px The width of the iconbar, in pixels.

API methods for the "iconbar" add-on

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

Next add-on:
Icon panels