Open the menu Skip to main content

Navbars

To prepend one or multiple fixed navigational bars to the menu, use the navbars options and configuration.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#menu", {
                navbars: [{
                    // first navbar options
                }, {
                    // second navbar options
                }]
            }, {
                navbars: {
                    // navbars configuration
                }
            });
        }
    );
</script>

A menu can have an unlimited amount of navbars, positioned at the top or bottom of the menu.

A navbar can contain a back- and close button, a title, breadcrumbs, a searchfield, a range of buttons (like tabs), custom content or any combination thereof.

Example

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

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

        }
    );
</script>

Options for the "navbars" add-on

Option Datatype Default value Description
* See the description.
navbars An array of navbar objects, a single navbar object or true for a single default navbar.
[
{
use boolean String Number true Whether or not to enable the navbar. Can be a boolean, a string (media query) or a number (for the window min-width).
content String[] HTMLElement[] null * An array of strings (for text or HTML), HTML elements or the keywords: "breadcrumbs", "close", "prev", "searchfield", "title".
If omitted, a fully styled and functional navbar with a title and back button will be created.
position String "top" The position for the navbar.
Possible values: "top" and "bottom".
type String null The type of navbar.
Set to "tabs" to make all anchors in the navbar behave like tabs.
}
{ ... } Object Second navbar object.
{ ... } Object Third navbar object.
}

Configuration for the "navbars" add-on

Option Datatype Default value Description
navbars
{
breadcrumbs
{
separator String "/" The separator between two breadcrumbs.
removeFirst boolean false Whether or not to remove the first breadcrumb.
}
}

CSS variables for the "navbars" add-on

The "navbars" add-on has no CSS variables.

API methods for the "navbars" add-on

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