diff --git a/packages/web-components/src/components/masthead/cloud/cloud-masthead-composite.ts b/packages/web-components/src/components/masthead/cloud/cloud-masthead-composite.ts
index 5448927bdf7..c9de65acf04 100644
--- a/packages/web-components/src/components/masthead/cloud/cloud-masthead-composite.ts
+++ b/packages/web-components/src/components/masthead/cloud/cloud-masthead-composite.ts
@@ -89,23 +89,20 @@ class DDSCloudMastheadComposite extends DDSMastheadComposite {
    *  Render MegaMenu content
    *
    * @param sections menu section data object
+   * @param parentKey parent key
    */
   // eslint-disable-next-line class-methods-use-this
-  protected _renderMegaMenu(sections) {
+  protected _renderMegaMenu(sections, parentKey) {
     let viewAllLink;
     type menuItem = MastheadMenuItem & { itemKey: String };
     const sortedMenuItems: menuItem[] = [];
-    sections[0].menuItems?.forEach(item => {
+    sections[0].menuItems?.forEach((item, i) => {
       if (item.megaPanelViewAll) {
         viewAllLink = item;
         return viewAllLink;
       }
-      const title = item.title
-        .replace(/[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/g, '')
-        .replace(/ +/g, '-')
-        .toLowerCase();
 
-      return sortedMenuItems.push({ ...item, itemKey: title });
+      return sortedMenuItems.push({ ...item, itemKey: `${parentKey}-${i}` });
     });
 
     return html`
@@ -114,10 +111,10 @@ class DDSCloudMastheadComposite extends DDSMastheadComposite {
           view-all-href="${ifNonNull(viewAllLink?.url)}"
           view-all-title="${ifNonNull(viewAllLink?.title)}"
         >
-          <dds-cloud-megamenu-tabs value="${sortedMenuItems[0]?.itemKey}">
+          <dds-cloud-megamenu-tabs value="${sortedMenuItems[0]?.title}">
             ${sortedMenuItems.map(item => {
               return html`
-                <dds-cloud-megamenu-tab id="tab-${item.itemKey}" target="panel-${item.itemKey}" value="${item.itemKey}"
+                <dds-cloud-megamenu-tab id="tab-${item.itemKey}" target="panel-${item.itemKey}" value="${item.title}"
                   >${item.title}</dds-cloud-megamenu-tab
                 >
               `;
diff --git a/packages/web-components/src/components/masthead/masthead-composite.ts b/packages/web-components/src/components/masthead/masthead-composite.ts
index 98ae92e62ff..7e82f3d7d2b 100644
--- a/packages/web-components/src/components/masthead/masthead-composite.ts
+++ b/packages/web-components/src/components/masthead/masthead-composite.ts
@@ -158,9 +158,10 @@ class DDSMastheadComposite extends LitElement {
    *  Render MegaMenu content
    *
    * @param sections menu section data object
+   * @param _parentKey parent menu key (used for the cloud-masthead-composite component)
    */
-  // eslint-disable-next-line class-methods-use-this
-  protected _renderMegaMenu(sections) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  protected _renderMegaMenu(sections, _parentKey) {
     const { viewAllLink, highlightedItems, menu } = this._getHighlightedMenuItems(sections);
 
     const hasHighlights = highlightedItems.length !== 0;
@@ -412,7 +413,7 @@ class DDSMastheadComposite extends LitElement {
             const selected = selectedMenuItem && titleEnglish === selectedMenuItem;
             let sections;
             if (link.hasMegapanel) {
-              sections = this._renderMegaMenu(menuSections);
+              sections = this._renderMegaMenu(menuSections, i);
             } else {
               sections = menuSections
                 // eslint-disable-next-line no-use-before-define