Logo

Documentation v1.0.6

  • General
  • Menu
  • API
Preview Upgrade to Pro

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");
});
Upgrade To Pro
Pro Version Benefits Free Pro
UI Elements 20 100
In-house Components 20 40
Crafted Pages 5 20
Complete Documentation
Product Support
Layout Builder
Source Vectors
Email Templates
Calendar App
User Management App
Chat App
Customers App
Upgrade to Jet HTML Free
Download Jet HTML Free
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
From guides and how-tos, to live demos and code examples to get started right away.
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.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now