# Documentation v8.0.38

Preview Downloads Purchase

# Markup Reference

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

## HTML Attributes

Bootstrap KTMenu HTML attribute `data-kt-menu-{parameter}`values are compatible with Bootstrap breakpoint sizing `sm, md, lg, xl, xxl`. For responsive options, this attribute value must be written as an object string to enable multiple responsive breakpoints.
For example: `data-kt-menu-trigger="{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.

Name | Type | Description
--- | --- | ---
`data-kt-menu-trigger` | `mandatory` | Sets the menu item submenu trigger method. Accepts values `click`or `hover`.
`data-kt-menu-placement` | `mandatory` | KTMenu uses Popper library for dropdown 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`. For more info check.
`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 and the second number indicates the vertical offset value.
`data-kt-menu-toggle` | `optional` | Sets the menu item submenu toggle mode. Accepts boolean values `true`or `false`.
`data-kt-menu-permanent` | `optional` | Sets the menu item dropdown permanent to prevent it from closing on click on it and its children. Accepts boolean values `true`or `false`.
`data-kt-menu-overflow` | `optional` | Populates the menu item dropdown under `body`element instead of under the item element. This option is useful when the menu parent has `overflow: hidden`style. Accepts boolean values `true`or `false`.
`data-kt-menu-attach` | `optional` | Attaches the dropdown menu to the item's parent element, instead to the item itself. Accepts a string value `parent`or any query string for an HTML element `#some_parent_element`.
`data-kt-menu-height` | `optional` | Sets dropdown custom height. Accepts CSS `px`or `rem`values.
`data-kt-menu-width` | `optional` | Sets dropdown custom width. Accepts CSS `px`or `rem`values.

# 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): KTMenu` | Get the KTMenu instance created
    var menuElement = document.querySelector("#kt_menu");
    var menu = KTMenu.getInstance(menuElement);
`updateDropdowns()` | Updates dropdown by recalculating its styles and positions.
    KTMenu.updateDropdowns();
`hideDropdowns()` | Hides currently shown Menu Dropdowns
    KTMenu.hideDropdowns();
Public Methods
`show(DOMElement item)` | Shows submenu(accordion or dropdown) of given menu item.
    var menuElement = document.querySelector("#kt_menu");
    var menu = KTMenu.getInstance(menuElement);
    var item = document.querySelector("#kt_menu_item"); // .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);
`hideAccordions(DOMElement item)` | Hides accordions of given menu item.
    var item = document.querySelector("#kt_menu_item");
    menu.hideAccordions(item);
`reset(DOMElement item)` | Resets submenu states( `.active`, `.here`, `.show`classes) of given menu item.
    var item = document.querySelector("#kt_menu_item");
    menu.reset(item);
`update()` | Updates all submenu states.
    menu.update();
`getElement(): DOMElement` | Returns DOM element of menu.
    var menuElement = menu.getElement();
`getItemLinkElement(DOMElement item): DOMElement` | Returns DOM element of link for give menu item `.menu-item`.
    var item = document.querySelector("#kt_menu_item");
    var menuLinkElement = menu.getItemLinkElement(item);
`getItemToggleElement(DOMElement item): DOMElement` | Returns DOM element of toggle for give menu item `.menu-item`.
    var item = document.querySelector("#kt_menu_item");
    var menuToggleElement = menu.getItemToggleElement(item);
`getItemSubElement(DOMElement item): DOMElement` | Returns DOM element of submenu for give menu item `.menu-item`.
    var item = document.querySelector("#kt_menu_item");
    var menuSubElement = menu.getItemSubElement(item);
`getItemParentElements(DOMElement item): DOMElement` | Returns DOM elements of parent items for give menu item `.menu-item`.
    var item = document.querySelector("#kt_menu_item");
    var parentItemElements = menu.getItemParentElements(item);
`isItemSubShown(DOMElement item): Boolean` | Checks whether item submenu is shown.
    var item = document.querySelector("#kt_menu_item");
    var isShown = menu.isItemSubShown(item);
`isItemParentShown(DOMElement item): DOMElement` | Checks whether item parent is shown.
    var item = document.querySelector("#kt_menu_item");
    var isShown = menu.isItemParentShown(item);
`isItemDropdownPermanent(DOMElement item): Boolean` | Checks whether item parent is shown in Boolean.
    var item = document.querySelector("#kt_menu_item");
    var isPermanent = menu.isItemDropdownPermanent(item);
`getTriggerElement(DOMElement item): DOMElement` | Returns menu trigger element's DOM object.
    var triggerElement = menu.getTriggerElement();
`on(String eventName, Function handler)` | Attaches a handler to a custom event.
    menu.on('kt.menu.dropdown.show', function() {
        console.log('menu dropdown show event fired');
    });
`one(String eventName, Function handler)` | Attaches a handler to a custom event that is executed at most once per.
    menu.one('kt.menu.dropdown.show', function() {
        console.log('menu dropdown show event fired at most once');
    });
`off(String eventName)` | Deattaches a handler from a custom event.
    menu.off('kt.menu.dropdown.show');
`destroy()` | Removes the component instance from element.
    menu.destroy();

# Events

Below are few events for hooking into the Bootstrap Menu functionality.

Event Type | Description
--- | ---
`kt.menu.link.click` | This event fires on after the menu link `.menu-link`is clicked and before it's processed.
    var menuEl = document.querySelector("#kt_menu");
    var menu = KTMenu.getInstance(menuEl);
    menu.on("kt.menu.link.click", function(DOMElement link) {
        console.log("menu link is just clicked");
        // return false; quit and do not hide shown dropdowns
    });
`kt.menu.link.clicked` | This event fires on after the menu link `.menu-link`is clicked and processed.
    menu.on("kt.menu.link.clicked", function(DOMElement link) {
        console.log("menu link click is processed");
    });
`kt.menu.dropdown.show` | This event fires on before menu item `.menu-item`dropdown is shown.
    menu.on("kt.menu.dropdown.show", function(DOMElement item) {
        console.log("before menu dropdown show");
        // return false; quit and do not show the dropdown
    });
`kt.menu.dropdown.shown` | This event fires on after menu item `.menu-item`dropdown is shown.
    menu.on("kt.menu.dropdown.shown", function(DOMElement item) {
        console.log("after menu dropdown show");
    });
`kt.menu.dropdown.hide` | This event fires on before menu item `.menu-item`dropdown is hidden.
    menu.on("kt.menu.dropdown.hide", function(DOMElement item) {
        console.log("before menu dropdown hide");
        // return false; quit and do not show the dropdown
    });
`kt.menu.dropdown.hidden` | This event fires on after menu item `.menu-item`dropdown is hidden.
    menu.on("kt.menu.dropdown.hidden", function(DOMElement item) {
        console.log("after menu dropdown hide");
    });
`kt.menu.accordion.show` | This event fires on before menu item `.menu-item`accordion is shown.
    menu.on("kt.menu.accordion.show", function(DOMElement item) {
        console.log("before menu accordion show");
        // return false; quit and do not show the accordion
    });
`kt.menu.accordion.shown` | This event fires on after menu item `.menu-item`accordion is shown.
    menu.on("kt.menu.accordion.shown", function(DOMElement item) {
        console.log("after menu accordion show");
    });
`kt.menu.accordion.hide` | This event fires on before menu item `.menu-item`accordion is hidden.
    menu.on("kt.menu.dropdown.hide", function(DOMElement item) {
        console.log("before menu accordion hide");
        // return false; quit and do not show the accordion
    });
`kt.menu.accordion.hidden` | This event fires on after menu item `.menu-item`accordion is hidden.
    menu.on("kt.menu.accordion.hidden", function(DOMElement item) {
        console.log("after menu accordion hide");
    });

### Explore

### Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### Learn & Get Inspired

## Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now