@syncfusion/ej2-navigations 16.4.47 → 16.4.52-46585

package/src/common/menu-base.js

@@ -4,7 +4,7 @@ var __extends = (this && this.__extends) || (function () {
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
             function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
         return extendStatics(d, b);
-    }
+    };
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }
@@ -17,16 +17,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, Property, ChildProperty, NotifyPropertyChanges } from '@syncfusion/ej2-base';
+import { Component, Property, ChildProperty, NotifyPropertyChanges, isBlazor } from '@syncfusion/ej2-base';
 import { Event, EventHandler, KeyboardEvents, Touch } from '@syncfusion/ej2-base';
 import { Animation } from '@syncfusion/ej2-base';
 import { Browser, Collection, setValue, getValue, getUniqueID, getInstance, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { select, selectAll, closest, detach, append, rippleEffect, isVisible, Complex, addClass, removeClass } from '@syncfusion/ej2-base';
 import { ListBase } from '@syncfusion/ej2-lists';
 import { getZindexPartial, calculatePosition, isCollide, fit, Popup } from '@syncfusion/ej2-popups';
+import { SanitizeHtmlHelper } from '@syncfusion/ej2-base';
 import { getScrollableParent } from '@syncfusion/ej2-popups';
 import { HScroll } from '../common/h-scroll';
 import { VScroll } from '../common/v-scroll';
+import { addScrolling, destroyScroll } from '../common/menu-scroll';
 var ENTER = 'enter';
 var ESCAPE = 'escape';
 var FOCUSED = 'e-focused';
@@ -39,6 +41,7 @@ var LEFTARROW = 'leftarrow';
 var RIGHTARROW = 'rightarrow';
 var HOME = 'home';
 var END = 'end';
+var TAB = 'tab';
 var CARET = 'e-caret';
 var ITEM = 'e-menu-item';
 var DISABLED = 'e-disabled';
@@ -46,6 +49,7 @@ var HIDE = 'e-menu-hide';
 var ICONS = 'e-icons';
 var RTL = 'e-rtl';
 var POPUP = 'e-menu-popup';
+var TEMPLATE_PROPERTY = 'Template';
 /**
  * Configures the field options of the Menu.
  */
@@ -128,41 +132,60 @@ var MenuAnimationSettings = /** @class */ (function (_super) {
 }(ChildProperty));
 export { MenuAnimationSettings };
 /**
- * @private
  * Base class for Menu and ContextMenu components.
+ *
+ *  @private
  */
 var MenuBase = /** @class */ (function (_super) {
     __extends(MenuBase, _super);
     /**
      * Constructor for creating the widget.
+     *
      * @private
+     * @param {MenuBaseModel} options - Specifies the menu base model
+     * @param {string | HTMLUListElement} element - Specifies the element
      */
     function MenuBase(options, element) {
         var _this = _super.call(this, options, element) || this;
         _this.navIdx = [];
         _this.animation = new Animation({});
         _this.isTapHold = false;
+        _this.tempItem = [];
+        _this.showSubMenuOn = 'Auto';
         return _this;
     }
     /**
      * Initialized third party configuration settings.
+     *
      * @private
+     * @returns {void}
      */
     MenuBase.prototype.preRender = function () {
-        if (this.element.tagName === 'EJS-CONTEXTMENU') {
-            this.element.style.display = 'none';
-            this.element.classList.remove('e-' + this.getModuleName());
-            this.element.classList.remove('e-control');
-            var ejInst = getValue('ej2_instances', this.element);
-            var ul = this.createElement('ul');
-            this.ngElement = this.element;
-            this.element = ul;
-            this.element.classList.add('e-control');
-            this.element.classList.add('e-' + this.getModuleName());
-            setValue('ej2_instances', ejInst, this.element);
-            if (!this.element.id) {
-                this.element.id = getUniqueID(this.getModuleName());
+        if (!this.isMenu) {
+            var ul = void 0;
+            if (this.element.tagName === 'EJS-CONTEXTMENU') {
+                ul = this.createElement('ul', {
+                    id: getUniqueID(this.getModuleName()), className: 'e-control e-lib e-' + this.getModuleName()
+                });
+                var ejInst = getValue('ej2_instances', this.element);
+                removeClass([this.element], ['e-control', 'e-lib', 'e-' + this.getModuleName()]);
+                this.clonedElement = this.element;
+                this.element = ul;
+                setValue('ej2_instances', ejInst, this.element);
+            }
+            else {
+                ul = this.createElement('ul', { id: getUniqueID(this.getModuleName()) });
+                append([].slice.call(this.element.cloneNode(true).children), ul);
+                var refEle = this.element.nextElementSibling;
+                if (refEle) {
+                    this.element.parentElement.insertBefore(ul, refEle);
+                }
+                else {
+                    this.element.parentElement.appendChild(ul);
+                }
+                this.clonedElement = ul;
             }
+            this.clonedElement.style.display = 'none';
         }
         if (this.element.tagName === 'EJS-MENU') {
             var ele = this.element;
@@ -177,7 +200,7 @@ var MenuBase = /** @class */ (function (_super) {
             ele = ul;
             wrapper.appendChild(ele);
             setValue('ej2_instances', ejInstance, ele);
-            this.ngElement = wrapper;
+            this.clonedElement = wrapper;
             this.element = ele;
             if (!this.element.id) {
                 this.element.id = getUniqueID(this.getModuleName());
@@ -185,13 +208,24 @@ var MenuBase = /** @class */ (function (_super) {
         }
     };
     /**
-     * Initialize the control rendering
+     * Initialize the control rendering.
+     *
      * @private
+     * @returns {void}
      */
     MenuBase.prototype.render = function () {
+        var _this = this;
         this.initialize();
         this.renderItems();
         this.wireEvents();
+        this.renderComplete();
+        var wrapper = this.getWrapper();
+        // eslint-disable-next-line
+        if (this.template && this.enableScrolling && (this.isReact || this.isAngular)) {
+            requestAnimationFrame(function () {
+                addScrolling(_this.createElement, wrapper, _this.element, 'hscroll', _this.enableRtl);
+            });
+        }
     };
     MenuBase.prototype.initialize = function () {
         var wrapper = this.getWrapper();
@@ -205,26 +239,47 @@ var MenuBase = /** @class */ (function (_super) {
             }
         }
         if (this.cssClass) {
-            addClass([wrapper], this.cssClass.split(' '));
+            addClass([wrapper], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
         }
         if (this.enableRtl) {
             wrapper.classList.add(RTL);
         }
         wrapper.appendChild(this.element);
+        if (this.isMenu && this.hamburgerMode) {
+            if (!this.target) {
+                this.createHeaderContainer(wrapper);
+            }
+        }
+        this.defaultOption = this.showItemOnClick;
     };
     MenuBase.prototype.renderItems = function () {
         if (!this.items.length) {
             var items = ListBase.createJsonFromElement(this.element, { fields: { child: 'items' } });
             this.setProperties({ items: items }, true);
-            this.element.innerHTML = '';
+            if (isBlazor() && !this.isMenu) {
+                this.element = this.removeChildElement(this.element);
+            }
+            else {
+                this.element.innerHTML = '';
+            }
         }
         var ul = this.createItems(this.items);
         append(Array.prototype.slice.call(ul.children), this.element);
         this.element.classList.add('e-menu-parent');
-        var wrapper = this.getWrapper();
-        this.element.classList.contains('e-vertical') ?
-            this.addScrolling(wrapper, this.element, 'vscroll', wrapper.offsetHeight, this.element.offsetHeight)
-            : this.addScrolling(wrapper, this.element, 'hscroll', wrapper.offsetWidth, this.element.offsetWidth);
+        if (this.isMenu) {
+            if (!this.hamburgerMode && this.element.classList.contains('e-vertical')) {
+                this.setBlankIconStyle(this.element);
+            }
+            if (this.enableScrolling) {
+                var wrapper = this.getWrapper();
+                if (this.element.classList.contains('e-vertical')) {
+                    addScrolling(this.createElement, wrapper, this.element, 'vscroll', this.enableRtl);
+                }
+                else {
+                    addScrolling(this.createElement, wrapper, this.element, 'hscroll', this.enableRtl);
+                }
+            }
+        }
     };
     MenuBase.prototype.wireEvents = function () {
         var wrapper = this.getWrapper();
@@ -233,17 +288,25 @@ var MenuBase = /** @class */ (function (_super) {
             var targetElems = selectAll(this.target);
             for (var i = 0, len = targetElems.length; i < len; i++) {
                 target = targetElems[i];
-                if (Browser.isIos) {
-                    new Touch(target, { tapHold: this.touchHandler.bind(this) });
+                if (this.isMenu) {
+                    EventHandler.add(target, 'click', this.menuHeaderClickHandler, this);
                 }
                 else {
-                    EventHandler.add(target, 'contextmenu', this.cmenuHandler, this);
+                    if (Browser.isIos) {
+                        new Touch(target, { tapHold: this.touchHandler.bind(this) });
+                    }
+                    else {
+                        EventHandler.add(target, 'contextmenu', this.cmenuHandler, this);
+                    }
                 }
             }
             this.targetElement = target;
-            for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
-                var parent_1 = _a[_i];
-                EventHandler.add(parent_1, 'scroll', this.scrollHandler, this);
+            if (!this.isMenu) {
+                EventHandler.add(this.targetElement, 'scroll', this.scrollHandler, this);
+                for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
+                    var parent_1 = _a[_i];
+                    EventHandler.add(parent_1, 'scroll', this.scrollHandler, this);
+                }
             }
         }
         if (!Browser.isDevice) {
@@ -269,6 +332,7 @@ var MenuBase = /** @class */ (function (_super) {
         if (this.isMenu) {
             keyConfigs.home = HOME;
             keyConfigs.end = END;
+            keyConfigs.tab = TAB;
         }
         new KeyboardEvents(element, {
             keyAction: this.keyBoardHandler.bind(this),
@@ -277,14 +341,15 @@ var MenuBase = /** @class */ (function (_super) {
     };
     MenuBase.prototype.mouseDownHandler = function (e) {
         if (closest(e.target, '.e-' + this.getModuleName() + '-wrapper') !== this.getWrapper()
-            && !closest(e.target, '.e-' + this.getModuleName() + '-popup')) {
-            this.closeMenu(this.navIdx.length, e);
+            && (!closest(e.target, '.e-' + this.getModuleName() + '-popup'))) {
+            this.closeMenu(this.isMenu ? null : this.navIdx.length, e);
         }
     };
     MenuBase.prototype.keyBoardHandler = function (e) {
         var actionName = '';
         var trgt = e.target;
-        var actionNeeded = this.isMenu && !this.element.classList.contains('e-vertical') && this.navIdx.length < 1;
+        var actionNeeded = this.isMenu && !this.hamburgerMode && !this.element.classList.contains('e-vertical')
+            && this.navIdx.length < 1;
         e.preventDefault();
         if (this.enableScrolling && e.keyCode === 13 && trgt.classList.contains('e-scroll-nav')) {
             this.removeLIStateByClass([FOCUSED, SELECTED], [closest(trgt, '.e-' + this.getModuleName() + '-wrapper')]);
@@ -328,6 +393,7 @@ var MenuBase = /** @class */ (function (_super) {
             case UPARROW:
             case END:
             case HOME:
+            case TAB:
                 this.upDownKeyHandler(e);
                 break;
             case RIGHTARROW:
@@ -337,7 +403,12 @@ var MenuBase = /** @class */ (function (_super) {
                 this.leftEscKeyHandler(e);
                 break;
             case ENTER:
-                this.rightEnterKeyHandler(e);
+                if (this.hamburgerMode && trgt.tagName === 'SPAN' && trgt.classList.contains('e-menu-icon')) {
+                    this.menuHeaderClickHandler(e);
+                }
+                else {
+                    this.rightEnterKeyHandler(e);
+                }
                 break;
             case ESCAPE:
                 this.leftEscKeyHandler(e);
@@ -349,7 +420,7 @@ var MenuBase = /** @class */ (function (_super) {
     };
     MenuBase.prototype.upDownKeyHandler = function (e) {
         var cul = this.getUlByNavIdx();
-        var defaultIdx = (e.action === DOWNARROW || e.action === HOME) ? 0 : cul.childElementCount - 1;
+        var defaultIdx = (e.action === DOWNARROW || e.action === HOME || e.action === TAB) ? 0 : cul.childElementCount - 1;
         var fliIdx = defaultIdx;
         var fli = this.getLIByClass(cul, FOCUSED);
         if (fli) {
@@ -358,7 +429,12 @@ var MenuBase = /** @class */ (function (_super) {
             }
             fli.classList.remove(FOCUSED);
             if (e.action !== END && e.action !== HOME) {
-                e.action === DOWNARROW ? fliIdx++ : fliIdx--;
+                if (e.action === DOWNARROW) {
+                    fliIdx++;
+                }
+                else {
+                    fliIdx--;
+                }
                 if (fliIdx === (e.action === DOWNARROW ? cul.childElementCount : -1)) {
                     fliIdx = defaultIdx;
                 }
@@ -370,10 +446,21 @@ var MenuBase = /** @class */ (function (_super) {
         cul.children[fliIdx].focus();
     };
     MenuBase.prototype.isValidLI = function (cli, index, action) {
-        var wrapper = this.getWrapper();
         var cul = this.getUlByNavIdx();
+        var defaultIdx = (action === DOWNARROW || action === HOME || action === TAB) ? 0 : cul.childElementCount - 1;
         if (cli.classList.contains(SEPARATOR) || cli.classList.contains(DISABLED) || cli.classList.contains(HIDE)) {
-            ((action === DOWNARROW) || (action === RIGHTARROW)) ? index++ : index--;
+            if (action === DOWNARROW && index === cul.childElementCount - 1) {
+                index = defaultIdx;
+            }
+            else if (action === UPARROW && index === 0) {
+                index = defaultIdx;
+            }
+            else if ((action === DOWNARROW) || (action === RIGHTARROW)) {
+                index++;
+            }
+            else {
+                index--;
+            }
         }
         cli = cul.children[index];
         if (cli.classList.contains(SEPARATOR) || cli.classList.contains(DISABLED) || cli.classList.contains(HIDE)) {
@@ -398,25 +485,12 @@ var MenuBase = /** @class */ (function (_super) {
         if (fli) {
             var fliIdx = this.getIdx(cul, fli);
             var navIdx = this.navIdx.concat(fliIdx);
-            var index = void 0;
             var item = this.getItem(navIdx);
             if (item.items.length) {
                 this.navIdx.push(fliIdx);
-                this.openMenu(fli, item, null, null, e);
-                fli.classList.remove(FOCUSED);
-                if (this.isMenu && this.navIdx.length === 1) {
-                    this.removeLIStateByClass([SELECTED], [this.getWrapper()]);
-                }
-                fli.classList.add(SELECTED);
-                if (e.action === ENTER) {
-                    eventArgs = { element: fli, item: item };
-                    this.trigger('select', eventArgs);
-                }
-                fli.focus();
-                cul = this.getUlByNavIdx();
-                index = this.isValidLI(cul.children[0], 0, e.action);
-                cul.children[index].classList.add(FOCUSED);
-                cul.children[index].focus();
+                this.keyType = 'right';
+                this.action = e.action;
+                this.openMenu(fli, item, -1, -1, e);
             }
             else {
                 if (e.action === ENTER) {
@@ -427,7 +501,7 @@ var MenuBase = /** @class */ (function (_super) {
                         fli.classList.remove(FOCUSED);
                     }
                     fli.classList.add(SELECTED);
-                    eventArgs = { element: fli, item: item };
+                    eventArgs = { element: fli, item: item, event: e };
                     this.trigger('select', eventArgs);
                     this.closeMenu(null, e);
                 }
@@ -436,15 +510,8 @@ var MenuBase = /** @class */ (function (_super) {
     };
     MenuBase.prototype.leftEscKeyHandler = function (e) {
         if (this.navIdx.length) {
+            this.keyType = 'left';
             this.closeMenu(this.navIdx.length, e);
-            var cul = this.getUlByNavIdx();
-            var sli = this.getLIByClass(cul, SELECTED);
-            if (sli) {
-                sli.setAttribute('aria-expanded', 'false');
-                sli.classList.remove(SELECTED);
-                sli.classList.add(FOCUSED);
-                sli.focus();
-            }
         }
         else {
             if (e.action === ESCAPE) {
@@ -461,73 +528,208 @@ var MenuBase = /** @class */ (function (_super) {
     };
     MenuBase.prototype.cmenuHandler = function (e) {
         e.preventDefault();
+        this.currentTarget = e.target;
+        this.isCMenu = true;
+        this.pageX = e.changedTouches ? e.changedTouches[0].pageX + 1 : e.pageX + 1;
+        this.pageY = e.changedTouches ? e.changedTouches[0].pageY + 1 : e.pageY + 1;
         this.closeMenu(null, e);
-        if (this.canOpen(e.target)) {
-            if (e.changedTouches) {
-                this.openMenu(null, null, e.changedTouches[0].pageY + 1, e.changedTouches[0].pageX + 1, e);
-            }
-            else {
-                this.openMenu(null, null, e.pageY + 1, e.pageX + 1, e);
+        if (this.isCMenu) {
+            if (this.canOpen(e.target)) {
+                this.openMenu(null, null, this.pageY, this.pageX, e);
             }
+            this.isCMenu = false;
         }
     };
-    MenuBase.prototype.closeMenu = function (ulIndex, e) {
+    // eslint:disable-next-line:max-func-body-length
+    MenuBase.prototype.closeMenu = function (ulIndex, e, isIterated) {
+        var _this = this;
         if (ulIndex === void 0) { ulIndex = 0; }
         if (e === void 0) { e = null; }
         if (this.isMenuVisible()) {
-            var ul = void 0;
             var sli = void 0;
-            var item = void 0;
-            var items = void 0;
-            var closeArgs = void 0;
+            var item_1;
+            var wrapper_1 = this.getWrapper();
             var beforeCloseArgs = void 0;
-            var popupEle = void 0;
-            var popupObj = void 0;
-            var wrapper = this.getWrapper();
+            var items_1;
             var popups = this.getPopups();
-            for (var cnt = this.isMenu ? popups.length + 1 : wrapper.childElementCount; cnt > ulIndex; cnt--) {
-                ul = this.isMenu && cnt !== 1 ? select('.e-ul', popups[cnt - 2])
-                    : selectAll('.e-menu-parent', wrapper)[cnt - 1];
-                if (this.isMenu && ul.classList.contains('e-menu')) {
-                    sli = this.getLIByClass(ul, SELECTED);
-                    if (sli) {
-                        sli.classList.remove(SELECTED);
-                    }
-                    break;
+            var isClose = false;
+            var cnt = this.isMenu ? popups.length + 1 : wrapper_1.childElementCount;
+            var ul_1 = this.isMenu && cnt !== 1 ? select('.e-ul', popups[cnt - 2])
+                : selectAll('.e-menu-parent', wrapper_1)[cnt - 1];
+            if (this.isMenu && ul_1.classList.contains('e-menu')) {
+                sli = this.getLIByClass(ul_1, SELECTED);
+                if (sli) {
+                    sli.classList.remove(SELECTED);
                 }
-                item = this.navIdx.length ? this.getItem(this.navIdx) : null;
-                items = item ? item.items : this.items;
-                beforeCloseArgs = { element: ul, parentItem: item, items: items, event: e, cancel: false };
-                this.trigger('beforeClose', beforeCloseArgs);
-                if (!beforeCloseArgs.cancel) {
-                    if (this.isMenu) {
-                        popupEle = closest(ul, '.' + POPUP);
-                        this.unWireKeyboardEvent(popupEle);
-                        this.destroyScrollObj(getInstance(popupEle.children[0], VScroll), popupEle.children[0]);
-                        popupObj = getInstance(popupEle, Popup);
-                        popupObj.hide();
-                        popupObj.destroy();
-                        detach(popupEle);
+                isClose = true;
+            }
+            if (!isClose) {
+                var liElem_1 = e && e.target && this.getLI(e.target);
+                if (liElem_1) {
+                    this.cli = liElem_1;
+                }
+                else {
+                    this.cli = ul_1.children[0];
+                }
+                item_1 = this.navIdx.length ? this.getItem(this.navIdx) : null;
+                items_1 = item_1 ? item_1.items : this.items;
+                beforeCloseArgs = { element: ul_1, parentItem: item_1, items: items_1, event: e, cancel: false, isFocused: true };
+                this.trigger('beforeClose', beforeCloseArgs, function (observedCloseArgs) {
+                    var popupEle;
+                    var closeArgs;
+                    var popupId = '';
+                    var popupObj;
+                    var isOpen = !observedCloseArgs.cancel;
+                    if (isOpen || _this.isCMenu) {
+                        if (_this.isMenu) {
+                            popupEle = closest(ul_1, '.' + POPUP);
+                            if (_this.hamburgerMode) {
+                                popupEle.parentElement.style.minHeight = '';
+                                closest(ul_1, '.e-menu-item').setAttribute('aria-expanded', 'false');
+                            }
+                            _this.unWireKeyboardEvent(popupEle);
+                            destroyScroll(getInstance(popupEle.children[0], VScroll), popupEle.children[0]);
+                            popupObj = getInstance(popupEle, Popup);
+                            popupObj.hide();
+                            popupId = popupEle.id;
+                            popupObj.destroy();
+                            detach(popupEle);
+                        }
+                        else {
+                            _this.toggleAnimation(ul_1, false);
+                        }
+                        closeArgs = { element: ul_1, parentItem: item_1, items: items_1 };
+                        _this.trigger('onClose', closeArgs);
+                        _this.navIdx.pop();
+                    }
+                    _this.updateReactTemplate();
+                    var trgtliId;
+                    var closedLi;
+                    var trgtLi;
+                    var trgtpopUp = _this.getWrapper() && _this.getUlByNavIdx();
+                    if (_this.isCMenu) {
+                        if (_this.canOpen(e.target)) {
+                            _this.openMenu(null, null, _this.pageY, _this.pageX, e);
+                        }
+                        _this.isCMenu = false;
+                    }
+                    if (_this.isMenu && trgtpopUp && popupId.length) {
+                        // eslint-disable-next-line
+                        trgtliId = new RegExp('(.*)-ej2menu-' + _this.element.id + '-popup').exec(popupId)[1];
+                        closedLi = trgtpopUp.querySelector('[id="' + trgtliId + '"]');
+                        trgtLi = (liElem_1 && trgtpopUp.querySelector('[id="' + liElem_1.id + '"]'));
+                    }
+                    else if (trgtpopUp) {
+                        closedLi = trgtpopUp.querySelector('.e-menu-item.e-selected');
+                        trgtLi = (liElem_1 && trgtpopUp.querySelector('[id="' + liElem_1.id + '"]'));
+                    }
+                    var submenus = liElem_1 && liElem_1.querySelectorAll('.e-menu-item');
+                    if (isOpen && _this.hamburgerMode && ulIndex && !(submenus.length)) {
+                        _this.afterCloseMenu(e);
+                    }
+                    else if (isOpen && !_this.hamburgerMode && closedLi && !trgtLi && _this.keyType !== 'left' && (_this.navIdx.length || !_this.isMenu && _this.navIdx.length === 0)) {
+                        var ele = (e && e.target.classList.contains('e-vscroll'))
+                            ? closest(e.target, '.e-menu-wrapper') : null;
+                        if (ele) {
+                            ele = ele.querySelector('.e-menu-item');
+                            if (_this.showItemOnClick || (ele && _this.getIndex(ele.id, true).length <= _this.navIdx.length)) {
+                                _this.closeMenu(_this.navIdx[_this.navIdx.length - 1], e, true);
+                            }
+                        }
+                        else {
+                            _this.closeMenu(_this.navIdx[_this.navIdx.length - 1], e);
+                        }
+                    }
+                    else if (isOpen && !isIterated && !ulIndex && ((_this.hamburgerMode && _this.navIdx.length) ||
+                        _this.navIdx.length === 1 && liElem_1 && trgtpopUp !== liElem_1.parentElement)) {
+                        _this.closeMenu(null, e);
+                    }
+                    else if (isOpen && isNullOrUndefined(ulIndex) && _this.navIdx.length) {
+                        _this.closeMenu(null, e);
+                    }
+                    else if (isOpen && !_this.isMenu && !ulIndex && _this.navIdx.length === 0 && !_this.isMenusClosed) {
+                        _this.isMenusClosed = true;
+                        _this.closeMenu(0, e);
+                    }
+                    else if (isOpen && _this.isMenu && e && e.target &&
+                        _this.navIdx.length !== 0 && closest(e.target, '.e-menu-parent.e-control')) {
+                        _this.closeMenu(0, e);
+                    }
+                    else if (isOpen && !_this.isMenu && selectAll('.e-menu-parent', wrapper_1)[ulIndex - 1] && e.which === 3) {
+                        _this.closeMenu(null, e);
                     }
                     else {
-                        this.toggleAnimation(ul, false);
+                        if (isOpen && (_this.keyType === 'right' || _this.keyType === 'click')) {
+                            _this.afterCloseMenu(e);
+                        }
+                        else {
+                            var cul = _this.getUlByNavIdx();
+                            var sli_1 = _this.getLIByClass(cul, SELECTED);
+                            if (sli_1) {
+                                sli_1.setAttribute('aria-expanded', 'false');
+                                sli_1.classList.remove(SELECTED);
+                                if (observedCloseArgs.isFocused && liElem_1 || _this.keyType === 'left') {
+                                    sli_1.classList.add(FOCUSED);
+                                    sli_1.focus();
+                                }
+                            }
+                            if (!isOpen && _this.hamburgerMode && liElem_1 && liElem_1.getAttribute('aria-expanded') === 'false' &&
+                                liElem_1.getAttribute('aria-haspopup') === 'true') {
+                                if (closest(liElem_1, '.e-menu-parent.e-control')) {
+                                    _this.navIdx = [];
+                                }
+                                else {
+                                    _this.navIdx.pop();
+                                }
+                                _this.navIdx.push(_this.cliIdx);
+                                var item_2 = _this.getItem(_this.navIdx);
+                                liElem_1.setAttribute('aria-expanded', 'true');
+                                _this.openMenu(liElem_1, item_2, -1, -1, e);
+                            }
+                        }
+                        if (_this.navIdx.length < 1) {
+                            if (_this.showSubMenuOn === 'Hover' || _this.showSubMenuOn === 'Click') {
+                                _this.showItemOnClick = _this.defaultOption;
+                                _this.showSubMenuOn = 'Auto';
+                            }
+                        }
                     }
-                    this.navIdx.length = ulIndex ? ulIndex - 1 : ulIndex;
-                    closeArgs = { element: ul, parentItem: item, items: items };
-                    this.trigger('onClose', closeArgs);
-                }
+                    _this.removeStateWrapper();
+                });
             }
         }
     };
-    MenuBase.prototype.destroyScrollObj = function (scrollObj, scrollEle) {
-        if (scrollObj) {
-            scrollObj.destroy();
-            scrollEle.parentElement.appendChild(select('.e-menu-parent', scrollEle));
-            detach(scrollEle);
+    MenuBase.prototype.updateReactTemplate = function () {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (this.isReact && this.template && this.navIdx.length === 0) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var portals = this.portals.splice(0, this.items.length);
+            this.clearTemplate(['template']);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.portals = portals;
+            this.renderReactTemplates();
         }
     };
+    MenuBase.prototype.getMenuItemModel = function (item, level) {
+        if (isNullOrUndefined(item)) {
+            return null;
+        }
+        if (isNullOrUndefined(level)) {
+            level = 0;
+        }
+        var fields = this.getFields(level);
+        return { text: item[fields.text], id: item[fields.id], items: item[fields.child], separator: item[fields.separator],
+            iconCss: item[fields.iconCss], url: item[fields.url] };
+    };
     MenuBase.prototype.getPopups = function () {
-        return [].slice.call(document.querySelectorAll('.' + POPUP));
+        var _this = this;
+        var popups = [];
+        [].slice.call(document.querySelectorAll('.' + POPUP)).forEach(function (elem) {
+            if (!isNullOrUndefined(elem.querySelector('.' + ITEM)) && _this.getIndex(elem.querySelector('.' + ITEM).id, true).length) {
+                popups.push(elem);
+            }
+        });
+        return popups;
     };
     MenuBase.prototype.isMenuVisible = function () {
         return (this.navIdx.length > 0 || (this.element.classList.contains('e-contextmenu') && isVisible(this.element).valueOf()));
@@ -552,176 +754,344 @@ var MenuBase = /** @class */ (function (_super) {
         if (left === void 0) { left = 0; }
         if (e === void 0) { e = null; }
         if (target === void 0) { target = this.targetElement; }
-        var ul;
-        var popupObj;
-        var popupWrapper;
-        var eventArgs;
         var wrapper = this.getWrapper();
+        this.lItem = li;
+        var elemId = this.element.id !== '' ? this.element.id : 'menu';
+        this.isMenusClosed = false;
+        if (isNullOrUndefined(top)) {
+            top = -1;
+        }
+        if (isNullOrUndefined(left)) {
+            left = -1;
+        }
         if (li) {
-            ul = this.createItems(item[this.getField('children', this.navIdx.length - 1)]);
+            this.uList = this.createItems(item[this.getField('children', this.navIdx.length - 1)]);
             if (!this.isMenu && Browser.isDevice) {
                 wrapper.lastChild.style.display = 'none';
                 var data = {
                     text: item[this.getField('text')].toString(), iconCss: ICONS + ' e-previous'
                 };
-                var hdata = new MenuItem(this.items[0], null, data, true);
+                var hdata = new MenuItem(this.items[0], 'items', data, true);
                 var hli = this.createItems([hdata]).children[0];
                 hli.classList.add(HEADER);
-                ul.insertBefore(hli, ul.children[0]);
+                this.uList.insertBefore(hli, this.uList.children[0]);
             }
             if (this.isMenu) {
-                popupWrapper = this.createElement('div', {
-                    className: 'e-' + this.getModuleName() + '-wrapper ' + POPUP, id: li.id + '-menu-popup'
-                });
-                document.body.appendChild(popupWrapper);
-                var isNestedOrVerticalMenu = this.element.classList.contains('e-vertical') || this.navIdx.length !== 1;
-                popupObj = new Popup(popupWrapper, {
-                    relateTo: li,
-                    collision: { X: isNestedOrVerticalMenu || this.enableRtl ? 'none' : 'flip', Y: 'fit' },
-                    position: isNestedOrVerticalMenu ? { X: 'right', Y: 'top' } : { X: 'left', Y: 'bottom' },
-                    targetType: 'relative',
-                    enableRtl: this.enableRtl,
-                    content: ul,
-                    open: function () {
-                        var scrollEle = select('.e-menu-vscroll', popupObj.element);
-                        if (scrollEle) {
-                            scrollEle.style.height = 'inherit';
-                            scrollEle.style.maxHeight = '';
-                        }
-                        var ul = select('.e-ul', popupObj.element);
-                        popupObj.element.style.maxHeight = '';
-                        ul.focus();
-                        _this.triggerOpen(ul);
-                    }
+                this.popupWrapper = this.createElement('div', {
+                    className: 'e-' + this.getModuleName() + '-wrapper ' + POPUP, id: li.id + '-ej2menu-' + elemId + '-popup'
                 });
-                if (this.cssClass) {
-                    addClass([popupWrapper], this.cssClass.split(' '));
-                }
-                popupObj.hide();
-                eventArgs = this.triggerBeforeOpen(li, ul, item, e, 0, 0);
-                top = eventArgs.top;
-                left = eventArgs.left;
-                popupWrapper.style.display = 'block';
-                popupWrapper.style.maxHeight = popupWrapper.getBoundingClientRect().height + 'px';
-                this.addScrolling(popupWrapper, ul, 'vscroll', popupWrapper.offsetHeight, ul.offsetHeight);
-                this.checkScrollOffset(e);
-                var collide = void 0;
-                if (!left && !top) {
-                    popupObj.refreshPosition(li, true);
-                    left = parseInt(popupWrapper.style.left, 10);
-                    top = parseInt(popupWrapper.style.top, 10);
-                    if (this.enableRtl) {
-                        left = isNestedOrVerticalMenu ? left - popupWrapper.offsetWidth - li.parentElement.offsetWidth
-                            : left - popupWrapper.offsetWidth + li.offsetWidth;
-                    }
-                    collide = isCollide(popupWrapper, null, left, top);
-                    if ((isNestedOrVerticalMenu || this.enableRtl) && (collide.indexOf('right') > -1 || collide.indexOf('left') > -1)) {
-                        popupObj.collision.X = 'none';
-                        left = this.enableRtl ? calculatePosition(li, isNestedOrVerticalMenu ? 'right' : 'left', 'top').left : left -
-                            popupWrapper.offsetWidth - closest(li, '.e-' + this.getModuleName() + '-wrapper').offsetWidth;
-                    }
-                    collide = isCollide(popupWrapper, null, left, top);
-                    if (collide.indexOf('left') > -1 || collide.indexOf('right') > -1) {
-                        left = this.callFit(popupWrapper, true, false, top, left).left;
+                if (this.hamburgerMode) {
+                    top = li.offsetHeight;
+                    li.appendChild(this.popupWrapper);
+                }
+                else {
+                    document.body.appendChild(this.popupWrapper);
+                }
+                this.isNestedOrVertical = this.element.classList.contains('e-vertical') || this.navIdx.length !== 1;
+                this.popupObj = this.generatePopup(this.popupWrapper, this.uList, li, this.isNestedOrVertical);
+                if (this.template) {
+                    this.renderReactTemplates();
+                }
+                if (this.hamburgerMode) {
+                    this.calculateIndentSize(this.uList, li);
+                }
+                else {
+                    if (this.cssClass) {
+                        addClass([this.popupWrapper], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
                     }
-                    popupWrapper.style.left = left + 'px';
+                    this.popupObj.hide();
+                }
+                if (!this.hamburgerMode && !this.showItemOnClick && this.hoverDelay) {
+                    window.clearInterval(this.timer);
+                    this.timer = window.setTimeout(function () { _this.triggerBeforeOpen(li, _this.uList, item, e, 0, 0, 'menu'); }, this.hoverDelay);
                 }
                 else {
-                    popupObj.collision = { X: 'none', Y: 'none' };
+                    this.triggerBeforeOpen(li, this.uList, item, e, 0, 0, 'menu');
                 }
-                popupWrapper.style.display = '';
             }
             else {
-                ul.style.zIndex = this.element.style.zIndex;
-                wrapper.appendChild(ul);
-                eventArgs = this.triggerBeforeOpen(li, ul, item, e, top, left);
-                top = eventArgs.top;
-                left = eventArgs.left;
+                this.uList.style.zIndex = this.element.style.zIndex;
+                wrapper.appendChild(this.uList);
+                if (!this.showItemOnClick && this.hoverDelay) {
+                    window.clearInterval(this.timer);
+                    this.timer = window.setTimeout(function () { _this.triggerBeforeOpen(li, _this.uList, item, e, top, left, 'none'); }, this.hoverDelay);
+                }
+                else {
+                    this.triggerBeforeOpen(li, this.uList, item, e, top, left, 'none');
+                }
             }
         }
         else {
-            ul = this.element;
-            ul.style.zIndex = getZindexPartial(target ? target : this.element).toString();
-            eventArgs = this.triggerBeforeOpen(li, ul, item, e, top, left);
-            top = eventArgs.top;
-            left = eventArgs.left;
+            this.uList = this.element;
+            this.uList.style.zIndex = getZindexPartial(target ? target : this.element).toString();
+            this.triggerBeforeOpen(li, this.uList, item, e, top, left, 'none');
         }
-        if (eventArgs.cancel) {
-            if (this.isMenu) {
-                popupObj.destroy();
-                detach(popupWrapper);
-            }
-            this.navIdx.pop();
+    };
+    MenuBase.prototype.calculateIndentSize = function (ul, li) {
+        var liStyle = getComputedStyle(li);
+        var liIndent = parseInt(liStyle.textIndent, 10);
+        if (this.navIdx.length < 2 && !li.classList.contains('e-blankicon')) {
+            liIndent *= 2;
         }
         else {
-            if (this.isMenu) {
-                this.wireKeyboardEvent(popupWrapper);
-                rippleEffect(popupWrapper, { selector: '.' + ITEM });
-                popupWrapper.style.left = left + 'px';
-                popupWrapper.style.top = top + 'px';
-                var animationOptions = this.animationSettings.effect !== 'None' ? {
-                    name: this.animationSettings.effect, duration: this.animationSettings.duration,
-                    timingFunction: this.animationSettings.easing
-                } : null;
-                popupObj.show(animationOptions, li);
+            liIndent += (liIndent / 4);
+        }
+        ul.style.textIndent = liIndent + 'px';
+        var blankIconElem = ul.querySelectorAll('.e-blankicon');
+        if (blankIconElem && blankIconElem.length) {
+            var menuIconElem = ul.querySelector('.e-menu-icon');
+            var menuIconElemStyle = getComputedStyle(menuIconElem);
+            var blankIconIndent = (parseInt(menuIconElemStyle.marginRight, 10) + menuIconElem.offsetWidth + liIndent);
+            for (var i = 0; i < blankIconElem.length; i++) {
+                blankIconElem[i].style.textIndent = blankIconIndent + 'px';
             }
-            else {
-                this.setPosition(li, ul, top, left);
-                this.toggleAnimation(ul);
+        }
+    };
+    MenuBase.prototype.generatePopup = function (popupWrapper, ul, li, isNestedOrVertical) {
+        var _this = this;
+        var popupObj = new Popup(popupWrapper, {
+            actionOnScroll: this.hamburgerMode ? 'none' : 'reposition',
+            relateTo: li,
+            collision: this.hamburgerMode ? { X: 'none', Y: 'none' } : { X: isNestedOrVertical ||
+                    this.enableRtl ? 'none' : 'flip', Y: 'fit' },
+            position: (isNestedOrVertical && !this.hamburgerMode) ? { X: 'right', Y: 'top' } : { X: 'left', Y: 'bottom' },
+            targetType: 'relative',
+            enableRtl: this.enableRtl,
+            content: ul,
+            open: function () {
+                var scrollEle = select('.e-menu-vscroll', popupObj.element);
+                if (scrollEle) {
+                    scrollEle.style.height = 'inherit';
+                    scrollEle.style.maxHeight = '';
+                }
+                var ul = select('.e-ul', popupObj.element);
+                popupObj.element.style.maxHeight = '';
+                ul.focus();
+                _this.triggerOpen(ul);
             }
+        });
+        return popupObj;
+    };
+    MenuBase.prototype.createHeaderContainer = function (wrapper) {
+        wrapper = wrapper || this.getWrapper();
+        var spanElem = this.createElement('span', { className: 'e-' + this.getModuleName() + '-header' });
+        var tempTitle = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(this.title) : this.title;
+        var spanTitle = this.createElement('span', {
+            className: 'e-' + this.getModuleName() + '-title', innerHTML: tempTitle
+        });
+        var spanIcon = this.createElement('span', {
+            className: 'e-icons e-' + this.getModuleName() + '-icon', attrs: { 'tabindex': '0' }
+        });
+        spanElem.appendChild(spanTitle);
+        spanElem.appendChild(spanIcon);
+        wrapper.insertBefore(spanElem, this.element);
+    };
+    MenuBase.prototype.openHamburgerMenu = function (e) {
+        if (this.hamburgerMode) {
+            this.triggerBeforeOpen(null, this.element, null, e, 0, 0, 'hamburger');
         }
     };
+    MenuBase.prototype.closeHamburgerMenu = function (e) {
+        var _this = this;
+        var beforeCloseArgs = { element: this.element, parentItem: null, event: e,
+            items: this.items, cancel: false };
+        this.trigger('beforeClose', beforeCloseArgs, function (observedHamburgerCloseArgs) {
+            if (!observedHamburgerCloseArgs.cancel) {
+                _this.closeMenu(null, e);
+                _this.element.classList.add('e-hide-menu');
+                _this.trigger('onClose', { element: _this.element, parentItem: null, items: _this.items });
+            }
+        });
+    };
     MenuBase.prototype.callFit = function (element, x, y, top, left) {
         return fit(element, null, { X: x, Y: y }, { top: top, left: left });
     };
-    MenuBase.prototype.triggerBeforeOpen = function (li, ul, item, e, top, left) {
-        var navIdx = this.getIndex(li ? li.id : null, true);
+    MenuBase.prototype.triggerBeforeOpen = function (li, ul, item, e, top, left, type) {
+        var _this = this;
         var items = li ? item[this.getField('children', this.navIdx.length - 1)] : this.items;
         var eventArgs = {
-            element: ul, items: items, parentItem: item, event: e, cancel: false, top: top, left: left
+            element: ul, items: items, parentItem: item, event: e, cancel: false, top: top, left: left, showSubMenuOn: 'Auto'
         };
-        this.trigger('beforeOpen', eventArgs);
-        return eventArgs;
+        var menuType = type;
+        this.trigger('beforeOpen', eventArgs, function (observedOpenArgs) {
+            switch (menuType) {
+                case 'menu':
+                    if (!_this.hamburgerMode) {
+                        if (observedOpenArgs.showSubMenuOn !== 'Auto') {
+                            _this.showItemOnClick = !_this.defaultOption;
+                            _this.showSubMenuOn = observedOpenArgs.showSubMenuOn;
+                        }
+                        _this.top = observedOpenArgs.top;
+                        _this.left = observedOpenArgs.left;
+                    }
+                    _this.popupWrapper.style.display = 'block';
+                    if (!_this.hamburgerMode) {
+                        _this.popupWrapper.style.maxHeight = _this.popupWrapper.getBoundingClientRect().height + 'px';
+                        if (_this.enableScrolling) {
+                            addScrolling(_this.createElement, _this.popupWrapper, _this.uList, 'vscroll', _this.enableRtl);
+                        }
+                        _this.checkScrollOffset(e);
+                    }
+                    if (!_this.hamburgerMode && !_this.left && !_this.top) {
+                        _this.popupObj.refreshPosition(_this.lItem, true);
+                        _this.left = parseInt(_this.popupWrapper.style.left, 10);
+                        _this.top = parseInt(_this.popupWrapper.style.top, 10);
+                        if (_this.enableRtl) {
+                            _this.left =
+                                _this.isNestedOrVertical ? _this.left - _this.popupWrapper.offsetWidth - _this.lItem.parentElement.offsetWidth + 2
+                                    : _this.left - _this.popupWrapper.offsetWidth + _this.lItem.offsetWidth;
+                        }
+                        // eslint-disable-next-line
+                        if (_this.template && (_this.isReact || _this.isAngular)) {
+                            requestAnimationFrame(function () {
+                                _this.collision();
+                                _this.popupWrapper.style.display = '';
+                            });
+                        }
+                        else {
+                            _this.collision();
+                            _this.popupWrapper.style.display = '';
+                        }
+                    }
+                    else {
+                        _this.popupObj.collision = { X: 'none', Y: 'none' };
+                        _this.popupWrapper.style.display = '';
+                    }
+                    break;
+                case 'none':
+                    _this.top = observedOpenArgs.top;
+                    _this.left = observedOpenArgs.left;
+                    break;
+                case 'hamburger':
+                    if (!observedOpenArgs.cancel) {
+                        _this.element.classList.remove('e-hide-menu');
+                        _this.triggerOpen(_this.element);
+                    }
+                    break;
+            }
+            if (menuType !== 'hamburger') {
+                if (observedOpenArgs.cancel) {
+                    if (_this.isMenu) {
+                        _this.popupObj.destroy();
+                        detach(_this.popupWrapper);
+                    }
+                    else if (ul.className.indexOf('e-ul') > -1) {
+                        detach(ul);
+                    }
+                    _this.navIdx.pop();
+                }
+                else {
+                    if (_this.isMenu) {
+                        if (_this.hamburgerMode) {
+                            _this.popupWrapper.style.top = _this.top + 'px';
+                            _this.popupWrapper.style.left = 0 + 'px';
+                            _this.toggleAnimation(_this.popupWrapper);
+                        }
+                        else {
+                            _this.setBlankIconStyle(_this.popupWrapper);
+                            _this.wireKeyboardEvent(_this.popupWrapper);
+                            rippleEffect(_this.popupWrapper, { selector: '.' + ITEM });
+                            _this.popupWrapper.style.left = _this.left + 'px';
+                            _this.popupWrapper.style.top = _this.top + 'px';
+                            var animationOptions = _this.animationSettings.effect !== 'None' ? {
+                                name: _this.animationSettings.effect, duration: _this.animationSettings.duration,
+                                timingFunction: _this.animationSettings.easing
+                            } : null;
+                            _this.popupObj.show(animationOptions, _this.lItem);
+                        }
+                    }
+                    else {
+                        _this.setBlankIconStyle(_this.uList);
+                        _this.setPosition(_this.lItem, _this.uList, _this.top, _this.left);
+                        _this.toggleAnimation(_this.uList);
+                    }
+                }
+            }
+            if (_this.keyType === 'right') {
+                var cul = _this.getUlByNavIdx();
+                li.classList.remove(FOCUSED);
+                if (_this.isMenu && _this.navIdx.length === 1) {
+                    _this.removeLIStateByClass([SELECTED], [_this.getWrapper()]);
+                }
+                li.classList.add(SELECTED);
+                if (_this.action === ENTER) {
+                    var eventArgs_1 = { element: li, item: item, event: e };
+                    _this.trigger('select', eventArgs_1);
+                }
+                li.focus();
+                cul = _this.getUlByNavIdx();
+                var index = _this.isValidLI(cul.children[0], 0, _this.action);
+                cul.children[index].classList.add(FOCUSED);
+                cul.children[index].focus();
+            }
+        });
+    };
+    MenuBase.prototype.collision = function () {
+        var collide;
+        collide = isCollide(this.popupWrapper, null, this.left, this.top);
+        if ((this.isNestedOrVertical || this.enableRtl) && (collide.indexOf('right') > -1
+            || collide.indexOf('left') > -1)) {
+            this.popupObj.collision.X = 'none';
+            var offWidth = closest(this.lItem, '.e-' + this.getModuleName() + '-wrapper').offsetWidth;
+            this.left =
+                this.enableRtl ? calculatePosition(this.lItem, this.isNestedOrVertical ? 'right' : 'left', 'top').left
+                    : this.left - this.popupWrapper.offsetWidth - offWidth + 2;
+        }
+        collide = isCollide(this.popupWrapper, null, this.left, this.top);
+        if (collide.indexOf('left') > -1 || collide.indexOf('right') > -1) {
+            this.left = this.callFit(this.popupWrapper, true, false, this.top, this.left).left;
+        }
+        this.popupWrapper.style.left = this.left + 'px';
+    };
+    MenuBase.prototype.setBlankIconStyle = function (menu) {
+        var blankIconList = [].slice.call(menu.getElementsByClassName('e-blankicon'));
+        if (!blankIconList.length) {
+            return;
+        }
+        var iconLi = menu.querySelector('.e-menu-item:not(.e-blankicon):not(.e-separator)');
+        if (!iconLi) {
+            return;
+        }
+        var icon = iconLi.querySelector('.e-menu-icon');
+        if (!icon) {
+            return;
+        }
+        var cssProp = this.enableRtl ? { padding: 'paddingRight', margin: 'marginLeft' } :
+            { padding: 'paddingLeft', margin: 'marginRight' };
+        var iconCssProps = getComputedStyle(icon);
+        var iconSize = parseInt(iconCssProps.fontSize, 10);
+        if (!!parseInt(iconCssProps.width, 10) && parseInt(iconCssProps.width, 10) > iconSize) {
+            iconSize = parseInt(iconCssProps.width, 10);
+        }
+        // eslint:disable
+        var size = iconSize + parseInt(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        iconCssProps[cssProp.margin], 10) + parseInt(getComputedStyle(iconLi)[cssProp.padding], 10) + "px";
+        blankIconList.forEach(function (li) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            li.style[cssProp.padding] = size;
+        });
+        // eslint:enable
     };
     MenuBase.prototype.checkScrollOffset = function (e) {
         var wrapper = this.getWrapper();
         if (wrapper.children[0].classList.contains('e-menu-hscroll') && this.navIdx.length === 1) {
             var trgt = isNullOrUndefined(e) ? this.element : closest(e.target, '.' + ITEM);
             var offsetEle = select('.e-hscroll-bar', wrapper);
-            var offsetLeft = void 0;
-            var offsetRight = void 0;
             if (offsetEle.scrollLeft > trgt.offsetLeft) {
                 offsetEle.scrollLeft -= (offsetEle.scrollLeft - trgt.offsetLeft);
             }
-            offsetLeft = offsetEle.scrollLeft + offsetEle.offsetWidth;
-            offsetRight = trgt.offsetLeft + trgt.offsetWidth;
+            var offsetLeft = offsetEle.scrollLeft + offsetEle.offsetWidth;
+            var offsetRight = trgt.offsetLeft + trgt.offsetWidth;
             if (offsetLeft < offsetRight) {
                 offsetEle.scrollLeft += (offsetRight - offsetLeft);
             }
         }
     };
-    MenuBase.prototype.addScrolling = function (wrapper, ul, scrollType, wrapperOffset, contentOffset) {
-        if (this.enableScrolling && wrapperOffset < contentOffset) {
-            var scrollEle = this.createElement('div', { className: 'e-menu-' + scrollType });
-            wrapper.appendChild(scrollEle);
-            scrollEle.appendChild(ul);
-            scrollEle.style.maxHeight = wrapper.style.maxHeight;
-            var scrollObj = void 0;
-            wrapper.style.overflow = 'hidden';
-            if (scrollType === 'vscroll') {
-                scrollObj = new VScroll({ enableRtl: this.enableRtl }, scrollEle);
-                scrollObj.scrollStep = select('.e-' + scrollType + '-bar', wrapper).offsetHeight / 2;
-            }
-            else {
-                scrollObj = new HScroll({ enableRtl: this.enableRtl }, scrollEle);
-                scrollObj.scrollStep = select('.e-' + scrollType + '-bar', wrapper).offsetWidth;
-            }
-        }
-    };
     MenuBase.prototype.setPosition = function (li, ul, top, left) {
         var px = 'px';
         this.toggleVisiblity(ul);
-        if (ul === this.element || (!isNullOrUndefined(left) && !isNullOrUndefined(top))) {
+        if (ul === this.element || (left > -1 && top > -1)) {
             var collide = isCollide(ul, null, left, top);
             if (collide.indexOf('right') > -1) {
                 left = left - ul.offsetWidth;
@@ -729,6 +1099,12 @@ var MenuBase = /** @class */ (function (_super) {
             if (collide.indexOf('bottom') > -1) {
                 var offset = this.callFit(ul, false, true, top, left);
                 top = offset.top - 20;
+                if (top < 0) {
+                    var newTop = (pageYOffset + document.documentElement.clientHeight) - ul.getBoundingClientRect().height;
+                    if (newTop > -1) {
+                        top = newTop;
+                    }
+                }
             }
             collide = isCollide(ul, null, left, top);
             if (collide.indexOf('left') > -1) {
@@ -773,30 +1149,34 @@ var MenuBase = /** @class */ (function (_super) {
     MenuBase.prototype.createItems = function (items) {
         var _this = this;
         var level = this.navIdx ? this.navIdx.length : 0;
+        var fields = this.getFields(level);
         var showIcon = this.hasField(items, this.getField('iconCss', level));
-        var id = 'id';
         var listBaseOptions = {
             showIcon: showIcon,
             moduleName: 'menu',
-            fields: this.getFields(level),
+            fields: fields,
             template: this.template,
+            itemNavigable: true,
             itemCreating: function (args) {
-                if (!args.curData[args.fields[id]]) {
-                    args.curData[args.fields[id]] = getUniqueID('menuitem');
-                    _this.clearChanges();
+                if (!args.curData[args.fields[fields.id]]) {
+                    args.curData[args.fields[fields.id]] = getUniqueID('menuitem');
                 }
                 args.curData.htmlAttributes = {
                     role: 'menuitem',
                     tabindex: '-1'
                 };
                 if (_this.isMenu && !args.curData[_this.getField('separator', level)]) {
-                    args.curData.htmlAttributes['aria-label'] = args.curData[args.fields.text];
+                    args.curData.htmlAttributes['aria-label'] = args.curData[args.fields.text] ?
+                        args.curData[args.fields.text] : args.curData[args.fields.id];
+                }
+                if (args.curData[args.fields[fields.iconCss]] === '') {
+                    args.curData[args.fields[fields.iconCss]] = null;
                 }
             },
             itemCreated: function (args) {
                 if (args.curData[_this.getField('separator', level)]) {
                     args.item.classList.add(SEPARATOR);
-                    args.item.removeAttribute('role');
+                    args.item.setAttribute('role', 'separator');
                 }
                 if (showIcon && !args.curData[args.fields.iconCss]
                     && !args.curData[_this.getField('separator', level)]) {
@@ -808,46 +1188,100 @@ var MenuBase = /** @class */ (function (_super) {
                     args.item.appendChild(span);
                     args.item.setAttribute('aria-haspopup', 'true');
                     args.item.setAttribute('aria-expanded', 'false');
-                    if (!_this.isMenu) {
-                        args.item.removeAttribute('role');
-                    }
                     args.item.classList.add('e-menu-caret-icon');
                 }
                 if (_this.isMenu && _this.template) {
                     args.item.setAttribute('id', args.curData[args.fields.id].toString());
                     args.item.removeAttribute('data-uid');
+                    if (args.item.classList.contains('e-level-1')) {
+                        args.item.classList.remove('e-level-1');
+                    }
+                    if (args.item.classList.contains('e-has-child')) {
+                        args.item.classList.remove('e-has-child');
+                    }
+                    args.item.removeAttribute('aria-level');
                 }
                 var eventArgs = { item: args.curData, element: args.item };
                 _this.trigger('beforeItemRender', eventArgs);
             }
         };
-        var ul = ListBase.createList(this.createElement, items, listBaseOptions, !this.template);
+        this.setProperties({ 'items': this.items }, true);
+        if (this.isMenu) {
+            listBaseOptions.templateID = this.element.id + TEMPLATE_PROPERTY;
+        }
+        var ul = ListBase.createList(this.createElement, items, listBaseOptions, !this.template, this);
         ul.setAttribute('tabindex', '0');
         if (this.isMenu) {
             ul.setAttribute('role', 'menu');
         }
+        else {
+            ul.setAttribute('role', 'menubar');
+        }
         return ul;
     };
     MenuBase.prototype.moverHandler = function (e) {
-        var wrapper = this.getWrapper();
         var trgt = e.target;
+        this.liTrgt = trgt;
         var cli = this.getLI(trgt);
-        if (cli && closest(cli, '.e-' + this.getModuleName() + '-wrapper')) {
+        var wrapper = cli ? closest(cli, '.e-' + this.getModuleName() + '-wrapper') : this.getWrapper();
+        var hdrWrapper = this.getWrapper();
+        var regex = new RegExp('-ej2menu-(.*)-popup');
+        var ulId;
+        var isDifferentElem = false;
+        if (!wrapper) {
+            return;
+        }
+        if (wrapper.id !== '') {
+            ulId = regex.exec(wrapper.id)[1];
+        }
+        else {
+            ulId = wrapper.querySelector('ul').id;
+        }
+        if (ulId !== this.element.id) {
+            this.removeLIStateByClass([FOCUSED, SELECTED], [this.getWrapper()]);
+            if (this.navIdx.length) {
+                isDifferentElem = true;
+            }
+            else {
+                return;
+            }
+        }
+        if (cli && closest(cli, '.e-' + this.getModuleName() + '-wrapper') && !isDifferentElem) {
             this.removeLIStateByClass([FOCUSED], this.isMenu ? [wrapper].concat(this.getPopups()) : [wrapper]);
+            this.removeLIStateByClass([FOCUSED], this.isMenu ? [hdrWrapper].concat(this.getPopups()) : [hdrWrapper]);
             cli.classList.add(FOCUSED);
             if (!this.showItemOnClick) {
                 this.clickHandler(e);
             }
         }
+        else if (this.isMenu && this.showItemOnClick && !isDifferentElem) {
+            this.removeLIStateByClass([FOCUSED], [wrapper].concat(this.getPopups()));
+        }
         if (this.isMenu) {
-            if ((trgt.parentElement !== wrapper && !closest(trgt, '.e-' + this.getModuleName() + '-popup')) && !cli) {
-                this.removeLIStateByClass([FOCUSED, SELECTED], [wrapper]);
+            if (!this.showItemOnClick && (trgt.parentElement !== wrapper && !closest(trgt, '.e-' + this.getModuleName() + '-popup'))
+                && (!cli || (cli && !this.getIndex(cli.id, true).length)) && this.showSubMenuOn !== 'Hover') {
+                this.removeLIStateByClass([FOCUSED], [wrapper]);
+                if (this.navIdx.length) {
+                    this.isClosed = true;
+                    this.closeMenu(null, e);
+                }
+            }
+            else if (isDifferentElem && !this.showItemOnClick) {
                 if (this.navIdx.length) {
+                    this.isClosed = true;
                     this.closeMenu(null, e);
                 }
             }
-            wrapper = closest(trgt, '.e-menu-vscroll');
-            if (trgt.tagName === 'DIV' && wrapper) {
+            if (!this.isClosed) {
+                this.removeStateWrapper();
+            }
+            this.isClosed = false;
+        }
+    };
+    MenuBase.prototype.removeStateWrapper = function () {
+        if (this.liTrgt) {
+            var wrapper = closest(this.liTrgt, '.e-menu-vscroll');
+            if (this.liTrgt.tagName === 'DIV' && wrapper) {
                 this.removeLIStateByClass([FOCUSED, SELECTED], [wrapper]);
             }
         }
@@ -868,7 +1302,7 @@ var MenuBase = /** @class */ (function (_super) {
     };
     MenuBase.prototype.getField = function (propName, level) {
         if (level === void 0) { level = 0; }
-        var fieldName = this.fields[propName];
+        var fieldName = this.fields["" + propName];
         return typeof fieldName === 'string' ? fieldName :
             (!fieldName[level] ? fieldName[fieldName.length - 1].toString()
                 : fieldName[level].toString());
@@ -886,12 +1320,23 @@ var MenuBase = /** @class */ (function (_super) {
     };
     MenuBase.prototype.hasField = function (items, field) {
         for (var i = 0, len = items.length; i < len; i++) {
-            if (items[i][field]) {
+            if (items[i]["" + field]) {
                 return true;
             }
         }
         return false;
     };
+    MenuBase.prototype.menuHeaderClickHandler = function (e) {
+        if (closest(e.target, '.e-menu-wrapper').querySelector('ul.e-menu-parent').id !== this.element.id) {
+            return;
+        }
+        if (this.element.className.indexOf('e-hide-menu') > -1) {
+            this.openHamburgerMenu(e);
+        }
+        else {
+            this.closeHamburgerMenu(e);
+        }
+    };
     MenuBase.prototype.clickHandler = function (e) {
         if (this.isTapHold) {
             this.isTapHold = false;
@@ -899,15 +1344,26 @@ var MenuBase = /** @class */ (function (_super) {
         else {
             var wrapper = this.getWrapper();
             var trgt = e.target;
-            var cli = this.getLI(trgt);
+            var cli = this.cli = this.getLI(trgt);
+            var regex = new RegExp('-ej2menu-(.*)-popup');
             var cliWrapper = cli ? closest(cli, '.e-' + this.getModuleName() + '-wrapper') : null;
             var isInstLI = cli && cliWrapper && (this.isMenu ? this.getIndex(cli.id, true).length > 0
                 : wrapper.firstElementChild.id === cliWrapper.firstElementChild.id);
+            if (Browser.isDevice && this.isMenu) {
+                this.removeLIStateByClass([FOCUSED], [wrapper].concat(this.getPopups()));
+                this.mouseDownHandler(e);
+            }
+            if (cli && cliWrapper && this.isMenu) {
+                var cliWrapperId = cliWrapper.id ? regex.exec(cliWrapper.id)[1] : cliWrapper.querySelector('.e-menu-parent').id;
+                if (this.element.id !== cliWrapperId) {
+                    return;
+                }
+            }
             if (isInstLI && e.type === 'click' && !cli.classList.contains(HEADER)) {
                 this.setLISelected(cli);
                 var navIdx = this.getIndex(cli.id, true);
                 var item = this.getItem(navIdx);
-                var eventArgs = { element: cli, item: item };
+                var eventArgs = { element: cli, item: item, event: e };
                 this.trigger('select', eventArgs);
             }
             if (isInstLI && (e.type === 'mouseover' || Browser.isDevice || this.showItemOnClick)) {
@@ -924,41 +1380,35 @@ var MenuBase = /** @class */ (function (_super) {
                 }
                 else {
                     if (!cli.classList.contains(SEPARATOR)) {
-                        var showSubMenu = true;
+                        this.showSubMenu = true;
                         var cul = cli.parentNode;
-                        var cliIdx = this.getIdx(cul, cli);
+                        this.cliIdx = this.getIdx(cul, cli);
                         if (this.isMenu || !Browser.isDevice) {
                             var culIdx = this.isMenu ? Array.prototype.indexOf.call([wrapper].concat(this.getPopups()), closest(cul, '.' + 'e-' + this.getModuleName() + '-wrapper'))
                                 : this.getIdx(wrapper, cul);
-                            if (this.navIdx[culIdx] === cliIdx) {
-                                showSubMenu = false;
+                            if (this.navIdx[culIdx] === this.cliIdx) {
+                                this.showSubMenu = false;
                             }
-                            if (culIdx !== this.navIdx.length && (e.type !== 'mouseover' || showSubMenu)) {
+                            if (culIdx !== this.navIdx.length && (e.type !== 'mouseover' || this.showSubMenu)) {
                                 var sli = this.getLIByClass(cul, SELECTED);
                                 if (sli) {
                                     sli.classList.remove(SELECTED);
                                 }
-                                this.closeMenu(culIdx + 1, e);
-                            }
-                        }
-                        if (showSubMenu) {
-                            var idx = this.navIdx.concat(cliIdx);
-                            var item = this.getItem(idx);
-                            if (item[this.getField('children', idx.length - 1)] &&
-                                item[this.getField('children', idx.length - 1)].length) {
-                                if (e.type === 'mouseover' || (Browser.isDevice && this.isMenu)) {
+                                this.isClosed = true;
+                                this.keyType = 'click';
+                                if (this.showItemOnClick) {
                                     this.setLISelected(cli);
                                 }
-                                cli.setAttribute('aria-expanded', 'true');
-                                this.navIdx.push(cliIdx);
-                                this.openMenu(cli, item, null, null, e);
-                            }
-                            else {
-                                if (e.type !== 'mouseover') {
-                                    this.closeMenu(null, e);
+                                this.closeMenu(culIdx + 1, e);
+                                if (this.showItemOnClick) {
+                                    this.setLISelected(cli);
                                 }
                             }
                         }
+                        if (!this.isClosed) {
+                            this.afterCloseMenu(e);
+                        }
+                        this.isClosed = false;
                     }
                 }
             }
@@ -968,11 +1418,21 @@ var MenuBase = /** @class */ (function (_super) {
                     var cIdx = Array.prototype.indexOf.call(this.getPopups(), popupEle) + 1;
                     if (cIdx < this.navIdx.length) {
                         this.closeMenu(cIdx + 1, e);
-                        this.removeLIStateByClass([FOCUSED, SELECTED], [popupEle]);
+                        if (popupEle) {
+                            this.removeLIStateByClass([FOCUSED, SELECTED], [popupEle]);
+                        }
                     }
                 }
+                else if (this.isMenu && this.hamburgerMode && trgt.tagName === 'SPAN'
+                    && trgt.classList.contains('e-menu-icon')) {
+                    this.menuHeaderClickHandler(e);
+                }
                 else {
-                    if (trgt.tagName !== 'UL' || trgt.parentElement !== wrapper) {
+                    if (trgt.tagName !== 'UL' || (this.isMenu ? trgt.parentElement.classList.contains('e-menu-wrapper') &&
+                        !this.getIndex(trgt.querySelector('.' + ITEM).id, true).length : trgt.parentElement !== wrapper)) {
+                        if (!cli) {
+                            this.removeLIStateByClass([SELECTED], [wrapper]);
+                        }
                         if (!cli || !cli.querySelector('.' + CARET)) {
                             this.closeMenu(null, e);
                         }
@@ -981,6 +1441,44 @@ var MenuBase = /** @class */ (function (_super) {
             }
         }
     };
+    MenuBase.prototype.afterCloseMenu = function (e) {
+        var isHeader;
+        if (this.showSubMenu) {
+            if (this.showItemOnClick && this.navIdx.length === 0) {
+                isHeader = closest(e.target, '.e-menu-parent.e-control');
+            }
+            else {
+                isHeader = closest(this.element, '.e-menu-parent.e-control');
+            }
+            var idx = this.navIdx.concat(this.cliIdx);
+            var item = this.getItem(idx);
+            if (item && item[this.getField('children', idx.length - 1)] &&
+                item[this.getField('children', idx.length - 1)].length) {
+                if (e.type === 'mouseover' || (Browser.isDevice && this.isMenu)) {
+                    this.setLISelected(this.cli);
+                }
+                if ((!this.hamburgerMode && isHeader) || (this.hamburgerMode && this.cli.getAttribute('aria-expanded') === 'false')) {
+                    this.cli.setAttribute('aria-expanded', 'true');
+                    this.navIdx.push(this.cliIdx);
+                    this.openMenu(this.cli, item, null, null, e);
+                }
+            }
+            else {
+                if (e.type !== 'mouseover') {
+                    this.closeMenu(null, e);
+                }
+            }
+            if (!isHeader) {
+                var cul = this.getUlByNavIdx();
+                var sli = this.getLIByClass(cul, SELECTED);
+                if (sli) {
+                    sli.setAttribute('aria-expanded', 'false');
+                    sli.classList.remove(SELECTED);
+                }
+            }
+        }
+        this.keyType = '';
+    };
     MenuBase.prototype.setLISelected = function (li) {
         var sli = this.getLIByClass(li.parentElement, SELECTED);
         if (sli) {
@@ -999,6 +1497,45 @@ var MenuBase = /** @class */ (function (_super) {
         }
         return null;
     };
+    /**
+     * This method is used to get the index of the menu item in the Menu based on the argument.
+     *
+     * @param {MenuItem | string} item - item be passed to get the index | id to be passed to get the item index.
+     * @param {boolean} isUniqueId - Set `true` if it is a unique id.
+     * @returns {void}
+     */
+    MenuBase.prototype.getItemIndex = function (item, isUniqueId) {
+        var idx;
+        if (typeof item === 'string') {
+            idx = item;
+        }
+        else {
+            idx = item.id;
+        }
+        var isText = (isUniqueId === false) ? false : true;
+        var navIdx = this.getIndex(idx, isText);
+        return navIdx;
+    };
+    /**
+     * This method is used to set the menu item in the Menu based on the argument.
+     *
+     * @param {MenuItem} item - item need to be updated.
+     * @param {string} id - id / text to be passed to update the item.
+     * @param {boolean} isUniqueId - Set `true` if it is a unique id.
+     * @returns {void}
+     */
+    MenuBase.prototype.setItem = function (item, id, isUniqueId) {
+        var idx;
+        if (isUniqueId) {
+            idx = id ? id : item.id;
+        }
+        else {
+            idx = id ? id : item.text;
+        }
+        var navIdx = this.getIndex(idx, isUniqueId);
+        var newItem = this.getItem(navIdx);
+        Object.assign(newItem, item);
+    };
     MenuBase.prototype.getItem = function (navIdx) {
         navIdx = navIdx.slice();
         var idx = navIdx.pop();
@@ -1012,6 +1549,13 @@ var MenuBase = /** @class */ (function (_super) {
         }
         return items;
     };
+    MenuBase.prototype.setItems = function (newItems, navIdx) {
+        var items = this.getItems(navIdx);
+        items.splice(0, items.length);
+        for (var i = 0; i < newItems.length; i++) {
+            items.splice(i, 0, newItems[i]);
+        }
+    };
     MenuBase.prototype.getIdx = function (ul, li, skipHdr) {
         if (skipHdr === void 0) { skipHdr = true; }
         var idx = Array.prototype.indexOf.call(ul.children, li);
@@ -1026,12 +1570,35 @@ var MenuBase = /** @class */ (function (_super) {
         }
         return closest(elem, 'li.e-menu-item');
     };
+    MenuBase.prototype.updateItemsByNavIdx = function () {
+        var items = this.items;
+        var count = 0;
+        for (var index = 0; index < this.navIdx.length; index++) {
+            items = items[index].items;
+            if (!items) {
+                break;
+            }
+            count++;
+            var ul = this.getUlByNavIdx(count);
+            if (!ul) {
+                break;
+            }
+            this.updateItem(ul, items);
+        }
+    };
+    MenuBase.prototype.removeChildElement = function (elem) {
+        while (elem.firstElementChild) {
+            elem.removeChild(elem.firstElementChild);
+        }
+        return elem;
+    };
     /**
-     * Called internally if any of the property value changed
+     * Called internally if any of the property value changed.
+     *
      * @private
-     * @param {MenuBaseModel} newProp
-     * @param {MenuBaseModel} oldProp
-     * @returns void
+     * @param {MenuBaseModel} newProp - Specifies the new properties
+     * @param {MenuBaseModel} oldProp - Specifies the old properties
+     * @returns {void}
      */
     MenuBase.prototype.onPropertyChanged = function (newProp, oldProp) {
         var _this = this;
@@ -1043,7 +1610,7 @@ var MenuBase = /** @class */ (function (_super) {
                         removeClass([wrapper], oldProp.cssClass.split(' '));
                     }
                     if (newProp.cssClass) {
-                        addClass([wrapper], newProp.cssClass.split(' '));
+                        addClass([wrapper], newProp.cssClass.replace(/\s+/g, ' ').trim().split(' '));
                     }
                     break;
                 case 'enableRtl':
@@ -1056,41 +1623,57 @@ var MenuBase = /** @class */ (function (_super) {
                     break;
                 case 'enableScrolling':
                     if (newProp.enableScrolling) {
-                        var ul_1;
-                        this_1.element.classList.contains('e-vertical') ?
-                            this_1.addScrolling(wrapper, this_1.element, 'vscroll', wrapper.offsetHeight, this_1.element.offsetHeight)
-                            : this_1.addScrolling(wrapper, this_1.element, 'hscroll', wrapper.offsetWidth, this_1.element.offsetWidth);
+                        var ul_2;
+                        if (this_1.element.classList.contains('e-vertical')) {
+                            addScrolling(this_1.createElement, wrapper, this_1.element, 'vscroll', this_1.enableRtl);
+                        }
+                        else {
+                            addScrolling(this_1.createElement, wrapper, this_1.element, 'hscroll', this_1.enableRtl);
+                        }
                         this_1.getPopups().forEach(function (wrapper) {
-                            ul_1 = select('.e-ul', wrapper);
-                            _this.addScrolling(wrapper, ul_1, 'vscroll', wrapper.offsetHeight, ul_1.offsetHeight);
+                            ul_2 = select('.e-ul', wrapper);
+                            addScrolling(_this.createElement, wrapper, ul_2, 'vscroll', _this.enableRtl);
                         });
                     }
                     else {
-                        var ul_2 = wrapper.children[0];
-                        this_1.element.classList.contains('e-vertical') ? this_1.destroyScrollObj(getInstance(ul_2, VScroll), ul_2)
-                            : this_1.destroyScrollObj(getInstance(ul_2, HScroll), ul_2);
+                        var ul_3 = wrapper.children[0];
+                        if (this_1.element.classList.contains('e-vertical')) {
+                            destroyScroll(getInstance(ul_3, VScroll), ul_3);
+                        }
+                        else {
+                            destroyScroll(getInstance(ul_3, HScroll), ul_3);
+                        }
                         wrapper.style.overflow = '';
                         wrapper.appendChild(this_1.element);
                         this_1.getPopups().forEach(function (wrapper) {
-                            ul_2 = wrapper.children[0];
-                            _this.destroyScrollObj(getInstance(ul_2, VScroll), ul_2);
+                            ul_3 = wrapper.children[0];
+                            destroyScroll(getInstance(ul_3, VScroll), ul_3);
                             wrapper.style.overflow = '';
                         });
                     }
                     break;
-                case 'items':
+                case 'items': {
                     var idx = void 0;
                     var navIdx = void 0;
                     var item = void 0;
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    if (this_1.isReact && this_1.template) {
+                        this_1.clearTemplate(['template']);
+                    }
                     if (!Object.keys(oldProp.items).length) {
-                        var ul_3 = this_1.element;
-                        ul_3.innerHTML = '';
-                        var lis = [].slice.call(this_1.createItems(newProp.items).children);
-                        lis.forEach(function (li) {
-                            ul_3.appendChild(li);
-                        });
-                        for (var i = 1, count = wrapper.childElementCount; i < count; i++) {
-                            detach(wrapper.lastElementChild);
+                        this_1.updateItem(this_1.element, this_1.items);
+                        if (this_1.enableScrolling && this_1.element.parentElement.classList.contains('e-custom-scroll')) {
+                            if (this_1.element.classList.contains('e-vertical')) {
+                                addScrolling(this_1.createElement, wrapper, this_1.element, 'vscroll', this_1.enableRtl);
+                            }
+                            else {
+                                addScrolling(this_1.createElement, wrapper, this_1.element, 'hscroll', this_1.enableRtl);
+                            }
+                        }
+                        if (!this_1.hamburgerMode) {
+                            for (var i = 1, count = wrapper.childElementCount; i < count; i++) {
+                                detach(wrapper.lastElementChild);
+                            }
                         }
                         this_1.navIdx = [];
                     }
@@ -1103,11 +1686,13 @@ var MenuBase = /** @class */ (function (_super) {
                                 item = this_1.getItems(navIdx);
                                 this_1.insertAfter([item[idx]], item[idx].text);
                                 this_1.removeItem(item, navIdx, idx);
+                                this_1.setItems(item, navIdx);
                             }
                             navIdx.length = 0;
                         }
                     }
                     break;
+                }
             }
         };
         var this_1 = this;
@@ -1116,12 +1701,37 @@ var MenuBase = /** @class */ (function (_super) {
             _loop_2(prop);
         }
     };
+    MenuBase.prototype.updateItem = function (ul, items) {
+        if (isBlazor() && !this.isMenu) {
+            ul = this.removeChildElement(ul);
+        }
+        else {
+            if (this.enableScrolling) {
+                var wrapper1 = this.getWrapper();
+                var ul1 = wrapper1.children[0];
+                if (this.element.classList.contains('e-vertical')) {
+                    destroyScroll(getInstance(ul1, VScroll), ul1);
+                }
+                else {
+                    destroyScroll(getInstance(ul1, HScroll), ul1);
+                }
+            }
+            ul.innerHTML = '';
+        }
+        var lis = [].slice.call(this.createItems(items).children);
+        lis.forEach(function (li) {
+            ul.appendChild(li);
+        });
+    };
     MenuBase.prototype.getChangedItemIndex = function (newProp, index, idx) {
         index.push(idx);
         var key = Object.keys(newProp.items[idx]).pop();
         if (key === 'items') {
             var item = newProp.items[idx];
-            this.getChangedItemIndex(item, index, Number(Object.keys(item.items).pop()));
+            var popStr = Object.keys(item.items).pop();
+            if (popStr) {
+                this.getChangedItemIndex(item, index, Number(popStr));
+            }
         }
         else {
             if (key === 'isParentArray' && index.length > 1) {
@@ -1139,29 +1749,41 @@ var MenuBase = /** @class */ (function (_super) {
     };
     /**
      * Used to unwire the bind events.
+     *
      * @private
+     * @param {string} targetSelctor - Specifies the target selector
+     * @returns {void}
      */
-    MenuBase.prototype.unWireEvents = function () {
+    MenuBase.prototype.unWireEvents = function (targetSelctor) {
+        if (targetSelctor === void 0) { targetSelctor = this.target; }
         var wrapper = this.getWrapper();
-        if (this.target) {
+        if (targetSelctor) {
             var target = void 0;
             var touchModule = void 0;
-            var targetElems = selectAll(this.target);
+            var targetElems = selectAll(targetSelctor);
             for (var i = 0, len = targetElems.length; i < len; i++) {
                 target = targetElems[i];
-                if (Browser.isIos) {
-                    touchModule = getInstance(target, Touch);
-                    if (touchModule) {
-                        touchModule.destroy();
-                    }
+                if (this.isMenu) {
+                    EventHandler.remove(target, 'click', this.menuHeaderClickHandler);
                 }
                 else {
-                    EventHandler.remove(target, 'contextmenu', this.cmenuHandler);
+                    if (Browser.isIos) {
+                        touchModule = getInstance(target, Touch);
+                        if (touchModule) {
+                            touchModule.destroy();
+                        }
+                    }
+                    else {
+                        EventHandler.remove(target, 'contextmenu', this.cmenuHandler);
+                    }
                 }
             }
-            for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
-                var parent_2 = _a[_i];
-                EventHandler.remove(parent_2, 'scroll', this.scrollHandler);
+            if (!this.isMenu) {
+                EventHandler.remove(this.targetElement, 'scroll', this.scrollHandler);
+                for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
+                    var parent_2 = _a[_i];
+                    EventHandler.remove(parent_2, 'scroll', this.scrollHandler);
+                }
             }
         }
         if (!Browser.isDevice) {
@@ -1181,6 +1803,8 @@ var MenuBase = /** @class */ (function (_super) {
     MenuBase.prototype.toggleAnimation = function (ul, isMenuOpen) {
         var _this = this;
         if (isMenuOpen === void 0) { isMenuOpen = true; }
+        var pUlHeight;
+        var pElement;
         if (this.animationSettings.effect === 'None' || !isMenuOpen) {
             this.end(ul, isMenuOpen);
         }
@@ -1190,11 +1814,35 @@ var MenuBase = /** @class */ (function (_super) {
                 duration: this.animationSettings.duration,
                 timingFunction: this.animationSettings.easing,
                 begin: function (options) {
-                    options.element.style.display = 'block';
-                    options.element.style.maxHeight = options.element.getBoundingClientRect().height + 'px';
+                    if (_this.hamburgerMode) {
+                        pElement = options.element.parentElement;
+                        options.element.style.position = 'absolute';
+                        pUlHeight = pElement.offsetHeight;
+                        options.element.style.maxHeight = options.element.offsetHeight + 'px';
+                        pElement.style.maxHeight = '';
+                    }
+                    else {
+                        options.element.style.display = 'block';
+                        options.element.style.maxHeight = options.element.getBoundingClientRect().height + 'px';
+                    }
+                },
+                progress: function (options) {
+                    if (_this.hamburgerMode) {
+                        pElement.style.minHeight = (pUlHeight + options.element.offsetHeight) + 'px';
+                    }
                 },
                 end: function (options) {
-                    _this.end(options.element, isMenuOpen);
+                    if (_this.hamburgerMode) {
+                        options.element.style.position = '';
+                        options.element.style.maxHeight = '';
+                        pElement.style.minHeight = '';
+                        options.element.style.top = 0 + 'px';
+                        options.element.children[0].focus();
+                        _this.triggerOpen(options.element.children[0]);
+                    }
+                    else {
+                        _this.end(options.element, isMenuOpen);
+                    }
                 }
             });
         }
@@ -1215,13 +1863,24 @@ var MenuBase = /** @class */ (function (_super) {
                 ul.querySelector('.' + FOCUSED).focus();
             }
             else {
-                var ele = void 0;
-                ele = this.getWrapper().children[this.getIdx(this.getWrapper(), ul) - 1];
-                if (ele) {
-                    ele.querySelector('.' + SELECTED).focus();
+                var ele = this.getWrapper().children[this.getIdx(this.getWrapper(), ul) - 1];
+                if (this.currentTarget) {
+                    if (!(this.currentTarget.classList.contains('e-numerictextbox') || this.currentTarget.classList.contains('e-textbox') || this.currentTarget.tagName === 'INPUT')) {
+                        if (ele) {
+                            ele.querySelector('.' + SELECTED).focus();
+                        }
+                        else {
+                            this.element.focus();
+                        }
+                    }
                 }
                 else {
-                    this.element.focus();
+                    if (ele) {
+                        ele.querySelector('.' + SELECTED).focus();
+                    }
+                    else {
+                        this.element.focus();
+                    }
                 }
             }
         }
@@ -1244,14 +1903,16 @@ var MenuBase = /** @class */ (function (_super) {
     };
     /**
      * Get the properties to be maintained in the persisted state.
-     * @returns string
+     *
+     * @returns {string} - Persist data
      */
     MenuBase.prototype.getPersistData = function () {
         return '';
     };
     /**
      * Get wrapper element.
-     * @returns Element
+     *
+     * @returns {Element} - Wrapper element
      * @private
      */
     MenuBase.prototype.getWrapper = function () {
@@ -1293,10 +1954,11 @@ var MenuBase = /** @class */ (function (_super) {
     };
     /**
      * This method is used to enable or disable the menu items in the Menu based on the items and enable argument.
-     * @param items Text items that needs to be enabled/disabled.
-     * @param enable Set `true`/`false` to enable/disable the list items.
-     * @param isUniqueId - Set `true` if it is a unique id.
-     * @returns void
+     *
+     * @param {string[]} items - Text items that needs to be enabled/disabled.
+     * @param {boolean} enable - Set `true`/`false` to enable/disable the list items.
+     * @param {boolean} isUniqueId - Set `true` if it is a unique id.
+     * @returns {void}
      */
     MenuBase.prototype.enableItems = function (items, enable, isUniqueId) {
         if (enable === void 0) { enable = true; }
@@ -1304,8 +1966,28 @@ var MenuBase = /** @class */ (function (_super) {
         var idx;
         var navIdx;
         var disabled = DISABLED;
+        var skipItem;
         for (var i = 0; i < items.length; i++) {
             navIdx = this.getIndex(items[i], isUniqueId);
+            if (this.navIdx.length) {
+                if (navIdx.length !== 1) {
+                    skipItem = false;
+                    for (var i_1 = 0, len = navIdx.length - 1; i_1 < len; i_1++) {
+                        if (navIdx[i_1] !== this.navIdx[i_1]) {
+                            skipItem = true;
+                            break;
+                        }
+                    }
+                    if (skipItem) {
+                        continue;
+                    }
+                }
+            }
+            else {
+                if (navIdx.length !== 1) {
+                    continue;
+                }
+            }
             idx = navIdx.pop();
             ul = this.getUlByNavIdx(navIdx.length);
             if (ul) {
@@ -1342,17 +2024,20 @@ var MenuBase = /** @class */ (function (_super) {
     };
     /**
      * This method is used to show the menu items in the Menu based on the items text.
-     * @param items Text items that needs to be shown.
-     * @param isUniqueId - Set `true` if it is a unique id.
-     * @returns void
+     *
+     * @param {string[]} items - Text items that needs to be shown.
+     * @param {boolean} isUniqueId - Set `true` if it is a unique id.
+     * @returns {void}
      */
     MenuBase.prototype.showItems = function (items, isUniqueId) {
         this.showHideItems(items, false, isUniqueId);
     };
     /**
      * This method is used to hide the menu items in the Menu based on the items text.
-     * @param items Text items that needs to be hidden.
-     * @returns void
+     *
+     * @param {string[]} items - Text items that needs to be hidden.
+     * @param {boolean} isUniqueId - Set `true` if it is a unique id.
+     * @returns {void}
      */
     MenuBase.prototype.hideItems = function (items, isUniqueId) {
         this.showHideItems(items, true, isUniqueId);
@@ -1387,8 +2072,10 @@ var MenuBase = /** @class */ (function (_super) {
     };
     /**
      * It is used to remove the menu items from the Menu based on the items text.
-     * @param items Text items that needs to be removed.
-     * @returns void
+     *
+     * @param {string[]} items Text items that needs to be removed.
+     * @param {boolean} isUniqueId - Set `true` if it is a unique id.
+     * @returns {void}
      */
     MenuBase.prototype.removeItems = function (items, isUniqueId) {
         var idx;
@@ -1398,24 +2085,29 @@ var MenuBase = /** @class */ (function (_super) {
             navIdx = this.getIndex(items[i], isUniqueId);
             idx = navIdx.pop();
             iitems = this.getItems(navIdx);
-            this.removeItem(iitems, navIdx, idx);
+            if (!isNullOrUndefined(idx)) {
+                this.removeItem(iitems, navIdx, idx);
+            }
         }
     };
     /**
      * It is used to insert the menu items after the specified menu item text.
-     * @param items Items that needs to be inserted.
-     * @param text Text item after that the element to be inserted.
-     * @returns void
+     *
+     * @param {MenuItemModel[]} items - Items that needs to be inserted.
+     * @param {string} text - Text item after that the element to be inserted.
+     * @param {boolean} isUniqueId - Set `true` if it is a unique id.
+     * @returns {void}
      */
     MenuBase.prototype.insertAfter = function (items, text, isUniqueId) {
         this.insertItems(items, text, isUniqueId);
     };
     /**
      * It is used to insert the menu items before the specified menu item text.
-     * @param items Items that needs to be inserted.
-     * @param text Text item before that the element to be inserted.
-     * @param isUniqueId - Set `true` if it is a unique id.
-     * @returns void
+     *
+     * @param {MenuItemModel[]} items - Items that needs to be inserted.
+     * @param {string} text - Text item before that the element to be inserted.
+     * @param  {boolean} isUniqueId - Set `true` if it is a unique id.
+     * @returns {void}
      */
     MenuBase.prototype.insertBefore = function (items, text, isUniqueId) {
         this.insertItems(items, text, isUniqueId, false);
@@ -1427,7 +2119,6 @@ var MenuBase = /** @class */ (function (_super) {
         var navIdx;
         var iitems;
         var menuitem;
-        var showIcon;
         for (var i = 0; i < items.length; i++) {
             navIdx = this.getIndex(text, isUniqueId);
             idx = navIdx.pop();
@@ -1435,48 +2126,84 @@ var MenuBase = /** @class */ (function (_super) {
             menuitem = new MenuItem(iitems[0], 'items', items[i], true);
             iitems.splice(isAfter ? idx + 1 : idx, 0, menuitem);
             var uls = this.isMenu ? [this.getWrapper()].concat(this.getPopups()) : [].slice.call(this.getWrapper().children);
-            if (navIdx.length < uls.length) {
+            if (!isNullOrUndefined(idx) && navIdx.length < uls.length) {
                 idx = isAfter ? idx + 1 : idx;
-                showIcon = this.hasField(iitems, this.getField('iconCss', navIdx.length - 1));
                 li = this.createItems(iitems).children[idx];
                 var ul = this.isMenu ? select('.e-menu-parent', uls[navIdx.length]) : uls[navIdx.length];
                 ul.insertBefore(li, ul.children[idx]);
             }
         }
     };
+    MenuBase.prototype.removeAttributes = function () {
+        var _this = this;
+        ['top', 'left', 'display', 'z-index'].forEach(function (key) {
+            _this.element.style.removeProperty(key);
+        });
+        ['role', 'tabindex', 'class', 'style'].forEach(function (key) {
+            if (key === 'class' && _this.element.classList.contains('e-menu-parent')) {
+                _this.element.classList.remove('e-menu-parent');
+            }
+            if (['class', 'style'].indexOf(key) === -1 || !_this.element.getAttribute(key)) {
+                _this.element.removeAttribute(key);
+            }
+            if (_this.isMenu && key === 'class' && _this.element.classList.contains('e-vertical')) {
+                _this.element.classList.remove('e-vertical');
+            }
+        });
+    };
     /**
      * Destroys the widget.
-     * @returns void
+     *
+     * @returns {void}
      */
     MenuBase.prototype.destroy = function () {
-        var _this = this;
         var wrapper = this.getWrapper();
         if (wrapper) {
-            _super.prototype.destroy.call(this);
             this.unWireEvents();
-            if (this.ngElement && !this.isMenu) {
-                this.ngElement.style.display = 'block';
+            if (!this.isMenu) {
+                this.clonedElement.style.display = '';
+                if (this.clonedElement.tagName === 'EJS-CONTEXTMENU') {
+                    addClass([this.clonedElement], ['e-control', 'e-lib', 'e-' + this.getModuleName()]);
+                    this.element = this.clonedElement;
+                }
+                else {
+                    if (this.refreshing && this.clonedElement.childElementCount && this.clonedElement.children[0].tagName === 'LI') {
+                        this.setProperties({ 'items': [] }, true);
+                    }
+                    if (document.getElementById(this.clonedElement.id)) {
+                        var refEle = this.clonedElement.nextElementSibling;
+                        if (refEle && refEle !== wrapper) {
+                            this.clonedElement.parentElement.insertBefore(this.element, refEle);
+                        }
+                        else {
+                            this.clonedElement.parentElement.appendChild(this.element);
+                        }
+                        if (isBlazor() && !this.isMenu) {
+                            this.element = this.removeChildElement(this.element);
+                        }
+                        else {
+                            this.element.innerHTML = '';
+                        }
+                        append([].slice.call(this.clonedElement.children), this.element);
+                        detach(this.clonedElement);
+                        this.removeAttributes();
+                    }
+                }
+                this.clonedElement = null;
             }
             else {
                 this.closeMenu();
-                this.element.innerHTML = '';
-                ['top', 'left', 'display', 'z-index'].forEach(function (key) {
-                    _this.element.style.removeProperty(key);
-                });
-                ['role', 'tabindex', 'class', 'style'].forEach(function (key) {
-                    if (key === 'class' && _this.element.classList.contains('e-menu-parent')) {
-                        _this.element.classList.remove('e-menu-parent');
-                    }
-                    if (['class', 'style'].indexOf(key) === -1 || !_this.element.getAttribute(key)) {
-                        _this.element.removeAttribute(key);
-                    }
-                    if (_this.isMenu && key === 'class' && _this.element.classList.contains('e-vertical')) {
-                        _this.element.classList.remove('e-vertical');
-                    }
-                });
+                if (isBlazor() && !this.isMenu) {
+                    this.element = this.removeChildElement(this.element);
+                }
+                else {
+                    this.element.innerHTML = '';
+                }
+                this.removeAttributes();
                 wrapper.parentNode.insertBefore(this.element, wrapper);
+                this.clonedElement = null;
             }
-            if (this.isMenu && this.ngElement) {
+            if (this.isMenu && this.clonedElement) {
                 detach(this.element);
                 wrapper.style.display = '';
                 wrapper.classList.remove('e-' + this.getModuleName() + '-wrapper');
@@ -1485,7 +2212,12 @@ var MenuBase = /** @class */ (function (_super) {
             else {
                 detach(wrapper);
             }
+            _super.prototype.destroy.call(this);
+            if (this.template) {
+                this.clearTemplate(['template']);
+            }
         }
+        this.rippleFn = null;
     };
     __decorate([
         Event()
@@ -1511,6 +2243,9 @@ var MenuBase = /** @class */ (function (_super) {
     __decorate([
         Property('')
     ], MenuBase.prototype, "cssClass", void 0);
+    __decorate([
+        Property(0)
+    ], MenuBase.prototype, "hoverDelay", void 0);
     __decorate([
         Property(false)
     ], MenuBase.prototype, "showItemOnClick", void 0);
@@ -1527,13 +2262,16 @@ var MenuBase = /** @class */ (function (_super) {
         Property(false)
     ], MenuBase.prototype, "enableScrolling", void 0);
     __decorate([
-        Complex({}, FieldSettings)
+        Property(false)
+    ], MenuBase.prototype, "enableHtmlSanitizer", void 0);
+    __decorate([
+        Complex({ itemId: 'id', text: 'text', parentId: 'parentId', iconCss: 'iconCss', url: 'url', separator: 'separator', children: 'items' }, FieldSettings)
     ], MenuBase.prototype, "fields", void 0);
     __decorate([
         Collection([], MenuItem)
     ], MenuBase.prototype, "items", void 0);
     __decorate([
-        Complex({}, MenuAnimationSettings)
+        Complex({ duration: 400, easing: 'ease', effect: 'SlideDown' }, MenuAnimationSettings)
     ], MenuBase.prototype, "animationSettings", void 0);
     MenuBase = __decorate([
         NotifyPropertyChanges