Navbars introduction

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

<script>
   document.addEventListener(
      "DOMContentLoaded", () => {
         new Mmenu( "#my-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-, next- 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.

  • Prepend a fixed searchfield to the menu.
  • Prepend tabs to the menu.
  • Prepend breadcrumbs to the menu.
  • Append a fixed footer to the menu. 
<script>
   document.addEventListener(
      "DOMContentLoaded", () => {

      }
   );
</script>

Options for the "navbars" add-on

Option Datatype Default value Description
1 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 1 An array of strings (for text or HTML), HTML elements or the keywords: "breadcrumbs", "close", "next", "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.
}
}

The "navbars" add-on also adds an object to the classNames option.

<script>
   Mmenu.configs.classNames.navbars = {
      panelTitle  : "Title",
      panelNext   : "Next",
      panelPrev   : "Prev"
   };
</script>

API methods for the "navbars" add-on

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

CSS variables for the "navbars" add-on

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

SCSS variables for the "navbars" 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_navbars Boolean true Whether or not to include CSS for the navbars add-on throughout the entire CSS framework.
$mm_include_navbars_top Boolean $mm_include_navbars Whether or not to include CSS for the navbars positioned at the top throughout the entire CSS framework.
$mm_include_navbars_bottom Boolean $mm_include_navbars Whether or not to include CSS for the navbars positioned at the bottom throughout the entire CSS framework.
$mm_include_navbars_breadcrumbs Boolean $mm_include_navbars Whether or not to include CSS for the navbars breadcrumbs throughout the entire CSS framework.
$mm_include_navbars_tabs Boolean $mm_include_navbars Whether or not to include CSS for the type tabs navbars throughout the entire CSS framework.

Next add-on:
Page scroll