Documentation v8.0.36

Preview Downloads Purchase

Overview

Bootstrap Menu is an exclusive component of Metronic that provides a simple and elegent solution for Bootstrap Menu with nested Dropdown and Accordion Submenus.

Usage

Bootstrap Menu's CSS and Javascript bundles are globally included in all pages.

<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/js/scripts.bundle.js"></script>

Initialization

Bootstrap Menu structure is split into 3 parts. The trigger element, the menu containerand the menu items.
The trigger element can be any HTML element. For example, a button, an inputfield or an empty div.
Add data-kt-menu-triggerto the trigger element with a value of clickor hoverinitialize the menu trigger type.
Add .menuCSS class to the menu container along with data-kt-menu="true"attribute to define the menu container. There are other options available as well, listed below.
Add .menu-itemCSS class to the menu item elements to define the menu elements. Add .menu-linkas a child element within .menu-itemto enable a clean hover state effect.
Bootstrap Menu can be nested within itself to allow multiple tier menus. Please refer to our nested menu example below.
Bootstrap Menu supports all Bootstrap styling classes.
Bootstrap Menu instances can also be controlled programmatically. See below for more info.

Basic Example

Here's a basic example of Bootstrap Menu.

Bootstrap Menu can be combined with our exclusive Toggle and Rotate components for greater functionality.

<!--begin::Trigger-->
<button type="button" class="btn btn-primary"
    data-kt-menu-trigger="click"
    data-kt-menu-placement="bottom-start">
    Click to open menu
    <span class="svg-icon svg-icon-5 rotate-180 ms-3 me-0">...</span>
</button>
<!--end::Trigger-->

<!--begin::Menu-->
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-200px py-4"
    data-kt-menu="true">
    <!--begin::Menu item-->
    <div class="menu-item px-3">
        <a href="#" class="menu-link px-3">
            Menu item 1
        </a>
    </div>
    <!--end::Menu item-->

    <!--begin::Menu item-->
    <div class="menu-item px-3">
        <a href="#" class="menu-link px-3">
            Menu item 2
        </a>
    </div>
    <!--end::Menu item-->

    <!--begin::Menu item-->
    <div class="menu-item px-3">
        <a href="#" class="menu-link px-3">
            Menu item 3
        </a>
    </div>
    <!--end::Menu item-->

    <!--begin::Menu item-->
    <div class="menu-item px-3">
        <a href="#" class="menu-link px-3">
            Menu item 4
        </a>
    </div>
    <!--end::Menu item-->
</div>
<!--end::Menu-->

Nested Menu Example

Here's a nested example of Bootstrap Menu.

Bootstrap Menu can be nested within itself to allow multiple tier menus

<!--begin::Trigger-->
<button type="button" class="btn btn-primary"
    data-kt-menu-trigger="click"
    data-kt-menu-placement="bottom-start">
    Click to open main menu
    <span class="svg-icon svg-icon-5 rotate-180 ms-3 me-0">...</span>
</button>
<!--end::Trigger-->

<!--begin::Menu-->
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-200px py-4"
    data-kt-menu="true">
    <!--begin::Menu item-->
    <div class="menu-item px-3">
        <a href="#" class="menu-link px-3">
            Menu item 1
        </a>
    </div>
    <!--end::Menu item-->

    <!--begin::Menu item-->
    <div class="menu-item px-3">
        <a href="#" class="menu-link px-3">
            Menu item 2
        </a>
    </div>
    <!--end::Menu item-->

    <!--begin::Menu item-->
    <div class="menu-item px-3">
        <div class="menu-link px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">
            Nested Menu

            <span class="svg-icon svg-icon-5 rotate-180 ms-auto me-0">...</span>
        </div>

        <!--begin::Menu-->
        <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-200px py-4"
            data-kt-menu="true">
            <!--begin::Menu item-->
            <div class="menu-item px-3">
                <a href="#" class="menu-link px-3">
                    Nested Menu item 1
                </a>
            </div>
            <!--end::Menu item-->

            <!--begin::Menu item-->
            <div class="menu-item px-3">
                <a href="#" class="menu-link px-3">
                    Nested Menu item 2
                </a>
            </div>
            <!--end::Menu item-->

            <!--begin::Menu item-->
            <div class="menu-item px-3">
                <a href="#" class="menu-link px-3">
                    Nested Menu item 3
                </a>
            </div>
            <!--end::Menu item-->

            <!--begin::Menu item-->
            <div class="menu-item px-3">
                <a href="#" class="menu-link px-3">
                    Nested Menu item 4
                </a>
            </div>
            <!--end::Menu item-->
        </div>
        <!--end::Menu-->
    </div>
    <!--end::Menu item-->

    <!--begin::Menu item-->
    <div class="menu-item px-3">
        <a href="#" class="menu-link px-3">
            Menu item 4
        </a>
    </div>
    <!--end::Menu item-->
</div>
<!--end::Menu-->

Markup Reference

Bootstrap Menu uses HTML attributes to set specific configurations. Here are the references for each below

HTML Attribute references

Name	Type	Description
`data-kt-menu-trigger`	`mandatory`	Sets the trigger method. Accepts values `click`or `hover` This is also compatible with Bootstrap's standard breakpoint sizing (eg: `sm, md, lg, xl`) with similar `px`or `%`values. For responsive options, this attribute value must be written as an object string to enable multiple responsive breakpoints. For example: `{default:'click', 'lg': 'hover'}`indicates that the drawer view component has `bottom`position value width on screens larger than `lg`and `top`for every other screen size.
`data-kt-menu-placement`	`mandatory`	Sets the menu position relative the the trigger element. Accepts values `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`and `right-end` This is also compatible with Bootstrap's standard breakpoint sizing (eg: `sm, md, lg, xl`) with similar `px`or `%`values. For responsive options, this attribute value must be written as an object string to enable multiple responsive breakpoints. For example: `{default:'top', 'g': 'bottom'}`indicates that the drawer view component has `bottom`position value width on screens larger than `lg`and `top`for every other screen size.
`data-kt-menu-offset`	`optional`	Sets the menu offset position relative the trigger element. Accepts upto 2 offset values in `px`. For example `data-kt-menu-offset="0,20"` The first number indicates the horizontal offset value. The second number indicates the vertical offset value.

Methods

All Bootstrap Menu components are initialized automatically, however the following are Bootstrap Menu's functionality methods for more control.

Name	Description
Static Methods
`createInstances(DOMString selector)`	Initializes Bootstrap Menu instances by selector. Default value of `selector`is `[data-kt-menu="true"]`. This method can be used to initialize dynamicly populated Bootstrap Menu instances(e.g: after Ajax request). `KTMenu.createInstances();`
`getInstance(DOMElement element)`	Get the KTMenu instance created `var menuElement = document.querySelector("#kt_menu"); var menu = KTMenu.getInstance(menuElement);`
Public Methods
`show(DOMElement item)`	Shows submenu(accordion or dropdown) of given menu item. `var item = document.querySelector("#kt_menu_item"); menu.show(item);`
`hide(DOMElement item)`	Hides submenu(accordion or dropdown) of given menu item. `var item = document.querySelector("#kt_menu_item"); menu.hide(item);`
`reset(DOMElement item)`	Resets submenu states of given menu item. `var item = document.querySelector("#kt_menu_item"); menu.reset(item);`
`update()`	Updates all submenu states. `menu.update();`
`destroy()`	Removes the component instance from element. `menu.destroy();`