@openui5/sap.m 1.136.1 → 1.138.0

package/src/sap/m/Menu.js

@@ -6,62 +6,46 @@
 
 // Provides control sap.m.Menu.
 sap.ui.define([
-	'./library',
+	'sap/m/library',
 	'sap/ui/core/library',
 	'sap/ui/core/Control',
-	'./Button',
-	'./Dialog',
-	'./NavContainer',
-	'./List',
-	'./Page',
-	'./MenuListItem',
-	'./MenuItem',
-	"sap/ui/core/Lib",
-	'sap/ui/unified/Menu',
-	'sap/ui/unified/MenuItem',
-	'sap/ui/unified/MenuItemGroup',
+	'sap/m/ResponsivePopover',
+	'sap/m/Button',
+	'sap/m/Bar',
+	'sap/m/Title',
+	'sap/m/MenuItem',
+	'sap/m/MenuWrapper',
+	'sap/ui/core/Lib',
 	'sap/ui/Device',
+	"sap/ui/core/InvisibleText",
 	'sap/ui/core/EnabledPropagator',
-	"sap/ui/thirdparty/jquery",
-	"sap/ui/core/Popup",
-	"sap/ui/base/ManagedObject",
-	"sap/ui/core/Element"
+	'sap/base/i18n/Localization',
+	'sap/base/Log'
 ],
 	function(
 		library,
 		coreLibrary,
 		Control,
+		ResponsivePopover,
 		Button,
-		Dialog,
-		NavContainer,
-		List,
-		Page,
-		MenuListItem,
+		Bar,
+		Title,
 		MenuItem,
-		Library,
-		UfdMenu,
-		UfdMenuItem,
-		UfdMenuItemGroup,
+		MenuWrapper,
+		Lib,
 		Device,
+		InvisibleText,
 		EnabledPropagator,
-		jQuery,
-		Popup,
-		ManagedObject,
-		Element
+		Localization,
+		Log
 	) {
 		"use strict";
 
-		// shortcut for sap.ui.core.Popup.Dock
-		var Dock = Popup.Dock;
+		// Shortcut for sap.m.PlacementType
+		const PlacementType = library.PlacementType;
 
-		// shortcut for sap.m.ListType
-		var ListType = library.ListType;
-
-		// shortcut for sap.m.ListMode
-		var ListMode = library.ListMode;
-
-		// shortcut for sap.ui.core.ItemSelectionMode
-		var ItemSelectionMode = coreLibrary.ItemSelectionMode;
+		// Shortcut for sap.ui.core.ItemSelectionMode
+		const ItemSelectionMode = coreLibrary.ItemSelectionMode;
 
 		/**
 		 * Constructor for a new Menu.
@@ -73,23 +57,17 @@ sap.ui.define([
 		 * The <code>sap.m.Menu</code> control represents a hierarchical menu.
 		 * When opened on mobile devices it occupies the whole screen.
 		 *
-		 * <b>Note:</b> The application developer should add dependency to <code>sap.ui.unified</code> library
-		 * on application level to ensure that the library is loaded before the module dependencies will be required.
-		 * If the <code>sap.ui.unified</code> library is not loaded in advance, this
-		 * could lead to CSP compliance issues and adds an additional waiting time.
-		 * To prevent this, ensure that the <code>sap.ui.unified</code> library is loaded in advance.
-		 *
 		 * @extends sap.ui.core.Control
 		 * @implements sap.ui.core.IContextMenu
 		 *
 		 * @author SAP SE
-		 * @version 1.136.1
+		 * @version 1.138.0
 		 *
 		 * @constructor
 		 * @public
 		 * @alias sap.m.Menu
 		 */
-		var Menu = Control.extend("sap.m.Menu", /** @lends sap.m.Menu.prototype */ {
+		const Menu = Control.extend("sap.m.Menu", /** @lends sap.m.Menu.prototype */ {
 			metadata : {
 				interfaces: [
 					"sap.ui.core.IContextMenu"
@@ -103,20 +81,22 @@ sap.ui.define([
 				},
 				defaultAggregation: "items",
 				aggregations: {
+
 					/**
 					 * Defines the items contained within this control.
 					 */
-					items: { type: "sap.m.IMenuItem", multiple: true, singularName: "item", bindable: "bindable", defaultClass: MenuItem },
+					items: { type: "sap.m.IMenuItem", multiple: true, singularName: "item", bindable: "bindable", defaultClass: MenuItem, forwarding: { idSuffix: "-menuWrapper", aggregation: "items" } },
 
 					/**
-					 * Internal aggregation that contains the inner <code>sap.m.Dialog</code> for mobile.
+					 * Internal Menu Wrapper control
 					 */
-					_dialog: { type: "sap.m.Dialog", multiple: false, visibility: "hidden" },
+					_menuWrapper: { type: "sap.m.MenuWrapper", multiple: false, visibility: "hidden" },
 
 					/**
-					 * Internal aggregation that contains the inner <code>sap.ui.unified.Menu</code> for desktop and tablet.
+					 * Internal aggregation that contains the inner <code>sap.m.ResponsivePopover</code> for mobile.
 					 */
-					_menu: { type: "sap.ui.unified.Menu", multiple: false, visibility: "hidden" }
+					_popover: { type: "sap.m.ResponsivePopover", multiple: false, visibility: "hidden" }
+
 				},
 				events: {
 					/**
@@ -127,7 +107,7 @@ sap.ui.define([
 							/**
 							 * The <code>MenuItem</code> which was selected.
 							 */
-							item : {type : "sap.m.MenuItem" }
+							item : {type : "sap.m.IMenuItem" }
 						}
 					},
 
@@ -142,616 +122,376 @@ sap.ui.define([
 					 * @since 1.131
 					 */
 					beforeClose : {
-						allowPreventDefault : true
+						allowPreventDefault : true,
+						parameters: {
+							/**
+							 * The <code>MenuItem</code> which was selected (if any).
+							 * @since 1.136.0
+							 */
+							item : {type : "sap.m.IMenuItem" }
+						}
 					}
 
 				}
 			},
-			renderer: null // this is a popup control without a renderer
+			renderer: null // this is a ResponsivePopover control without a renderer
 		});
 
 		EnabledPropagator.call(Menu.prototype);
 
-
-		/**
-		 * Unified Menu items ID prefix.
-		 *
-		 * @type {string}
-		 */
-		Menu.UNIFIED_MENU_ITEMS_ID_SUFFIX = '-unifiedmenu';
-
-		/**
-		 * Map of all available properties in the sap.ui.unified.MenuItem.
-		 * Needed when syncs between sap.m.MenuItem and unified.MenuItem are performed.
-		 * @type {Object<string,Object>}
-		 * @private
-		 */
-		Menu.UNFIFIED_MENU_ITEMS_PROPS = UfdMenuItem.getMetadata().getAllProperties();
-
-		/**
-		 * List items ID prefix.
-		 *
-		 * @type {string}
-		 */
-		Menu.LIST_ITEMS_ID_SUFFIX = '-menuinnerlist';
-
-
-		/**
-		 * Map of all available properties in the sap.m.MenuListItem
-		 * Needed when syncs between sap.m.MenuItem and sap.m.MenuListItem are performed.
-		 * @type {Object<string,Object>}
-		 * @private
-		 */
-		Menu.MENU_LIST_ITEMS_PROPS = MenuListItem.getMetadata().getAllProperties();
-
 		/**
 		 * Initializes the control.
+		 *
 		 * @public
 		 */
 		Menu.prototype.init = function() {
-			if (Device.system.phone) {
-				this._initDialog();
-			}
-			this._bIsInitialized = false;
-			// attach event handlers responsible for keeping sap.m.MenuItem and sap.ui.unified.MenuItem, sap.m.MenuListItem instances at sync
-			this.attachEvent("propertyChanged", this._onPropertyChanged, this);
-			this.attachEvent("aggregationChanged", this._onAggregationChanged, this);
+			const oMenuWrapper = this._createMenuWrapper(),
+				oPopover = this._createPopover();
+
+			oMenuWrapper.attachClosePopover(this.close, this);
+			oMenuWrapper.attachCloseItemSubmenu(this._collectSubmenusToClose, this);
+			oMenuWrapper.attachItemSelected(this._handleItemSelected, this);
+			oPopover.attachAfterClose(this._menuClosed, this);
+
+			this._aSubmenusToClose = [];
+			this._openDuration = Device.system.phone ? null : 0;
 		};
 
-		/**
+        /**
 		 * Called from parent if the control is destroyed.
 		 */
 		Menu.prototype.exit = function() {
-			var oMenu = this._getMenu(),
-				oPopup = oMenu && oMenu.getPopup(),
-				oDialog = this._getDialog();
-
-			if (this._navContainerId) {
-				this._navContainerId = null;
-			}
-			if (this._bIsInitialized) {
-				this._bIsInitialized = null;
-			}
+			const oMenuWrapper = this._getMenuWrapper(),
+				oPopover = this._getPopover();
 
-			if (oPopup) {
-				oPopup.detachClosed(this._menuClosed, this);
-				oMenu.detachBeforeClose(this._handleVisualParentClose, this);
-			}
+			oMenuWrapper.detachClosePopover(this.close, this);
+			oMenuWrapper.detachCloseItemSubmenu(this._collectSubmenusToClose, this);
+			oMenuWrapper.detachItemSelected(this._handleItemSelected, this);
+			oPopover.detachAfterClose(this._menuClosed, this);
 
-			if (oDialog) {
-				oDialog.detachBeforeClose(this._handleVisualParentClose, this);
-			}
-		};
-
-		Menu.prototype.invalidate = function() {
-			//the parent control is most probably the menu opener, so do not invalidate it,
-			//let it do it's own changes when the menu is open
+			oMenuWrapper.destroy();
+			oPopover.destroy();
 		};
 
 		/**
-		 * Sets the title of the <code>Menu</code>.
+		 * Sets the title of the <code>Menu</code> in mobile view.
+		 *
 		 * @param {string} sTitle The new title of the <code>Menu</code>
 		 * @returns {this} <code>this</code> to allow method chaining
 		 * @public
 		 */
 		Menu.prototype.setTitle = function(sTitle) {
-			var oNavContainer = this._getNavContainer();
+			const oPopover = this._getPopover(),
+				oMenuWrapper = this._getMenuWrapper(),
+				oHeader = oPopover.getCustomHeader();
 
-			this.setProperty("title", sTitle, true);
-
-			if (oNavContainer && oNavContainer.getPages().length) {
-				oNavContainer.getPages()[0].setTitle(sTitle);
+			// set the text of the Title of the ResponsivePopover, which is located in the custom header's Bar contentMiddle aggregation
+			if (oHeader) {
+				oMenuWrapper.setTitle(sTitle);
+				// the Title is the only elemnet in the contentMiddle aggregation of the Bar we create as custom header
+				// so we can safely set the text of the first element
+				oHeader.getContentMiddle()[0].setText(sTitle);
 			}
 
+			this.setProperty("title", sTitle, true);
+
 			return this;
 		};
 
 		/**
 		 * Opens the <code>Menu</code> next to the given control.
+		 *
 		 * @param {sap.ui.core.Control} oControl The control that defines the position for the menu
-		 * @param {boolean} bWithKeyboard Whether the menu is opened with a shortcut or not
-		 * @param {sap.ui.core.Popup.Dock} [sDockMy=sap.ui.core.Popup.Dock.BeginTop] The reference docking location
-		 * of the <code>Menu</code> for positioning the menu on the screen
-		 * @param {sap.ui.core.Popup.Dock} [sDockAt=sap.ui.core.Popup.Dock.BeginBottom] The <code>oControl</code>
-		 * reference docking location for positioning the menu on the screen
-		 * @param {string} [sOffset="0 -2"] The offset relative to the docking point,
-		 * specified as a string with space-separated pixel values (e.g. "0 10" to move the popup 10 pixels to the right).
-		 * If the docking of both "my" and "at" is RTL-sensitive ("begin" or "end"), this offset is automatically mirrored in the RTL case as well.
+		 * @returns {this} <code>this</code> to allow method chaining
 		 * @public
 		 */
-		Menu.prototype.openBy = function(oControl, bWithKeyboard, sDockMy, sDockAt, sOffset) {
-			if (Device.system.phone) {
-				this._openDialog();
-			} else {
-				if (!this._bIsInitialized) {
-					this._initAllMenuItems();
-					this._bIsInitialized = true;
-				}
-
-				if (!sDockMy) {
-					sDockMy = Dock.BeginTop;
-				}
-				if (!sDockAt) {
-					sDockAt = Dock.BeginBottom;
-				}
-				if (!sOffset) {
-					sOffset = "0 -2";
-				}
-				this._getMenu().open(bWithKeyboard, oControl, sDockMy, sDockAt, oControl, sOffset);
+		Menu.prototype.openBy = function(oControl) {
+			const oPopover = this._getPopover();
+			if (!oControl) {
+				oControl = document.body;
 			}
-		};
+			oPopover._getPopup().setDurations(this._openDuration, 0);
+			oPopover.openBy(oControl);
 
-		/**
-		 * Closes the <code>Menu</code>.
-		 * @public
-		 */
-		Menu.prototype.close = function() {
-			if (Device.system.phone) {
-				this._getDialog() && this._getDialog().close();
-			} else {
-				this._getVisualParent() && this._getVisualParent().close();
-			}
+			return this;
 		};
 
 		/**
-		 * Returns whether the <code>Menu</code> is currently open.
-		 * @returns {boolean} true if menu is open
+		 * Closes the <code>Menu</code> if the <code>beforeClose</code> event isn`t prevented.
+		 *
+		 * @param {sap.ui.base.Event} oEvent closePopover event
+		 * @returns {this} <code>this</code> to allow method chaining
 		 * @public
 		 */
-		Menu.prototype.isOpen = function() {
-			if (Device.system.phone) {
-				return this._getDialog() && this._getDialog().isOpen();
-			} else {
-				return this._getVisualParent() && this._getVisualParent().isOpen();
+		Menu.prototype.close = function(oEvent) {
+			const oEventParameters = oEvent ? oEvent.getParameters() : {},
+				oBeforeCloseParameters = {},
+				oPopover = this._getPopover();
+
+			if (oEventParameters["origin"]) {
+				oBeforeCloseParameters["item"] = oEventParameters["origin"];
+			}
+			this._refreshSubmenusToClose();
+			if (oPopover && this.fireBeforeClose(oBeforeCloseParameters)) {
+				this._closeSubmenuPopovers();
+				oPopover._getPopup().setDurations(this._openDuration, 0);
+				oPopover.close();
 			}
+
+			return this;
 		};
 
 		/**
-		 * Creates the dialog that contains the actual menu for mobile.
+		 * Captures the itemSelected event fired by the menu wrapper and fires the itemSelected event of the menu.
+		 *
+		 * @param {sap.ui.base.Event} oEvent itemSelected event fired by the menu wrapper
 		 * @private
 		 */
-		Menu.prototype._initDialog = function() {
-			var oDialog = new Dialog({
-				showHeader: false,
-				stretch: true,
-				content: this._initNavContainer(),
-				buttons: [
-					this._initCloseButton()
-				]
-			});
-			oDialog.addStyleClass("sapMRespMenuDialog");
-			// remove padding for the menu on phone
-			oDialog.addStyleClass("sapUiNoContentPadding");
-			this.setAggregation("_dialog", oDialog, true);
-			oDialog.attachAfterClose(this._menuClosed, this);
-			oDialog.attachBeforeClose(this._handleVisualParentClose, this);
+		Menu.prototype._handleItemSelected = function(oEvent) {
+			oEvent.cancelBubble();
+			this.fireItemSelected({item: oEvent.getParameter("item")});
 		};
 
 		/**
-		 * Gets the internal dialog.
-		 * @returns {sap.m.Dialog} The internal _dialog aggregation
+		 * Refreshes the list of submenus that should be closed by checking if any are still open.
+		 *
 		 * @private
 		 */
-		Menu.prototype._getDialog = function() {
-			return this.getAggregation("_dialog");
+		Menu.prototype._refreshSubmenusToClose = function() {
+			this._aSubmenusToClose = this._aSubmenusToClose.filter((oItem) => oItem._getPopover().isOpen());
 		};
 
 		/**
-		 * Opens the internal dialog.
+		 * Closes the submenus of the <code>Menu</code> that are still open.
+		 *
 		 * @private
 		 */
-		Menu.prototype._openDialog = function() {
-			if (!this._bIsInitialized) {
-				this._initAllPages();
-				this._bIsInitialized = true;
+		Menu.prototype._closeSubmenuPopovers = function() {
+			while (this._aSubmenusToClose.length) {
+				this._aSubmenusToClose.pop()._closeSubmenu();
 			}
-
-			//reset to first page
-			this._getNavContainer().to(this._getNavContainer().getPages()[0]);
-			this._getDialog().open();
-		};
-
-		Menu.prototype._initAllMenuItems = function() {
-			this._initMenuForItems(this.getItems());
 		};
 
 		/**
-		 * Allows for any custom function to be called back when accessibility attributes
-		 * of underlying menu are about to be rendered.
-		 * The function is called once per MenuItem
+		 * Returns whether the <code>Menu</code> is currently open.
 		 *
-		 * @param {function} fn The callback function
-		 * @private
-		 * @ui5-restricted ObjectPageLayoutABHelper
-		 * @returns {void}
+		 * @returns {boolean} true if menu is open
+		 * @public
 		 */
-		Menu.prototype._setCustomEnhanceAccStateFunction = function(fn) {
-			this._fnEnhanceUnifiedMenuAccState = fn;
+		Menu.prototype.isOpen = function() {
+			return this._getPopover().isOpen();
 		};
 
-		Menu.prototype._initMenuForItems = function(aItems, oParentMenuItem) {
-			var oMenu = new UfdMenu();
-
-			oMenu.attachBeforeClose(this._handleVisualParentClose, this);
-			oMenu._setCustomEnhanceAccStateFunction(this._fnEnhanceUnifiedMenuAccState);
-			oMenu.isCozy = this._isMenuCozy.bind(this, oMenu);
+		/**
+		 * Provides a DOM reference ID for the menu container.
+		 * @returns {string} The DOM reference ID for the menu container
+		 */
+		Menu.prototype.getDomRefId = function() {
+			const oPopoverDomRef = this._getPopover().getDomRef();
+			return oPopoverDomRef ? oPopoverDomRef.id : "";
+		};
 
-			// Keep in mind that we are adding the style class to sap.m.Menu as the CustomStyleClassSupport is sync
-			// in a Mimic mode so only styles added to sap.m.Menu will be applied.
-			this.addStyleClass('sapMMenu');
+		/**
+		 * Opens the menu as a context menu.
+		 *
+		 * @param {jQuery.Event | object} oEvent The event object or an object containing offsetX, offsetY
+		 * values and left, top values for the element's position
+		 * @param {sap.ui.core.Element|HTMLElement} oOpenerRef The reference of the opener
+		 * @public
+		 */
+		Menu.prototype.openAsContextMenu = function(oEvent, oOpenerRef) {
+			const oPopover = this._getPopover(),
+				bPageCoordinates = oEvent && oEvent.pageX !== undefined && oEvent.pageY !== undefined,
+				bOffsetCoordinates = !bPageCoordinates && !oOpenerRef && oEvent.offsetX !== undefined && oEvent.offsetY !== undefined,
+				oOriginalEvent = oEvent && oEvent.originalEvent;
+			let oOpenerDomRef = oOpenerRef && oOpenerRef.getDomRef ? oOpenerRef.getDomRef() : oOpenerRef,
+				oPointerElement = document.getElementById("sapMMenuContextMenuPointer"),
+				oPointerParent = document.body,
+				oPointerSibling = null,
+				iX = 0,
+				iY = 0;
+
+			oPopover._getPopup().setDurations(this._openDuration, 0);
+
+			// explicitly close the popover if it is already open
+			if (oPopover.isOpen()) {
+				oPopover.close();
+			}
+
+			// on mobile devices, the popover is opened by the ResponsivePopover control on fullscreen,
+			// there's no need to use opener or do some positioning
+			if (Device.system.phone) {
+				oPopover.openBy();
+				return;
+			}
 
-			// Every new menu style class properties should be a reference to the control style class properties.
-			// This is needed because every menu level has a new popup like DOM structure in the static area and it's
-			// a sibling and not a child of the previous menu. Keep in mind that if the sap.m.Menu introduces a renderer
-			// in the future this must not be propagated like this not to pollute the control itself with classes
-			// from the children.
-			oMenu.aCustomStyleClasses = this.aCustomStyleClasses;
-			oMenu.mCustomStyleClassMap = this.mCustomStyleClassMap;
+			// if the opener reference is not provided, we try to get it from the event
+			if (!oOpenerRef && !bOffsetCoordinates) {
+				oOpenerDomRef = oEvent.srcControl ? oEvent.srcControl.getDomRef() : null;
 
-			aItems.forEach(function(oItem) {
-				if (this._isMenuItemGroup(oItem)) {
-					this._addVisualMenuItemGroupFromItemsGroup(oItem, oMenu);
-				} else {
-					this._addVisualMenuItemFromItem(oItem, oMenu);
+				if (!oOpenerDomRef) {
+					oOpenerDomRef = oOriginalEvent && oOriginalEvent.currentTarget ? oOriginalEvent.currentTarget : null;
 				}
-			}.bind(this));
+			}
 
-			if (oParentMenuItem) {
-				oParentMenuItem.setSubmenu(oMenu);
-			} else {
-				oMenu.getPopup().attachClosed(this._menuClosed, this);
-				this.setAggregation('_menu', oMenu, true);
+			// remove previously existing pointer element
+			if (oPointerElement) {
+				oPointerElement.remove();
 			}
 
-			oMenu.attachItemSelect(this._handleMenuItemSelect, this);
-		};
+			// create a new pointer element
+			oPointerElement = document.createElement("div");
+			oPointerElement.id = "sapMMenuContextMenuPointer";
+			oPointerElement.className = "sapMMenuContextMenuPointer";
 
-		Menu.prototype._handleVisualParentClose = function(oEvent) {
-			if (!this.fireBeforeClose()) {
-				oEvent.preventDefault();
-			}
-		};
+			const oOpenerData = oOpenerDomRef ? oOpenerDomRef.getBoundingClientRect() : null;
 
-		Menu.prototype._menuClosed = function() {
-			this.fireClosed();
-		};
+			if (oOriginalEvent && bPageCoordinates) {
+				const iPageX = oOriginalEvent.pageX || oOriginalEvent.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
+				const iPageY = oOriginalEvent.pageY || oOriginalEvent.clientY + (document.documentElement.scrollTop || document.body.scrollTop);
 
-		Menu.prototype._getMenu = function() {
-			return this.getAggregation("_menu");
-		};
+				if (oOpenerDomRef.tagName.toLowerCase() === "tr") {
+					oPointerParent = oOpenerDomRef.firstChild ? oOpenerDomRef.firstChild : oOpenerDomRef;
+					oPointerSibling = oPointerParent.firstChild ? oPointerParent.firstChild : null;
+				} else {
+					oPointerParent = oOpenerDomRef;
+					oPointerSibling = oOpenerDomRef.firstChild ? oOpenerDomRef.firstChild : null;
+				}
 
-		Menu.prototype._initCloseButton = function() {
-			var oRB = Library.getResourceBundleFor("sap.m");
+				iX = (iPageX - oOpenerData.left - window.scrollX);
+				iY = (iPageY - oOpenerData.top - window.scrollY);
 
-			return new Button({
-				text: oRB.getText("MENU_CLOSE"),
-				press: fnBtnClosePressHandler.bind(this)
-			});
-		};
+				if (Localization.getRTL()) {
+					iX = document.body.clientWidth - iX;
+				}
 
-		function fnBtnClosePressHandler() {
-			this._getDialog().close();
-		}
+			} else if (bOffsetCoordinates) {
+				// if the coordinates are provided, we create a pointer element at the specified position
+				iX = oEvent.offsetX;
+				iY = oEvent.offsetY;
+			}
 
-		Menu.prototype._initNavContainer = function() {
-			var oNavContainer = new NavContainer();
-			this._navContainerId = oNavContainer.getId();
-			return oNavContainer;
+			oPointerParent.insertBefore(oPointerElement, oPointerSibling);
+			oPointerElement.style.insetInlineStart = `${iX}px`;
+			oPointerElement.style.insetBlockStart = `${iY}px`;
+		    oPointerElement.setAttribute("aria-hidden", "true");
+
+			oPopover.openBy(oPointerElement);
+			oPopover.attachAfterClose(this._onContextMenuClose, this);
 		};
 
 		/**
-		 * Gets the internal <code>sap.m.NavContainer</code> for mobile.
-		 * @returns {sap.m.NavContainer} The sap.m.NavContainer
+		 * Removes the pointer element from the DOM when the context menu is closed.
 		 * @private
 		 */
-		Menu.prototype._getNavContainer = function() {
-			return Element.getElementById(this._navContainerId);
-		};
+		Menu.prototype._onContextMenuClose = function() {
+			const oPointerElement = document.getElementById("sapMMenuContextMenuPointer"),
+				oPopover = this._getPopover();
 
-		Menu.prototype._initAllPages = function() {
-			this._initPageForParent(this);
+			oPointerElement && oPointerElement.remove();
+			oPopover.detachAfterClose(this._onContextMenuClose, this);
 		};
 
-		Menu.prototype._initPageForParent = function(oParent) {
-			var aItems = oParent.getItems(),
-				isRootPage = oParent instanceof Menu,
-				sPageTitle = isRootPage ? oParent.getTitle() : oParent.getText(),
-				oList = new List({
-					mode: ListMode.None
-				}),
-				oPage = new Page({
-					title: sPageTitle,
-					showNavButton: !isRootPage,
-					content: oList
-				});
-
-			if (!isRootPage) {
-				this._setBackButtonTooltipForPageWithParent(oParent, oPage);
-			}
-
-			oPage.attachNavButtonPress(function() {
-				this._getNavContainer().back();
-			}, this);
-
-			this._getNavContainer().addPage(oPage);
-
-			aItems.forEach(function(oItem) {
-				this._addListItemFromItem(oItem, oPage);
-			}, this);
-
-			this._updateListInset(oList);
-
-			oList.attachEvent("itemPress", this._handleListItemPress, this);
+		/**
+		 * Override mutator public methods for CustomStyleClassSupport so it's properly propagated to the popover.
+		 * Keep in mind we don't overwrite <code>hasStyleClass</code> method - we are only propagating the state.
+		 * We don't mimic the popover custom style class support.
+		 *
+		 * @override
+		 */
+		["addStyleClass", "removeStyleClass", "toggleStyleClass"].forEach(function (sMethodName) {
+			Menu.prototype[sMethodName] = function (sClass, bSuppressInvalidate) {
+				const oPopover = this._getPopover();
 
-			return oPage;
-		};
+				this._getMenuWrapper()._processStyleClasses(sClass, sMethodName);
 
-		Menu.prototype._handleListItemPress = function(oEvent) {
-			var oListItem = oEvent.getParameter("listItem"),
-				oMenuItem = Element.getElementById(oListItem.getMenuItem()),
-				pageId = oMenuItem._getItems().length ? oMenuItem._getVisualChild() : null,
-				bSelected = !oListItem.getProperty("selected");
-
-			if (pageId) {
-				this._getNavContainer().to(pageId);
-			} else {
-				this._getDialog().close();
-				if (oListItem._getItemSelectionMode() !== ItemSelectionMode.None) {
-					oListItem.setSelected(bSelected);
-					oMenuItem.setSelected(bSelected);
+				Control.prototype[sMethodName].apply(this, arguments);
+				if (sMethodName !== "toggleStyleClass" && oPopover) {
+					oPopover[sMethodName].apply(oPopover, arguments);
 				}
 
-				this.fireItemSelected({ item: oMenuItem });
-			}
-			oMenuItem.firePress();
-		};
+				return this;
+			};
+		});
 
 		/**
-		 * Sets an ARIA tooltip for a back button of a page.
-		 * @param {object} oParent The parent item for the page
-		 * @param {object} oPage The page
-		 * @private
+		 * Returns an array containing the selected menu items.
+		 * <b>Note:</b> Only items with <code>selected</code> property set that are members of <code>MenuItemGroup</code> with <code>ItemSelectionMode</code> property
+		 * set to {@link sap.ui.core.ItemSelectionMode.SingleSelect} or {@link sap.ui.unified.ItemSelectionMode.MultiSelect}> are taken into account.
+		 *
+		 * @since 1.127.0
+		 * @public
+		 * @returns {Array} Array of all selected items
 		 */
-		Menu.prototype._setBackButtonTooltipForPageWithParent = function(oParent, oPage) {
-			var oParentParent = oParent.getParent(),
-				oRb = Library.getResourceBundleFor("sap.m"),
-				sParentPageTitle;
-
-			sParentPageTitle = oParentParent instanceof Menu ? oParentParent.getTitle() : oParentParent.getText();
-			sParentPageTitle = oRb.getText("MENU_PAGE_BACK_BUTTON") + " " + sParentPageTitle;
-			oPage.setNavButtonTooltip(sParentPageTitle);
+		Menu.prototype.getSelectedItems = function() {
+			return this._getItems().filter((oItem) => oItem.getSelected && oItem.getSelected() && oItem._getItemSelectionMode() !== ItemSelectionMode.None);
 		};
 
 		/**
-		 * Checks if an item is a MenuItemGroup or not.
-		 * @param {sap.m.IMenuItem} oItem The item to be checked
-		 * @returns {boolean} Whether the item is a MenuItemGroup or not
+		 * Collects the items which submenus should be closed if necessary.
+		 *
+		 * @param {sap.ui.base.Event} oEvent closeItemSubmenu event
 		 * @private
 		 */
-		Menu.prototype._isMenuItemGroup = function(oItem) {
-			return !!oItem.getItemSelectionMode;
-		};
+		Menu.prototype._collectSubmenusToClose = function(oEvent) {
+			const oItem = oEvent.getParameter("item");
 
-		Menu.prototype._createMenuListItemFromItem = function(oItem) {
-			var sMenuListItemId = this._generateListItemId(oItem.getId()),
-				oListItem = Element.getElementById(sMenuListItemId),
-				oItemGroup = Element.getElementById(oItem.getAssociation("_group"));
+			this._refreshSubmenusToClose();
 
-			if (oListItem) {
-				return oListItem;
+			// check if the submenu is already in the list
+			if (this._aSubmenusToClose.indexOf(oItem) === -1) {
+				this._aSubmenusToClose.push(oItem);
 			}
-
-			oListItem = new MenuListItem({
-				id  : sMenuListItemId,
-				type: oItem.getEnabled() ? ListType.Active : ListType.Inactive,
-				icon: oItem.getIcon(),
-				title: this._handleSettingsValue(oItem.getText()),
-				selected: oItem.getSelected(),
-				startsSection: oItem.getStartsSection(),
-				menuItem: oItem,
-				tooltip: this._handleSettingsValue(oItem.getTooltip()),
-				visible: oItem.getVisible(),
-				enabled: oItem.getEnabled()
-			});
-
-			oListItem.setAssociation("_group", oItemGroup);
-
-			oItem.aDelegates.forEach(function(oDelegateObject) {
-				oListItem.addEventDelegate(oDelegateObject.oDelegate, oDelegateObject.vThis);
-			});
-
-			return oListItem;
 		};
 
-		Menu.prototype._createVisualMenuItemFromItem = function(oItem) {
-			var sUfdMenuItemId = this._generateUnifiedMenuItemId(oItem.getId()),
-				oUfdMenuItem = Element.getElementById(sUfdMenuItemId),
-				aCustomData = oItem.getCustomData(),
-				aEndContent = oItem.getEndContent();
-
-			if (oUfdMenuItem) {
-				return oUfdMenuItem;
-			}
-
-			oUfdMenuItem = new UfdMenuItem({
-				id: sUfdMenuItemId,
-				icon: oItem.getIcon(),
-				text: this._handleSettingsValue(oItem.getText()),
-				selected: oItem.getSelected(),
-				shortcutText: this._handleSettingsValue(oItem.getShortcutText()),
-				startsSection: oItem.getStartsSection(),
-				tooltip: this._handleSettingsValue(oItem.getTooltip()),
-				visible: oItem.getVisible(),
-				enabled: oItem.getEnabled()
-			});
-
-			for (var i = 0; i < aCustomData.length; i++) {
-				oItem._addCustomData(oUfdMenuItem, aCustomData[i]);
-			}
-
-			aEndContent.forEach((oEndContent) => {
-				oItem._addEndContent(oUfdMenuItem, oEndContent);
-			});
-
-			oItem.aDelegates.forEach(function(oDelegateObject) {
-				oUfdMenuItem.addEventDelegate(oDelegateObject.oDelegate, oDelegateObject.vThis);
-			});
-
-			return oUfdMenuItem;
-		};
-
-		Menu.prototype._addVisualMenuItemFromItem = function(oItem, oMenuOrGroup, iIndex) {
-			var oMenuItem = this._createVisualMenuItemFromItem(oItem),
-				oMenuParent = this._isMenuItemGroup(oMenuOrGroup) ? oMenuOrGroup.getParent() : oMenuOrGroup,
-				aItemItems = oItem.getItems(),
-				oFirstItem;
-
-			oItem._setVisualParent(oMenuParent);
-			oItem._setVisualControl(oMenuItem);
-
-			if (aItemItems.length) {
-				oFirstItem = aItemItems[0];
-				if (this._isMenuItemGroup(oFirstItem)) {
-					var aGroupItems = oFirstItem.getItems();
-					oFirstItem = aGroupItems.length ? aGroupItems[0] : null;
-				}
-				this._initMenuForItems(aItemItems, oMenuItem);
-				oFirstItem && oItem._setVisualChild(oFirstItem._getVisualParent());
-			}
-
-			iIndex === undefined ? oMenuOrGroup.addItem(oMenuItem) : oMenuOrGroup.insertItem(oMenuItem, iIndex);
-		};
-
-		Menu.prototype._createVisualMenuItemGroupFromItemsGroup = function(oGroup) {
-			var sUfdMenuItemGroupId = this._generateUnifiedMenuItemId(oGroup.getId()),
-				oUfdMenuItemGroup = Element.getElementById(sUfdMenuItemGroupId),
-				aCustomData = oGroup.getCustomData();
-
-			if (oUfdMenuItemGroup) {
-				return oUfdMenuItemGroup;
-			}
-
-			oUfdMenuItemGroup = new UfdMenuItemGroup({
-				id: sUfdMenuItemGroupId,
-				itemSelectionMode: oGroup.getItemSelectionMode()
-			});
-
-			oGroup._setVisualControl(oUfdMenuItemGroup);
-			oGroup._setParentMenu(this);
-
-			for (var i = 0; i < aCustomData.length; i++) {
-				oGroup._addCustomData(oUfdMenuItemGroup, aCustomData[i]);
-			}
-
-			return oUfdMenuItemGroup;
-		};
-
-		Menu.prototype._addVisualMenuItemGroupFromItemsGroup = function(oGroup, oMenu, iIndex) {
-			var oMenuItemGroup = this._createVisualMenuItemGroupFromItemsGroup(oGroup),
-				aItems = oGroup.getItems();
-
-			iIndex === undefined ? oMenu.addItem(oMenuItemGroup) : oMenu.insertItem(oMenuItemGroup, iIndex);
-
-			for (var i = 0; i < aItems.length; i++) {
-				this._addVisualMenuItemFromItem(aItems[i], oMenuItemGroup);
-			}
-
+		/**
+		 * Allows for any custom function to be called back when accessibility attributes
+		 * of underlying menu are about to be rendered.
+		 * The function is called once per MenuItem
+		 *
+		 * @param {function} fn The callback function
+		 * @private
+		 * @ui5-restricted ObjectPageLayoutABHelper
+		 * @returns {void}
+		 */
+		Menu.prototype._setCustomEnhanceAccStateFunction = function(fn) {
+			this._fnEnhanceUnifiedMenuAccState = fn;
 		};
 
-		Menu.prototype._addListItemFromItem = function(oItem, oPage, iIndex) {
-			var aItemItems = oItem.getItems(),
-				bItemIsGroup = this._isMenuItemGroup(oItem),
-				oFirstItem;
-
-			if (bItemIsGroup) {
-				oItem._setParentMenu(this);
-				oItem.getItems().forEach((oItem) => {
-					this._addListItemFromItem(oItem, oPage, iIndex);
-					if (iIndex !== undefined) {
-						iIndex++;
-					}
-				});
-				return;
-			}
-
-			var oMenuListItem = this._createMenuListItemFromItem(oItem),
-				oList = oPage.getContent()[0];
+        Menu.prototype._menuClosed = function(oEvent) {
+			const oOpener = oEvent && oEvent.getParameter("openBy");
 
-			oItem._setVisualParent(oPage);
-			oItem._setVisualControl(oMenuListItem);
+			this.fireClosed();
 
-			if (aItemItems.length) {
-				this._initPageForParent(oItem);
-				oFirstItem = aItemItems[0];
-				if (this._isMenuItemGroup(oFirstItem)) {
-					aItemItems = oFirstItem.getItems();
-					oFirstItem = aItemItems.length ? aItemItems[0] : null;
-				}
-				if (oFirstItem) {
-					oItem._setVisualChild(oFirstItem._getVisualParent());
+			if (oOpener) {
+				try {
+					oOpener.focus();
+				} catch (e) {
+					Log.warning("Menu.close cannot restore the focus on opener " + oOpener + ", " + e);
 				}
 			}
-
-			if (iIndex === undefined) {
-				oList.addItem(oMenuListItem);
-			} else {
-				oList.insertItem(oMenuListItem, iIndex);
-			}
-
-			oList.invalidate();
 		};
 
 		/**
-		 * Connects an instance of sap.ui.unified.MenuItem for given sap.m.MenuItem.
-		 * The sap.ui.unified.MenuItem is rendered to the end-user.
-		 * If there is an instance of sap.ui.unified.MenuItem already connected, this method does nothing.
-		 * @param {sap.m.MenuItem} oItem the item to assign a visual item for
-		 * @param {sap.ui.core.Control} oControl the container control
-		 * @param {int} iIndex the index of the given item inside the aggregation <items>
+		 * Checks if an item is a MenuItemGroup or not.
+		 *
+		 * @param {sap.m.IMenuItem} oItem The item to be checked
+		 * @returns {boolean} Whether the item is a MenuItemGroup or not
 		 * @private
 		 */
-		Menu.prototype._connectVisualItem = function(oItem, oControl, iIndex) {
-			if (!oControl || (Element.getElementById(oItem._getVisualControl()) && oControl.indexOfItem(oItem) !== -1)) {
-				return;
-			}
-
-			if (Device.system.phone) {
-				this._addListItemFromItem(oItem, oControl, iIndex);
-				var oList = oControl.getContent()[0];
-				this._updateListInset(oList);
-			} else { //desktop & tablet
-				this._addVisualMenuItemFromItem(oItem, oControl, iIndex);
-			}
-		};
-
-		Menu.prototype._updateListInset = function(oList) {
-			var bHasIcons = false,
-				sInsetClass = "sapMListIcons",
-				aItems = oList.getItems();
-
-			for (var i = 0; i < aItems.length; i++) {
-				if (aItems[i].getIcon()) {
-					bHasIcons = true;
-					break;
-				}
-			}
-
-			if (bHasIcons) {
-				oList.addStyleClass(sInsetClass);
-			} else {
-				oList.removeStyleClass(sInsetClass);
-			}
+		Menu.prototype._isMenuItemGroup = function(oItem) {
+			return !!oItem.getItemSelectionMode;
 		};
 
 		/**
 		 * Returns list of items stored in <code>items</code> aggregation. If there are group items,
 		 * the items of the group are returned instead of their group item.
 		 *
-		 * @returns {sap.ui.unified.MenuItem} List of all menu items
+		 * @returns {sap.m.MenuItem} List of all menu items
 		 * @private
 		 */
 		Menu.prototype._getItems = function() {
-			var aItems = [];
+			const aItems = [];
 
 			const findItems = (aItemItems) => {
 				aItemItems.forEach((oItem) => {
@@ -768,409 +508,172 @@ sap.ui.define([
 			return aItems;
 		};
 
-		Menu.prototype._handleMenuItemSelect = function(oEvent) {
-			var oUnfdItem = oEvent.getParameter("item"),
-				oMenuItem;
-
-			if (!oUnfdItem) {
-				return;
-			}
-
-			oMenuItem = this._findMenuItemByUnfdMenuItem(oUnfdItem);
-
-			oMenuItem.setSelected(oUnfdItem.getSelected());
-
-
-			if (oMenuItem && !oMenuItem._getItems().length) {
-				this.fireItemSelected({item: oMenuItem});
-			}
-			if (oMenuItem) {
-				oMenuItem.firePress();
-			}
-		};
-
-		Menu.prototype._generateListItemId = function (sMenuItemId) {
-			return sMenuItemId + Menu.LIST_ITEMS_ID_SUFFIX;
-		};
-
-		Menu.prototype._generateUnifiedMenuItemId = function (sMenuItemId) {
-			return sMenuItemId + Menu.UNIFIED_MENU_ITEMS_ID_SUFFIX;
-		};
-
-		Menu.prototype._findMenuItemByUnfdMenuItem = function(oUnfdMenuItem) {
-			var sId = oUnfdMenuItem.getId().slice(0, -Menu.UNIFIED_MENU_ITEMS_ID_SUFFIX.length);
-			return Element.getElementById(sId);
-		};
+		/* ResponsivePopover and MenuWrapper functionality */
 
 		/**
-		 * Checks whether the <code>Menu</code> should run with cozy design.
-		 * This function must only be called on the root menu (<code>getRootMenu</code>) to get proper results.
-		 * @param {object} oMenu The <code>Menu</code> which is checked
-		 * @returns {boolean} If the <code>Menu</code> should run with cozy design
+		 * Creates the internal MenuWrapper control.
+		 * @param {boolean} bIsSubmenu Whether the menu in this wrapper is a submenu or not
+		 * @returns {sap.m.MenuWrapper} The created MenuWrapper
 		 * @private
 		 */
-		Menu.prototype._isMenuCozy = function(oMenu) {
-			if (!oMenu.bCozySupported) {
-				return false;
-			}
-
-			if (oMenu.hasStyleClass("sapUiSizeCozy")) {
-				return true;
-			}
-
-			if (checkCozyMode(oMenu.oOpenerRef)) {
-				return true;
-			}
-
-			return false;
+		Menu.prototype._createMenuWrapper = function(bIsSubmenu) {
+			const oMenuWrapper = new MenuWrapper(this.getId() + "-menuWrapper", { isSubmenu: bIsSubmenu });
+			this.setAggregation("_menuWrapper", oMenuWrapper, true);
+			return oMenuWrapper;
 		};
 
-		function checkCozyMode(oRef) {
-			if (!oRef) {
-				return false;
-			}
-			oRef = oRef.$ ? oRef.$() : jQuery(oRef);
-			var $ClosestParent = oRef.closest(".sapUiSizeCompact,.sapUiSizeCondensed,.sapUiSizeCozy");
-			return (!$ClosestParent.hasClass("sapUiSizeCompact") && !$ClosestParent.hasClass("sapUiSizeCondensed"))
-				|| $ClosestParent.hasClass("sapUiSizeCozy");
-		}
-
-		Menu.prototype.addAggregation = function(sAggregationName, oObject, bSuppressInvalidate) {
-			Control.prototype.addAggregation.apply(this, arguments);
-
-			if (sAggregationName === "items") {
-				this._connectVisualItem(oObject, this._getVisualParent());
-			}
-
-			return this;
-		};
-
-		Menu.prototype.insertAggregation = function(sAggregationName, oObject, iIndex, bSuppressInvalidate) {
-			Control.prototype.insertAggregation.apply(this, arguments);
-
-			if (sAggregationName === "items") {
-				this._connectVisualItem(oObject, this._getVisualParent(), iIndex);
-			}
-
-			return this;
-		};
-
-		Menu.prototype.removeAggregation = function(sAggregationName, vObject, bSuppressInvalidate) {
-			var oItem = Control.prototype.removeAggregation.apply(this, arguments);
-
-			if (sAggregationName === "items") {
-				this._removeVisualItem(oItem);
-			}
-
-			return oItem;
-		};
-
-		Menu.prototype.removeAllAggregation = function(sAggregationName, bSuppressInvalidate) {
-			var aItems = Control.prototype.removeAllAggregation.apply(this, arguments);
+		/**
+		 * Creates the ResponsivePopover that contains the actual menu.
+		 * @returns {sap.m.ResponsivePopover} The created ResponsivePopover
+		 * @private
+		 */
+		Menu.prototype._createPopover = function() {
+			let oPopover = this._getPopover();
 
-			if (sAggregationName === "items") {
-				for (var i = 0; i < aItems.length; i++) {
-					this._removeVisualItem(aItems[i]);
-				}
+			if (oPopover) {
+				return oPopover;
 			}
 
-			return aItems;
-		};
-
-		Menu.prototype._removeVisualItem = function(oItem, oParentItem) {
-			var oVisualItem = Element.getElementById(oItem._getVisualControl()),
-				vMenuOrList;
-
-			if (oVisualItem) {
-				vMenuOrList = oVisualItem.getParent();
-				vMenuOrList.removeItem(oVisualItem);
-
-				if (Device.system.phone) {
-					this._removeSubPageForItem(oItem);
+			const sDialogAccessibleNameId = Device.system.phone
+				? `${this.getId()}-title`
+				: InvisibleText.getStaticId("sap.m", "MENU_POPOVER_ACCESSIBLE_NAME");
 
-					//if this is the last item in the page, remove the page
-					if (vMenuOrList.getItems().length === 0) {
-						// now we need to update its parent list item - no to render its arrow and reset its visual child ref
-						if (oParentItem) {
-							oParentItem._setVisualChild(null);
-							Element.getElementById(oParentItem._getVisualControl()).invalidate();
-						}
-					}
+			const oMenuWrapper = this._getMenuWrapper(),
+				bRTL = Localization.getRTL(),
+				bIsSubmenu = oMenuWrapper.getIsSubmenu(),
+				iOffsetXCorrection = bRTL ? 4 : -4;
 
-					if (vMenuOrList) { //if it is not destroyed already in the statement above
-						vMenuOrList.invalidate();
-					}
-				}
-			}
-		};
+			oPopover = new ResponsivePopover(this.getId() + "-rp", {
+				placement: this._getPopoverPlacement(),
+				showHeader: false,
+				showArrow: false,
+				showCloseButton: false,
+				verticalScrolling: true,
+				horizontalScrolling: false,
+				offsetX: bIsSubmenu ? iOffsetXCorrection : 1,
+				offsetY: bIsSubmenu ? 4 : 1,
+				content: oMenuWrapper,
+				ariaLabelledBy: [sDialogAccessibleNameId]
+			});
+			oPopover.addStyleClass("sapMMenu");
 
-		Menu.prototype.destroyAggregation = function(sAggregationName, bSuppressInvalidate) {
-			if (sAggregationName === "items") {
-				for (var i = 0; i < this.getItems().length; i++) {
-					this._removeVisualItem(this.getItems()[i]);
-				}
-			}
+			this.setAggregation("_popover", oPopover, true);
 
-			return Control.prototype.destroyAggregation.apply(this, arguments);
-		};
+			if (Device.system.phone) {
+				oPopover.setShowHeader(true);
+				oPopover.setEndButton(this._createCloseButton());
+				oPopover.setCustomHeader(this._createHeaderBar());
+			} else if (bIsSubmenu) {
+				oPopover.getAggregation("_popup")._adaptPositionParams = function() {
+					this._marginTop = 0;
+					this._marginLeft = 0;
+					this._marginRight = 0;
+					this._marginBottom = 0;
 
-		Menu.prototype._removeSubPageForItem = function(oItem, bSkipChildren) {
-			var oSubMenuPage;
+					this._arrowOffset = 0;
+					this._offsets = ["0 0", "0 0", "0 0", "0 0"];
 
-			if (!bSkipChildren) {
-				for (var i = 0; i < oItem.getItems().length; i++) {
-					this._removeSubPageForItem(oItem.getItems()[i]);
-				}
+					this._myPositions = ["begin bottom", "begin top", "begin top", "end top"];
+					this._atPositions = ["begin top", "end top", "begin bottom", "begin top"];
+				};
 			}
 
-			if (oItem._getVisualChild()) {
-				oSubMenuPage = Element.getElementById(oItem._getVisualChild());
-				if (this._getNavContainer() && oSubMenuPage) {
-					this._getNavContainer().removePage(oSubMenuPage);
-				}
-				!!oSubMenuPage && oSubMenuPage.destroy();
-			}
-		};
+			// this override is needed to fix the issue with the popover position flip
+			oPopover._oControl._getDocHeight = () => window.innerHeight + window.scrollY;
 
-		Menu.prototype._getVisualParent = function() {
-			var oNavContainer = this._getNavContainer(),
-				oMenu = this._getMenu();
-
-			if (oNavContainer && oNavContainer.getPages().length) { //mobile
-				return oNavContainer.getPages()[0];
-			} else {
-				return oMenu;
-			}
+			return oPopover;
 		};
 
 		/**
-		 * Handle the event of changing any property of any menu items and sub-items.
-		 * @param {object} oEvent The event data object
-		 * @private
+		 * Creates the back button for the Responsive Popover in mobile view.
+		 * @returns {sap.m.Button} The back button
 		 */
-		Menu.prototype._onPropertyChanged = function (oEvent) {
-			oEvent.cancelBubble();
-			var sPropertyKey = oEvent.getParameter("propertyKey"),
-				oPropertyValue = oEvent.getParameter("propertyValue"),
-				mTargetMenuItemProps = Device.system.phone ? Menu.MENU_LIST_ITEMS_PROPS : Menu.UNFIFIED_MENU_ITEMS_PROPS,
-				fnGenerateTargetItemId = Device.system.phone ? this._generateListItemId : this._generateUnifiedMenuItemId,
-				sTargetItemId, oTargetItem;
-
-			if (Device.system.phone && sPropertyKey === 'text') {
-				sPropertyKey = 'title';
-			}
-
-			if (!mTargetMenuItemProps[sPropertyKey]) {
-				return;
-			}
-			sTargetItemId = fnGenerateTargetItemId(oEvent.getSource().getId());
-			oTargetItem = Element.getElementById(sTargetItemId);
-
-			if (oTargetItem) {
-				// Private aggregations are not going to get cloned if ManagedObject.prototype.clone method gets called.
-				// This would mean that it is possible to not have a sap.ui.unified.Menu instance and the corresponding
-				// sap.ui.unified.MenuItem instances at that point in time.
-				oTargetItem.setProperty(sPropertyKey, oPropertyValue);
-				if (Device.system.phone && this._getDialog().isOpen()) {
-					this._getDialog().close();
+		Menu.prototype._createBackButton = function() {
+			return new Button(this.getId() + "-backbutton", {
+				icon : "sap-icon://nav-back",
+				press : (oEvent) => {
+					this._getMenuWrapper().fireClosePopover();
 				}
-			}
-		};
-
-		/**
-		* Handle the event of changing any aggregation of any menu items and sub-items.
-		* @param {object} oEvent The event data object
-		* @private
-		*/
-		Menu.prototype._onAggregationChanged = function(oEvent) {
-			oEvent.cancelBubble();
-			var sAggregationname = oEvent.getParameter("aggregationName");
-
-			switch (sAggregationname) {
-				case 'items':
-					this._onItemsAggregationChanged(oEvent);
-					break;
-				case 'tooltip':
-					this._onTooltipAggregationChanged(oEvent);
-					break;
-				default:
-			}
+			});
 		};
 
 		/**
-		 * Handle the event of changing the "tooltip" aggregation of any menu items and sub-items.
-		 * @param {object} oEvent The event data object
-		 * @private
+		 * Creates the custom header bar for the Responsive Popover in mobile view.
+		 * @returns {sap.m.Bar} The header bar
 		 */
-		Menu.prototype._onTooltipAggregationChanged = function(oEvent) {
-			var sVisualItemId = oEvent.getSource()._getVisualControl(),
-				methodName = oEvent.getParameter("methodName"),
-				methodParams = oEvent.getParameter("methodParams"),
-				oVisualItem;
+		Menu.prototype._createHeaderBar = function() {
+			const oMenuWrapper = this._getMenuWrapper(),
+				oHeaderBar = new Bar({
+					contentMiddle: new Title(this.getId() + "-title", { text: oMenuWrapper.getTitle() })
+				}),
+				bIsSubmenu = this._getMenuWrapper().getIsSubmenu();
 
-			if (!sVisualItemId) {
-				return;
+			if (bIsSubmenu) {
+				oHeaderBar.addContentLeft(this._createBackButton());
 			}
 
-			oVisualItem = Element.getElementById(sVisualItemId);
-
-			if (methodName === "set") {
-				oVisualItem.setTooltip(methodParams.item);
-			}
-			if (methodName === "destroy") {
-				oVisualItem.destroyTooltip();
-			}
+			return oHeaderBar;
 		};
 
 		/**
-		 * Handle the event of changing the "items" aggregation of any menu items and sub-items.
-		 * @param {object} oEvent The event data object
-		 * @private
+		 * Creates the close button for the Responsive Popover for mobile view.
+		 * @returns {sap.m.Button} The close button
 		 */
-		Menu.prototype._onItemsAggregationChanged = function(oEvent) {
-			var oItem = oEvent.getSource(),
-				methodName = oEvent.getParameter("methodName"),
-				methodParams = oEvent.getParameter("methodParams"),
-				iInsertIndex;
-
-			if (methodName === "add" || methodName === "insert") {
-				if (methodName === "insert") {
-					iInsertIndex = methodParams.index;
-				}
-				this._addOrInsertItem(oItem, methodParams.item, iInsertIndex);
-			}
-			if (methodName === "remove") {
-				this._removeVisualItem(methodParams.item, oItem);
-			}
-			if (methodName === "removeall") {
-				for (var i = 0; i < methodParams.items.length; i++) {
-					this._removeVisualItem(methodParams.items[i], oItem);
-				}
-			}
-			if (methodName === "destroy") {
-				this._destroyItem(oItem);
-			}
-		};
+		Menu.prototype._createCloseButton = function() {
+			const oRB = Lib.getResourceBundleFor("sap.m");
 
-		Menu.prototype._addOrInsertItem = function(oParentItem, oNewItem, iInsertIndex) {
-			var oLI;
-
-			if (oParentItem._getVisualChild()) { //this is not the first sub-item that is added
-				this._connectVisualItem(oNewItem, Element.getElementById(oParentItem._getVisualChild()), iInsertIndex);
-			} else {
-				if (Device.system.phone) {
-					this._initPageForParent(oParentItem);
-					oParentItem._setVisualChild(oParentItem.getItems()[0]._getVisualParent());
-					oLI = Element.getElementById(oParentItem._getVisualControl());
-					oLI && oLI.invalidate();
-				} else {
-					this._initMenuForItems(oParentItem.getItems(), Element.getElementById(oParentItem._getVisualControl()));
-					oParentItem._setVisualChild(oParentItem._getItems()[0]._getVisualParent());
+			return new Button({
+				text: oRB.getText("MENU_CLOSE"),
+				press: () => {
+					this._getMenuWrapper().fireClosePopover({ bubbleToRoot: true });
 				}
-			}
-		};
-
-		Menu.prototype._destroyItem = function(oItem) {
-			//destroy is handled recursively from the item itself (managed object)
-			//so here we receive multiple aggregationChanged events, each one for a separate item
-
-			//in the time we re-render the visual item, it's menuitem still has its subitems, so remove the ref for a while
-			var oVisualItem = Element.getElementById(oItem._getVisualControl());
-			if (oVisualItem && oVisualItem.setMenuItem) {
-				oVisualItem.setMenuItem(null);
-			}
-
-			this._removeSubPageForItem(oItem, true);
-
-			// now we need to update its parent list item - no to render its arrow and reset its visual child ref
-			oItem._setVisualChild(null);
-
-			if (oVisualItem && oVisualItem.setMenuItem) {
-				oVisualItem.invalidate();
-				oVisualItem.setMenuItem(oItem);
-			}
+			});
 		};
 
 		/**
-		 * Provides a DOM reference ID of the menu container.
-		 * @returns {string} The DOM reference ID of the menu container
+		 * Gets the internal MenuWrapper control.
+		 * @returns {sap.m.MenuWrapper} The internal _menuWrapper aggregation
+		 * @private
 		 */
-		Menu.prototype.getDomRefId = function() {
-			if (Device.system.phone) {
-				return this._getDialog().getId();
-			} else {
-				return this._getMenu().getId();
-			}
+		Menu.prototype._getMenuWrapper = function() {
+			const oPopover = this._getPopover();
+			return oPopover ? oPopover.getContent()[0] : this.getAggregation("_menuWrapper");
 		};
 
 		/**
-		 * Opens the menu as a context menu.
-		 * @param {jQuery.Event | object} oEvent The event object or an object containing offsetX, offsetY
-		 * values and left, top values of the element's position
-		 * @param {sap.ui.core.Element|HTMLElement} oOpenerRef The reference of the opener
-		 * @public
+		 * Gets the internal ResponsivePopover.
+		 * @private
+		 * @returns {sap.m.ResponsivePopover} The internal _popover aggregation
 		 */
-		Menu.prototype.openAsContextMenu = function(oEvent, oOpenerRef) {
-
-			if (Device.system.phone) {
-				this._openDialog();
-			} else {
-				if (!this._bIsInitialized) {
-					this._initAllMenuItems();
-					this._bIsInitialized = true;
-				}
-
-				this._getMenu().openAsContextMenu(oEvent, oOpenerRef);
-			}
+		Menu.prototype._getPopover = function() {
+			return this.getAggregation("_popover");
 		};
 
 		/**
-		 * Override mutator public methods for CustomStyleClassSupport so it's properly propagated to the dialog.
-		 * Keep in mind we don't overwrite <code>hasStyleClass</code> method - we are only propagating the state
-		 * we don't mimic the dialog custom style class support.
-		 * @override
-		 */
-		["addStyleClass", "removeStyleClass", "toggleStyleClass"].forEach(function (sMethodName) {
-			Menu.prototype[sMethodName] = function (sClass, bSuppressInvalidate) {
-				var oDialog = this._getDialog();
+		 * Gets the placement type for the popover depending of LTR/RTL setting.
+		 * @private
+		 * @returns {sap.m.PlacementType} the placement type of the popover
+		*/
+		Menu.prototype._getPopoverPlacement = function() {
+			const bIsSubmenu = this._getMenuWrapper().getIsSubmenu();
 
-				Control.prototype[sMethodName].apply(this, arguments);
-				if (oDialog) {
-					oDialog[sMethodName].apply(oDialog, arguments);
-				}
+			if (bIsSubmenu) {
+				const bRTL = Localization.getRTL(),
+					sPlacement = bRTL ? PlacementType.HorizontalPreferredLeft : PlacementType.HorizontalPreferredRight;
 
-				return this;
-			};
-		});
+				return sPlacement;
+			}
 
-		/**
-		 * Returns an array containing the selected menu items.
-		 * <b>Note:</b> Only items with <code>selected</code> property set that are members of <code>MenuItemGroup</code> with <code>ItemSelectionMode</code> property
-		 * set to {@link sap.ui.core.ItemSelectionMode.SingleSelect} or {@link sap.ui.unified.ItemSelectionMode.MultiSelect}> are taken into account.
-		 * @since 1.127.0
-		 * @public
-		 * @returns {Array} Array of all selected items
-		 */
-		Menu.prototype.getSelectedItems = function() {
-			return this._getItems().filter((oItem) => oItem.getSelected && oItem.getSelected() && oItem._getItemSelectionMode() !== ItemSelectionMode.None);
+			return PlacementType.VerticalPreferredBottom;
 		};
 
 		/**
-		 * Checks if the given property value is binding value and if not escapes it
-		 * @param {string} sValue property value to be checked
+		 * Set extra content to the popover.
 		 * @private
-		 * @returns {string} handled value
+		 * @param {HTMLElement} oDomRef the DOM ref to be added as extra content to the popover
 		 */
-		Menu.prototype._handleSettingsValue = function(sValue) {
-			if (typeof sValue !== "string") {
-				return sValue;
-			}
-			try {
-				ManagedObject.bindingParser(sValue);
-				return sValue;
-			} catch {
-				return ManagedObject.escapeSettingsValue(sValue);
-			}
+		Menu.prototype._setExtraContent = function(oDomRef) {
+			this._getPopover()._getPopup().setExtraContent([oDomRef]);
 		};
 
 		return Menu;