diff --git a/components/lib/menubar/Menubar.js b/components/lib/menubar/Menubar.js
index 0b901fd1f7..847fd9d2f2 100644
--- a/components/lib/menubar/Menubar.js
+++ b/components/lib/menubar/Menubar.js
@@ -356,7 +356,7 @@ export const Menubar = React.memo(
 
         const onEnterKey = (event) => {
             if (focusedItemInfo.index !== -1) {
-                const element = DomHandler.findSingle(rootMenuRef.current, `li[id="${`${focusedItemId}`}"]`);
+                const element = DomHandler.findSingle(rootMenuRef.current, `li[data-id="${`${focusedItemId}`}"]`);
                 const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]');
 
                 anchorElement ? anchorElement.click() : element && element.click();
@@ -483,7 +483,7 @@ export const Menubar = React.memo(
 
         const scrollInView = (index = -1) => {
             const id = index !== -1 ? `${idState}_${index}` : focusedItemId;
-            const element = DomHandler.findSingle(rootMenuRef.current, `li[id="${id}"]`);
+            const element = DomHandler.findSingle(rootMenuRef.current, `li[data-id="${id}"]`);
 
             if (element) {
                 element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
diff --git a/components/lib/menubar/MenubarSub.js b/components/lib/menubar/MenubarSub.js
index 2830a37905..87a12a0a51 100644
--- a/components/lib/menubar/MenubarSub.js
+++ b/components/lib/menubar/MenubarSub.js
@@ -63,10 +63,10 @@ export const MenubarSub = React.memo(
         };
 
         const getItemId = (processedItem) => {
-            if (processedItem.item && processedItem.item.id) {
-                return processedItem.item.id;
-            }
+            return processedItem.item?.id;
+        };
 
+        const getItemDataId = (processedItem) => {
             return `${props.id}_${processedItem.key}`;
         };
 
@@ -87,7 +87,7 @@ export const MenubarSub = React.memo(
         };
 
         const isItemFocused = (processedItem) => {
-            return props.focusedItemId === getItemId(processedItem);
+            return props.focusedItemId === getItemDataId(processedItem);
         };
 
         const isItemGroup = (processedItem) => {
@@ -106,8 +106,8 @@ export const MenubarSub = React.memo(
             const key = props.id + '_separator_' + index;
             const separatorProps = mergeProps(
                 {
-                    id: key,
                     key,
+                    'data-id': key,
                     className: cx('separator'),
                     role: 'separator'
                 },
@@ -150,7 +150,8 @@ export const MenubarSub = React.memo(
                 return null;
             }
 
-            const key = getItemId(processedItem);
+            const id = getItemId(processedItem);
+            const dataId = getItemDataId(processedItem);
             const active = isItemActive(processedItem);
             const focused = isItemFocused(processedItem);
             const disabled = isItemDisabled(processedItem) || false;
@@ -236,8 +237,9 @@ export const MenubarSub = React.memo(
 
             const menuitemProps = mergeProps(
                 {
-                    id: key,
-                    key,
+                    id,
+                    key: id,
+                    'data-id': dataId,
                     role: 'menuitem',
                     'aria-label': item.label,
                     'aria-disabled': disabled,
@@ -283,7 +285,7 @@ export const MenubarSub = React.memo(
                 onFocus: props.onFocus,
                 onBlur: props.onBlur,
                 onKeyDown: props.onKeyDown,
-                id: props.id,
+                'data-id': props.id,
                 tabIndex: tabIndex,
                 'aria-activedescendant': props.ariaActivedescendant,
                 style: props.style,