KTMenu is a Keen's custom plugin defined in [root]/theme/default/src/theme/framework/components/base/menu/menu.js.
The Keen Menu components allows to manage both horizontal and vertical multi level menus for both desktop and mobile modes.
KTMenu is a Keen's custom plugin defined in [root]/theme/default/src/theme/framework/components/base/menu/menu.js.
The Keen Menu components allows to manage both horizontal and vertical multi level menus for both desktop and mobile modes.
The below code shows the basic vertical menu initialization with accordion submenu mode:
var asideMenu = new KTMenu(id, options);
var asideMenu = new KTMenu('kt_aside_menu', {
// vertical scroll
scroll: {
height: function() {}
},
// submenu setup
submenu: {
desktop: {
// by default the menu mode set to accordion in desktop mode
default: 'accordion',
// whenever body has this class switch the menu mode to dropdown
state: {
body: 'kt-aside--minimize',
mode: 'dropdown'
}
},
tablet: 'accordion', // menu set to accordion in tablet mode
mobile: 'accordion' // menu set to accordion in mobile mode
},
//accordion setup
accordion: {
expandAll: false // allow having multiple expanded accordions in the menu
}
});
The below code shows the basic horizontal menu initialization:
var headerMenu = new KTMenu('kt_header_menu', {
submenu: {
desktop: 'dropdown',
tablet: 'accordion',
mobile: 'accordion'
},
accordion: {
slideSpeed: 200, // accordion toggle slide speed in milliseconds
expandAll: false // allow having multiple expanded accordions in the menu
}
});
| Field | Type | Description | ||
|---|---|---|---|---|
accordion.slideSpeed |
number |
Accordion toggle slide speed in milliseconds
|
||
accordion.autoScroll |
boolean |
Enable auto scrolling(focus) to the clicked menu item
|
||
accordion.autoScrollSpeed |
number |
Enable auto scrolling(focus) to the clicked menu item
|
||
accordion.expandAll |
boolean |
Allow having multiple expanded accordions in the menu
|
||
dropdown.timeout |
number |
Timeout in milliseconds to show and hide the hoverable submenu dropdown
|
||
submenu.desktop |
object|string |
Submenu setup for desktop. Set default for the menu mode in desktop mode.
Whenever any element in HTML has
In the sample below scenario. By default the menu mode set to accordion in desktop mode. Whenever body tag has this class switch the menu mode to dropdown
|
| Method | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
setDefaults(options) |
Set default options
|
||||||||||||
setActiveItem(item) |
Set active menu item
|
||||||||||||
getBreadcrumbs(item) |
Get breadcrumb for menu item
|
||||||||||||
getPageTitle(item) |
Get page title for menu item
|
||||||||||||
hideDropdown(item) |
Hide dropdown submenu item
|
||||||||||||
pauseDropdownHover(item) |
Disable menu for given time
|
||||||||||||
resumeDropdownHover(item) |
Enable menu item back after being paused
|
||||||||||||
getSubmenuMode() |
Get submenu mode |
||||||||||||
reload() |
Reload the menu |
||||||||||||
on(name, handler) |
Register event
|
||||||||||||
one(name, handler) |
Register event to be run once
|
||||||||||||
Keen empowers your project with virtually limitless array of options
to create endless unique projects.
We truly hope that our love and dedication to produce an incredibly powerful high level solution suits all your project needs. We will continue to deliver incredible enterprise ready solutions for Angular, React and VueJS to serve you better. We sincerely hope you enjoyed using Keen as much as we enjoyed building it.