diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
index d6db12329e3..505170a4064 100644
--- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
@@ -2117,7 +2117,7 @@ exports[`Storyshots Components|CTA section Default 1`] = `
 </Container>
 `;
 
-exports[`Storyshots Components|CTA section With Content Items 1`] = `
+exports[`Storyshots Components|CTA section With content items 1`] = `
 <Container
   parameters={
     Object {
@@ -6552,7 +6552,7 @@ exports[`Storyshots Components|Card group With CTA 1`] = `
 </Container>
 `;
 
-exports[`Storyshots Components|Card group With Images 1`] = `
+exports[`Storyshots Components|Card group With images 1`] = `
 <Container
   parameters={
     Object {
@@ -8055,7 +8055,7 @@ exports[`Storyshots Components|Card group With Images 1`] = `
 </Container>
 `;
 
-exports[`Storyshots Components|Card group With Images And CTA 1`] = `
+exports[`Storyshots Components|Card group With images and CTA 1`] = `
 <Container
   parameters={
     Object {
@@ -16049,7 +16049,7 @@ exports[`Storyshots Components|Content block cards Default 1`] = `
 </Container>
 `;
 
-exports[`Storyshots Components|Content block cards With Images 1`] = `
+exports[`Storyshots Components|Content block cards With images 1`] = `
 <Container
   parameters={
     Object {
@@ -17868,7 +17868,7 @@ exports[`Storyshots Components|Content block cards With Images 1`] = `
 </Container>
 `;
 
-exports[`Storyshots Components|Content block cards With Videos 1`] = `
+exports[`Storyshots Components|Content block cards With videos 1`] = `
 <Container
   parameters={
     Object {
@@ -22449,7 +22449,7 @@ dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequ
 </Container>
 `;
 
-exports[`Storyshots Components|Content block media With Link list 1`] = `
+exports[`Storyshots Components|Content block media With link list 1`] = `
 <Container
   parameters={
     Object {
@@ -37545,7 +37545,7 @@ exports[`Storyshots Components|Content item horizontal Default 1`] = `
 </Container>
 `;
 
-exports[`Storyshots Components|Content item horizontal With Media 1`] = `
+exports[`Storyshots Components|Content item horizontal With media 1`] = `
 <Container
   parameters={
     Object {
@@ -37636,7 +37636,7 @@ exports[`Storyshots Components|Content item horizontal With Media 1`] = `
 </Container>
 `;
 
-exports[`Storyshots Components|Content item horizontal With Thumbnail 1`] = `
+exports[`Storyshots Components|Content item horizontal With thumbnail 1`] = `
 <Container
   parameters={
     Object {
@@ -100874,7 +100874,7 @@ exports[`Storyshots Components|Footer Default 1`] = `
 </Container>
 `;
 
-exports[`Storyshots Components|Footer Default Language Only 1`] = `
+exports[`Storyshots Components|Footer Default language only 1`] = `
 <Container
   parameters={
     Object {
@@ -102696,7 +102696,7 @@ exports[`Storyshots Components|Footer Default Language Only 1`] = `
 </Container>
 `;
 
-exports[`Storyshots Components|Footer Default With Adjunct Legal Links 1`] = `
+exports[`Storyshots Components|Footer Default with adjunct legal links 1`] = `
 <Container
   parameters={
     Object {
@@ -103121,7 +103121,7 @@ exports[`Storyshots Components|Footer Micro 1`] = `
 </Container>
 `;
 
-exports[`Storyshots Components|Footer Micro Language Only 1`] = `
+exports[`Storyshots Components|Footer Micro language only 1`] = `
 <Container
   parameters={
     Object {
@@ -104166,7 +104166,7 @@ exports[`Storyshots Components|Footer Short 1`] = `
 </Container>
 `;
 
-exports[`Storyshots Components|Footer Short Language Only 1`] = `
+exports[`Storyshots Components|Footer Short language only 1`] = `
 <Container
   parameters={
     Object {
@@ -106002,7 +106002,7 @@ exports[`Storyshots Components|Footer Short Language Only 1`] = `
 </Container>
 `;
 
-exports[`Storyshots Components|Footer Short With Adjunct Legal Links 1`] = `
+exports[`Storyshots Components|Footer Short with adjunct legal links 1`] = `
 <Container
   parameters={
     Object {
@@ -113028,7 +113028,7 @@ exports[`Storyshots Components|Lightbox media viewer Default 1`] = `
 </Container>
 `;
 
-exports[`Storyshots Components|Lightbox media viewer Embedded Video Player 1`] = `
+exports[`Storyshots Components|Lightbox media viewer Embedded video player 1`] = `
 <Container
   parameters={
     Object {
@@ -114310,7 +114310,7 @@ exports[`Storyshots Components|Link list Default 1`] = `
 </Container>
 `;
 
-exports[`Storyshots Components|Link list End Of Section 1`] = `
+exports[`Storyshots Components|Link list End of section 1`] = `
 <Container
   parameters={
     Object {
@@ -115924,7 +115924,7 @@ exports[`Storyshots Components|Link list Vertical 1`] = `
 </Container>
 `;
 
-exports[`Storyshots Components|Link list Vertical With Cards 1`] = `
+exports[`Storyshots Components|Link list Vertical with cards 1`] = `
 <Container
   parameters={
     Object {
@@ -119032,7 +119032,7 @@ exports[`Storyshots Components|Masthead Default 1`] = `
 </Container>
 `;
 
-exports[`Storyshots Components|Masthead Search Open Onload 1`] = `
+exports[`Storyshots Components|Masthead Search open on load 1`] = `
 <Container
   parameters={
     Object {
@@ -119952,11 +119952,11 @@ exports[`Storyshots Components|Masthead Search Open Onload 1`] = `
 </Container>
 `;
 
-exports[`Storyshots Components|Masthead With Alternate Logo And Tooltip 1`] = `
+exports[`Storyshots Components|Masthead With L1 1`] = `
 <Container
   parameters={
     Object {
-      "__id": "components-masthead--with-alternate-logo-and-tooltip",
+      "__id": "components-masthead--with-l-1",
       "component": undefined,
       "docs": Object {},
       "fileName": "./components/Masthead/__stories__/Masthead.stories.js",
@@ -119996,35 +119996,325 @@ exports[`Storyshots Components|Masthead With Alternate Logo And Tooltip 1`] = `
         "Masthead": Object {
           "hasProfile": true,
           "hasSearch": true,
-          "mastheadLogo": Object {
-            "allowlist": Array [],
-            "denylist": Array [],
-            "end": "May 5, 2021 0:00:01",
-            "path": "/",
-            "svg": "<svg width=\\"81px\\" height=\\"33px\\" viewBox=\\"0 0 81 33\\" xmlns=\\"http://www.w3.org/2000/svg\\" version=\\"1.1\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\">
-      <title>Artboard</title>
-      <defs>
-        <path d=\\"M67.716,0.0192 L66.982,2.1532 L80.733,2.1532 L80.733,0.0192 L67.716,0.0192 Z M44.624,0.0192 L44.625,2.1532 L58.392,2.1532 L57.64,0.0192 L44.624,0.0192 Z M17.011,0.0192 L17.011,2.1532 L39.738,2.1532 C38.216,0.8282 36.189,0.0192 33.961,0.0192 L33.961,0.0192 L17.011,0.0192 Z M0.019,2.1532 L14.887,2.1532 L14.887,0.0192 L0.019,0.0192 L0.019,2.1532 Z M66.246,4.2862 L65.479,6.4192 L80.733,6.4192 L80.733,4.2862 L66.246,4.2862 Z M44.624,4.2862 L44.625,6.4192 L59.87,6.4192 L59.132,4.2862 L44.624,4.2862 Z M17.011,4.2862 L17.011,6.4192 L41.863,6.4192 C41.672,5.6612 41.365,4.9442 40.97,4.2862 L40.97,4.2862 L17.011,4.2862 Z M0.019,6.4192 L14.887,6.4192 L14.887,4.2862 L0.019,4.2862 L0.019,6.4192 Z M64.761,8.5532 L64.009,10.6862 L76.485,10.6862 L76.485,8.5532 L64.761,8.5532 Z M48.872,8.5532 L48.872,10.6862 L61.354,10.6862 L60.602,8.5532 L48.872,8.5532 Z M34.004,8.5532 L34.004,10.6862 L41.565,10.6862 C41.756,10.0052 41.863,9.2912 41.863,8.5532 L41.863,8.5532 L34.004,8.5532 Z M21.259,10.6862 L27.632,10.6862 L27.632,8.5532 L21.259,8.5532 L21.259,10.6862 Z M4.267,10.6862 L10.639,10.6862 L10.639,8.5532 L4.267,8.5532 L4.267,10.6862 Z M63.273,12.8192 L62.679,14.5432 L62.084,12.8192 L48.872,12.8192 L48.872,14.9532 L55.244,14.9532 L55.244,12.9912 L55.945,14.9532 L69.39,14.9532 L70.113,12.9912 L70.113,14.9532 L76.485,14.9532 L76.485,12.8192 L63.273,12.8192 Z M21.259,12.8192 L21.259,14.9532 L38.953,14.9532 C39.685,14.3502 40.316,13.6292 40.801,12.8192 L40.801,12.8192 L21.259,12.8192 Z M4.267,14.9532 L10.639,14.9532 L10.639,12.8192 L4.267,12.8192 L4.267,14.9532 Z M70.113,19.2182 L76.485,19.2182 L76.485,17.0852 L70.113,17.0852 L70.113,19.2182 Z M56.82,17.0862 L57.644,19.2182 L67.691,19.2182 L68.522,17.0862 L56.82,17.0862 Z M48.872,19.2182 L55.244,19.2182 L55.244,17.0852 L48.872,17.0852 L48.872,19.2182 Z M21.259,17.0862 L21.259,19.2182 L40.801,19.2182 C40.316,18.4092 39.685,17.6882 38.953,17.0862 L38.953,17.0862 L21.259,17.0862 Z M4.267,19.2182 L10.639,19.2182 L10.639,17.0852 L4.267,17.0852 L4.267,19.2182 Z M70.113,23.4852 L76.485,23.4852 L76.485,21.3522 L70.113,21.3522 L70.113,23.4852 Z M58.494,21.3522 L59.334,23.4852 L66.023,23.4852 L66.857,21.3522 L58.494,21.3522 Z M48.872,23.4852 L55.244,23.4852 L55.244,21.3522 L48.872,21.3522 L48.872,23.4852 Z M34.004,21.3522 L34.004,23.4852 L41.863,23.4852 C41.863,22.7472 41.756,22.0322 41.565,21.3522 L41.565,21.3522 L34.004,21.3522 Z M21.259,23.4852 L27.632,23.4852 L27.632,21.3522 L21.259,21.3522 L21.259,23.4852 Z M4.267,23.4852 L10.639,23.4852 L10.639,21.3522 L4.267,21.3522 L4.267,23.4852 Z M70.113,27.7522 L80.733,27.7522 L80.733,25.6192 L70.113,25.6192 L70.113,27.7522 Z M60.169,25.6192 L61.001,27.7522 L64.363,27.7522 L65.191,25.6192 L60.169,25.6192 Z M44.624,27.7522 L55.244,27.7522 L55.244,25.6192 L44.624,25.6192 L44.624,27.7522 Z M17.011,25.6192 L17.011,27.7522 L40.97,27.7522 C41.365,27.0932 41.672,26.3772 41.863,25.6192 L41.863,25.6192 L17.011,25.6192 Z M0.019,27.7522 L14.887,27.7522 L14.887,25.6192 L0.019,25.6192 L0.019,27.7522 Z M70.113,32.0192 L80.733,32.0192 L80.733,29.8852 L70.113,29.8852 L70.113,32.0192 Z M61.833,29.8852 L62.676,32.0192 L63.53,29.8852 L61.833,29.8852 Z M44.624,32.0192 L55.244,32.0192 L55.244,29.8852 L44.624,29.8852 L44.624,32.0192 Z M17.011,29.8852 L17.011,32.0192 L33.961,32.0192 C36.205,32.0192 38.216,31.2102 39.738,29.8852 L39.738,29.8852 L17.011,29.8852 Z M0.019,32.0192 L14.887,32.0192 L14.887,29.8852 L0.019,29.8852 L0.019,32.0192 Z\\" id=\\"path-1\\"></path>
-      </defs>
-      <g id=\\"Artboard\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\">
-        <g id=\\"Group-7\\">
-          <mask id=\\"mask-2\\" fill=\\"white\\">
-            <use xlink:href=\\"#path-1\\"></use>
-          </mask>
-          <g id=\\"Clip-2\\"></g>
-          <polygon id=\\"Fill-1\\" fill=\\"#EC1D24\\" mask=\\"url(#mask-2)\\" points=\\"-1 33.0382 86.8 33.0382 86.8 -0.9998 -1 -0.9998\\"></polygon>
-          <polygon id=\\"Fill-3\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 3.3942 86.8 3.3942 86.8 -0.9998 -1 -0.9998\\"></polygon>
-          <polygon id=\\"Fill-4\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 11.8162 86.8 11.8162 86.8 7.4222 -1 7.4222\\"></polygon>
-          <polygon id=\\"Fill-5\\" fill=\\"#00A550\\" mask=\\"url(#mask-2)\\" points=\\"-1 20.3502 86.8 20.3502 86.8 15.9562 -1 15.9562\\"></polygon>
-          <polygon id=\\"Fill-6\\" fill=\\"#FFF100\\" mask=\\"url(#mask-2)\\" points=\\"-1 28.8832 86.8 28.8832 86.8 24.4892 -1 24.4892\\"></polygon>
-        </g>
-      </g>
-      </svg>",
-            "tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+          "mastheadL1Data": Object {
+            "navigationL1": Array [
+              Object {
+                "hasMegapanel": false,
+                "hasMenu": true,
+                "menuSections": Array [
+                  Object {
+                    "heading": "Explore",
+                    "menuItems": Array [
+                      Object {
+                        "megapanelContent": Object {
+                          "description": "",
+                          "feature": Object {
+                            "heading": "",
+                            "imageUrl": "",
+                            "linkTitle": "",
+                            "linkUrl": "",
+                          },
+                          "headingTitle": "",
+                          "headingUrl": "",
+                          "quickLinks": Object {
+                            "links": Array [
+                              Object {
+                                "title": "Subnav 1",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 2",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 3",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 4",
+                                "url": "",
+                              },
+                            ],
+                            "title": "Title",
+                          },
+                        },
+                        "title": "Link 1",
+                        "url": "",
+                      },
+                      Object {
+                        "title": "Menu dropdown item with extra long text",
+                        "url": "",
+                      },
+                    ],
+                  },
+                ],
+                "title": "Lorem ipsum dolor sit amet",
+                "titleEnglish": "Lorem ipsum dolor sit amet",
+                "url": "",
+              },
+              Object {
+                "hasMenu": true,
+                "menuSections": Array [
+                  Object {
+                    "heading": "",
+                    "menuItems": Array [
+                      Object {
+                        "megapanelContent": Object {
+                          "description": "Reimagine your business, designing and building the platforms necessary for growth",
+                          "feature": Object {
+                            "heading": "IBM Services, your Digital Reinvention â„¢ partner",
+                            "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
+                            "linkTitle": "Explore all our business consulting and technology services",
+                            "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
+                          },
+                          "headingTitle": "Services",
+                          "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
+                          "quickLinks": Object {
+                            "links": Array [
+                              Object {
+                                "title": "Subnav 1",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 2",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 3",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 4",
+                                "url": "",
+                              },
+                            ],
+                            "title": "Quicklinks",
+                          },
+                        },
+                        "title": "Link 2",
+                        "url": "",
+                      },
+                      Object {
+                        "megapanelContent": Object {
+                          "description": "Funding options that fit your business",
+                          "feature": Object {
+                            "heading": "Cloud financing strategies that work for your business",
+                            "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
+                            "linkTitle": "Committed to cloud? Make the most of your cash flow.",
+                            "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
+                          },
+                          "headingTitle": "Financing",
+                          "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
+                          "quickLinks": Object {
+                            "links": Array [
+                              Object {
+                                "title": "Subnav 1",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 2",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 3",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 4",
+                                "url": "",
+                              },
+                            ],
+                            "title": "Quicklinks",
+                          },
+                        },
+                        "title": "Financing",
+                        "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
+                      },
+                    ],
+                  },
+                ],
+                "title": "Consectetur adipiscing elit",
+                "titleEnglish": "Consectetur adipiscing elit",
+                "url": "",
+              },
+              Object {
+                "hasMegapanel": false,
+                "hasMenu": false,
+                "menuSections": Array [],
+                "title": "Nulla quis sem at nibh elementum imperdiet",
+                "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
+                "url": "https://www.ibm.com/industries?lnk=min",
+              },
+              Object {
+                "hasMegapanel": false,
+                "hasMenu": true,
+                "menuSections": Array [
+                  Object {
+                    "heading": "",
+                    "menuItems": Array [
+                      Object {
+                        "megapanelContent": Object {
+                          "description": "",
+                          "feature": Object {
+                            "heading": "IBM Developer newsletters",
+                            "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
+                            "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
+                            "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
+                          },
+                          "headingTitle": "IBM Developer",
+                          "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
+                          "quickLinks": Object {
+                            "links": Array [
+                              Object {
+                                "title": "Subnav 1",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 2",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 3",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 4",
+                                "url": "",
+                              },
+                            ],
+                            "title": "Quicklinks",
+                          },
+                        },
+                        "title": "IBM Developer",
+                        "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
+                      },
+                      Object {
+                        "megapanelContent": Object {
+                          "description": "",
+                          "feature": Object {
+                            "heading": "Blockchain 101",
+                            "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
+                            "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
+                            "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
+                          },
+                          "headingTitle": "Blockchain",
+                          "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
+                          "quickLinks": Object {
+                            "links": Array [
+                              Object {
+                                "title": "Subnav 1",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 2",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 3",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 4",
+                                "url": "",
+                              },
+                            ],
+                            "title": "Quicklinks",
+                          },
+                        },
+                        "title": "Blockchain",
+                        "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
+                      },
+                      Object {
+                        "megapanelContent": Object {
+                          "description": "",
+                          "feature": Object {
+                            "heading": "Make sense of Kubernetes",
+                            "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
+                            "linkTitle": "Deploy a simple Python application with Kubernetes",
+                            "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
+                          },
+                          "headingTitle": "Containers",
+                          "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
+                          "quickLinks": Object {
+                            "links": Array [
+                              Object {
+                                "title": "Code patterns",
+                                "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                              },
+                              Object {
+                                "title": "Tutorials",
+                                "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                              },
+                              Object {
+                                "title": "Events",
+                                "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                              },
+                            ],
+                            "title": "Quicklinks",
+                          },
+                        },
+                        "title": "Containers",
+                        "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
+                      },
+                      Object {
+                        "megapanelContent": Object {
+                          "description": "",
+                          "feature": Object {
+                            "heading": "Train your data no matter where it lives",
+                            "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
+                            "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
+                            "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
+                          },
+                          "headingTitle": "Analytics",
+                          "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                          "quickLinks": Object {
+                            "links": Array [
+                              Object {
+                                "title": "Code patterns",
+                                "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                              },
+                              Object {
+                                "title": "Tutorials",
+                                "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                              },
+                              Object {
+                                "title": "Events",
+                                "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                              },
+                              Object {
+                                "title": "Developer community",
+                                "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
+                              },
+                            ],
+                            "title": "Quicklinks",
+                          },
+                        },
+                        "title": "Analytics",
+                        "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                      },
+                    ],
+                  },
+                ],
+                "title": "Fusce nec tellus sed augue semper porta",
+                "titleEnglish": "Fusce nec tellus sed augue semper porta",
+                "url": "",
+              },
+              Object {
+                "hasMegapanel": false,
+                "hasMenu": false,
+                "menuSections": Array [],
+                "title": "Sed cursus ante dapibus diam",
+                "titleEnglish": "Sed cursus ante dapibus diam",
+                "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
+              },
+            ],
           },
-          "navigation": "default",
           "placeHolderText": "Search all of IBM",
-          "selectedMenuItem": "Services & Consulting",
+          "platform": Object {
+            "name": "Stock Charts",
+            "url": "https://www.example.com",
+          },
+          "selectedMenuItem": "Lorem ipsum dolor sit amet",
         },
       },
       "subcomponents": undefined,
@@ -120037,1880 +120327,700 @@ exports[`Storyshots Components|Masthead With Alternate Logo And Tooltip 1`] = `
     data-floating-menu-container=""
     role="main"
   >
-    <Masthead
-      hasProfile={true}
-      hasSearch={true}
-      initialSearchTerm=""
-      mastheadL1Data={null}
-      mastheadLogo={
+    <Default
+      parameters={
         Object {
-          "allowlist": Array [],
-          "denylist": Array [],
-          "end": "May 5, 2021 0:00:01",
-          "path": "/",
-          "svg": "<svg width=\\"81px\\" height=\\"33px\\" viewBox=\\"0 0 81 33\\" xmlns=\\"http://www.w3.org/2000/svg\\" version=\\"1.1\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\">
-      <title>Artboard</title>
-      <defs>
-        <path d=\\"M67.716,0.0192 L66.982,2.1532 L80.733,2.1532 L80.733,0.0192 L67.716,0.0192 Z M44.624,0.0192 L44.625,2.1532 L58.392,2.1532 L57.64,0.0192 L44.624,0.0192 Z M17.011,0.0192 L17.011,2.1532 L39.738,2.1532 C38.216,0.8282 36.189,0.0192 33.961,0.0192 L33.961,0.0192 L17.011,0.0192 Z M0.019,2.1532 L14.887,2.1532 L14.887,0.0192 L0.019,0.0192 L0.019,2.1532 Z M66.246,4.2862 L65.479,6.4192 L80.733,6.4192 L80.733,4.2862 L66.246,4.2862 Z M44.624,4.2862 L44.625,6.4192 L59.87,6.4192 L59.132,4.2862 L44.624,4.2862 Z M17.011,4.2862 L17.011,6.4192 L41.863,6.4192 C41.672,5.6612 41.365,4.9442 40.97,4.2862 L40.97,4.2862 L17.011,4.2862 Z M0.019,6.4192 L14.887,6.4192 L14.887,4.2862 L0.019,4.2862 L0.019,6.4192 Z M64.761,8.5532 L64.009,10.6862 L76.485,10.6862 L76.485,8.5532 L64.761,8.5532 Z M48.872,8.5532 L48.872,10.6862 L61.354,10.6862 L60.602,8.5532 L48.872,8.5532 Z M34.004,8.5532 L34.004,10.6862 L41.565,10.6862 C41.756,10.0052 41.863,9.2912 41.863,8.5532 L41.863,8.5532 L34.004,8.5532 Z M21.259,10.6862 L27.632,10.6862 L27.632,8.5532 L21.259,8.5532 L21.259,10.6862 Z M4.267,10.6862 L10.639,10.6862 L10.639,8.5532 L4.267,8.5532 L4.267,10.6862 Z M63.273,12.8192 L62.679,14.5432 L62.084,12.8192 L48.872,12.8192 L48.872,14.9532 L55.244,14.9532 L55.244,12.9912 L55.945,14.9532 L69.39,14.9532 L70.113,12.9912 L70.113,14.9532 L76.485,14.9532 L76.485,12.8192 L63.273,12.8192 Z M21.259,12.8192 L21.259,14.9532 L38.953,14.9532 C39.685,14.3502 40.316,13.6292 40.801,12.8192 L40.801,12.8192 L21.259,12.8192 Z M4.267,14.9532 L10.639,14.9532 L10.639,12.8192 L4.267,12.8192 L4.267,14.9532 Z M70.113,19.2182 L76.485,19.2182 L76.485,17.0852 L70.113,17.0852 L70.113,19.2182 Z M56.82,17.0862 L57.644,19.2182 L67.691,19.2182 L68.522,17.0862 L56.82,17.0862 Z M48.872,19.2182 L55.244,19.2182 L55.244,17.0852 L48.872,17.0852 L48.872,19.2182 Z M21.259,17.0862 L21.259,19.2182 L40.801,19.2182 C40.316,18.4092 39.685,17.6882 38.953,17.0862 L38.953,17.0862 L21.259,17.0862 Z M4.267,19.2182 L10.639,19.2182 L10.639,17.0852 L4.267,17.0852 L4.267,19.2182 Z M70.113,23.4852 L76.485,23.4852 L76.485,21.3522 L70.113,21.3522 L70.113,23.4852 Z M58.494,21.3522 L59.334,23.4852 L66.023,23.4852 L66.857,21.3522 L58.494,21.3522 Z M48.872,23.4852 L55.244,23.4852 L55.244,21.3522 L48.872,21.3522 L48.872,23.4852 Z M34.004,21.3522 L34.004,23.4852 L41.863,23.4852 C41.863,22.7472 41.756,22.0322 41.565,21.3522 L41.565,21.3522 L34.004,21.3522 Z M21.259,23.4852 L27.632,23.4852 L27.632,21.3522 L21.259,21.3522 L21.259,23.4852 Z M4.267,23.4852 L10.639,23.4852 L10.639,21.3522 L4.267,21.3522 L4.267,23.4852 Z M70.113,27.7522 L80.733,27.7522 L80.733,25.6192 L70.113,25.6192 L70.113,27.7522 Z M60.169,25.6192 L61.001,27.7522 L64.363,27.7522 L65.191,25.6192 L60.169,25.6192 Z M44.624,27.7522 L55.244,27.7522 L55.244,25.6192 L44.624,25.6192 L44.624,27.7522 Z M17.011,25.6192 L17.011,27.7522 L40.97,27.7522 C41.365,27.0932 41.672,26.3772 41.863,25.6192 L41.863,25.6192 L17.011,25.6192 Z M0.019,27.7522 L14.887,27.7522 L14.887,25.6192 L0.019,25.6192 L0.019,27.7522 Z M70.113,32.0192 L80.733,32.0192 L80.733,29.8852 L70.113,29.8852 L70.113,32.0192 Z M61.833,29.8852 L62.676,32.0192 L63.53,29.8852 L61.833,29.8852 Z M44.624,32.0192 L55.244,32.0192 L55.244,29.8852 L44.624,29.8852 L44.624,32.0192 Z M17.011,29.8852 L17.011,32.0192 L33.961,32.0192 C36.205,32.0192 38.216,31.2102 39.738,29.8852 L39.738,29.8852 L17.011,29.8852 Z M0.019,32.0192 L14.887,32.0192 L14.887,29.8852 L0.019,29.8852 L0.019,32.0192 Z\\" id=\\"path-1\\"></path>
-      </defs>
-      <g id=\\"Artboard\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\">
-        <g id=\\"Group-7\\">
-          <mask id=\\"mask-2\\" fill=\\"white\\">
-            <use xlink:href=\\"#path-1\\"></use>
-          </mask>
-          <g id=\\"Clip-2\\"></g>
-          <polygon id=\\"Fill-1\\" fill=\\"#EC1D24\\" mask=\\"url(#mask-2)\\" points=\\"-1 33.0382 86.8 33.0382 86.8 -0.9998 -1 -0.9998\\"></polygon>
-          <polygon id=\\"Fill-3\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 3.3942 86.8 3.3942 86.8 -0.9998 -1 -0.9998\\"></polygon>
-          <polygon id=\\"Fill-4\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 11.8162 86.8 11.8162 86.8 7.4222 -1 7.4222\\"></polygon>
-          <polygon id=\\"Fill-5\\" fill=\\"#00A550\\" mask=\\"url(#mask-2)\\" points=\\"-1 20.3502 86.8 20.3502 86.8 15.9562 -1 15.9562\\"></polygon>
-          <polygon id=\\"Fill-6\\" fill=\\"#FFF100\\" mask=\\"url(#mask-2)\\" points=\\"-1 28.8832 86.8 28.8832 86.8 24.4892 -1 24.4892\\"></polygon>
-        </g>
-      </g>
-      </svg>",
-          "tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+          "__id": "components-masthead--with-l-1",
+          "component": undefined,
+          "docs": Object {},
+          "fileName": "./components/Masthead/__stories__/Masthead.stories.js",
+          "framework": "react",
+          "knobs": Object {
+            "Masthead": [Function],
+            "escapeHTML": false,
+          },
+          "options": Object {
+            "name": "Carbon for IBM.com React",
+            "storySort": [Function],
+            "theme": Object {
+              "appBg": "#F6F9FC",
+              "appBorderColor": "rgba(0,0,0,.1)",
+              "appBorderRadius": 4,
+              "appContentBg": "#FFFFFF",
+              "barBg": "#FFFFFF",
+              "barSelectedColor": "#1EA7FD",
+              "barTextColor": "#999999",
+              "base": "light",
+              "brandTitle": "Carbon for IBM.com React v1.24.0-rc.1",
+              "brandUrl": "https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/react",
+              "colorPrimary": "#FF4785",
+              "colorSecondary": "#1EA7FD",
+              "fontBase": "\\"IBM Plex Sans\\", \\"Helvetica Neue\\", Arial, sans-serif",
+              "fontCode": "\\"IBM Plex Mono\\", Menlo, \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace",
+              "inputBg": "#FFFFFF",
+              "inputBorder": "rgba(0,0,0,.1)",
+              "inputBorderRadius": 4,
+              "inputTextColor": "#333333",
+              "textColor": "#333333",
+              "textInverseColor": "#FFFFFF",
+            },
+            "url": "https://github.com/carbon-design-system/carbon-for-ibm-dotcom",
+          },
+          "props": Object {
+            "Masthead": Object {
+              "hasProfile": true,
+              "hasSearch": true,
+              "mastheadL1Data": Object {
+                "navigationL1": Array [
+                  Object {
+                    "hasMegapanel": false,
+                    "hasMenu": true,
+                    "menuSections": Array [
+                      Object {
+                        "heading": "Explore",
+                        "menuItems": Array [
+                          Object {
+                            "megapanelContent": Object {
+                              "description": "",
+                              "feature": Object {
+                                "heading": "",
+                                "imageUrl": "",
+                                "linkTitle": "",
+                                "linkUrl": "",
+                              },
+                              "headingTitle": "",
+                              "headingUrl": "",
+                              "quickLinks": Object {
+                                "links": Array [
+                                  Object {
+                                    "title": "Subnav 1",
+                                    "url": "",
+                                  },
+                                  Object {
+                                    "title": "Subnav 2",
+                                    "url": "",
+                                  },
+                                  Object {
+                                    "title": "Subnav 3",
+                                    "url": "",
+                                  },
+                                  Object {
+                                    "title": "Subnav 4",
+                                    "url": "",
+                                  },
+                                ],
+                                "title": "Title",
+                              },
+                            },
+                            "title": "Link 1",
+                            "url": "",
+                          },
+                          Object {
+                            "title": "Menu dropdown item with extra long text",
+                            "url": "",
+                          },
+                        ],
+                      },
+                    ],
+                    "title": "Lorem ipsum dolor sit amet",
+                    "titleEnglish": "Lorem ipsum dolor sit amet",
+                    "url": "",
+                  },
+                  Object {
+                    "hasMenu": true,
+                    "menuSections": Array [
+                      Object {
+                        "heading": "",
+                        "menuItems": Array [
+                          Object {
+                            "megapanelContent": Object {
+                              "description": "Reimagine your business, designing and building the platforms necessary for growth",
+                              "feature": Object {
+                                "heading": "IBM Services, your Digital Reinvention â„¢ partner",
+                                "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
+                                "linkTitle": "Explore all our business consulting and technology services",
+                                "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
+                              },
+                              "headingTitle": "Services",
+                              "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
+                              "quickLinks": Object {
+                                "links": Array [
+                                  Object {
+                                    "title": "Subnav 1",
+                                    "url": "",
+                                  },
+                                  Object {
+                                    "title": "Subnav 2",
+                                    "url": "",
+                                  },
+                                  Object {
+                                    "title": "Subnav 3",
+                                    "url": "",
+                                  },
+                                  Object {
+                                    "title": "Subnav 4",
+                                    "url": "",
+                                  },
+                                ],
+                                "title": "Quicklinks",
+                              },
+                            },
+                            "title": "Link 2",
+                            "url": "",
+                          },
+                          Object {
+                            "megapanelContent": Object {
+                              "description": "Funding options that fit your business",
+                              "feature": Object {
+                                "heading": "Cloud financing strategies that work for your business",
+                                "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
+                                "linkTitle": "Committed to cloud? Make the most of your cash flow.",
+                                "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
+                              },
+                              "headingTitle": "Financing",
+                              "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
+                              "quickLinks": Object {
+                                "links": Array [
+                                  Object {
+                                    "title": "Subnav 1",
+                                    "url": "",
+                                  },
+                                  Object {
+                                    "title": "Subnav 2",
+                                    "url": "",
+                                  },
+                                  Object {
+                                    "title": "Subnav 3",
+                                    "url": "",
+                                  },
+                                  Object {
+                                    "title": "Subnav 4",
+                                    "url": "",
+                                  },
+                                ],
+                                "title": "Quicklinks",
+                              },
+                            },
+                            "title": "Financing",
+                            "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
+                          },
+                        ],
+                      },
+                    ],
+                    "title": "Consectetur adipiscing elit",
+                    "titleEnglish": "Consectetur adipiscing elit",
+                    "url": "",
+                  },
+                  Object {
+                    "hasMegapanel": false,
+                    "hasMenu": false,
+                    "menuSections": Array [],
+                    "title": "Nulla quis sem at nibh elementum imperdiet",
+                    "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
+                    "url": "https://www.ibm.com/industries?lnk=min",
+                  },
+                  Object {
+                    "hasMegapanel": false,
+                    "hasMenu": true,
+                    "menuSections": Array [
+                      Object {
+                        "heading": "",
+                        "menuItems": Array [
+                          Object {
+                            "megapanelContent": Object {
+                              "description": "",
+                              "feature": Object {
+                                "heading": "IBM Developer newsletters",
+                                "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
+                                "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
+                                "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
+                              },
+                              "headingTitle": "IBM Developer",
+                              "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
+                              "quickLinks": Object {
+                                "links": Array [
+                                  Object {
+                                    "title": "Subnav 1",
+                                    "url": "",
+                                  },
+                                  Object {
+                                    "title": "Subnav 2",
+                                    "url": "",
+                                  },
+                                  Object {
+                                    "title": "Subnav 3",
+                                    "url": "",
+                                  },
+                                  Object {
+                                    "title": "Subnav 4",
+                                    "url": "",
+                                  },
+                                ],
+                                "title": "Quicklinks",
+                              },
+                            },
+                            "title": "IBM Developer",
+                            "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
+                          },
+                          Object {
+                            "megapanelContent": Object {
+                              "description": "",
+                              "feature": Object {
+                                "heading": "Blockchain 101",
+                                "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
+                                "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
+                                "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
+                              },
+                              "headingTitle": "Blockchain",
+                              "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
+                              "quickLinks": Object {
+                                "links": Array [
+                                  Object {
+                                    "title": "Subnav 1",
+                                    "url": "",
+                                  },
+                                  Object {
+                                    "title": "Subnav 2",
+                                    "url": "",
+                                  },
+                                  Object {
+                                    "title": "Subnav 3",
+                                    "url": "",
+                                  },
+                                  Object {
+                                    "title": "Subnav 4",
+                                    "url": "",
+                                  },
+                                ],
+                                "title": "Quicklinks",
+                              },
+                            },
+                            "title": "Blockchain",
+                            "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
+                          },
+                          Object {
+                            "megapanelContent": Object {
+                              "description": "",
+                              "feature": Object {
+                                "heading": "Make sense of Kubernetes",
+                                "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
+                                "linkTitle": "Deploy a simple Python application with Kubernetes",
+                                "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
+                              },
+                              "headingTitle": "Containers",
+                              "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
+                              "quickLinks": Object {
+                                "links": Array [
+                                  Object {
+                                    "title": "Code patterns",
+                                    "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                                  },
+                                  Object {
+                                    "title": "Tutorials",
+                                    "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                                  },
+                                  Object {
+                                    "title": "Events",
+                                    "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                                  },
+                                ],
+                                "title": "Quicklinks",
+                              },
+                            },
+                            "title": "Containers",
+                            "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
+                          },
+                          Object {
+                            "megapanelContent": Object {
+                              "description": "",
+                              "feature": Object {
+                                "heading": "Train your data no matter where it lives",
+                                "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
+                                "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
+                                "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
+                              },
+                              "headingTitle": "Analytics",
+                              "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                              "quickLinks": Object {
+                                "links": Array [
+                                  Object {
+                                    "title": "Code patterns",
+                                    "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                                  },
+                                  Object {
+                                    "title": "Tutorials",
+                                    "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                                  },
+                                  Object {
+                                    "title": "Events",
+                                    "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                                  },
+                                  Object {
+                                    "title": "Developer community",
+                                    "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
+                                  },
+                                ],
+                                "title": "Quicklinks",
+                              },
+                            },
+                            "title": "Analytics",
+                            "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                          },
+                        ],
+                      },
+                    ],
+                    "title": "Fusce nec tellus sed augue semper porta",
+                    "titleEnglish": "Fusce nec tellus sed augue semper porta",
+                    "url": "",
+                  },
+                  Object {
+                    "hasMegapanel": false,
+                    "hasMenu": false,
+                    "menuSections": Array [],
+                    "title": "Sed cursus ante dapibus diam",
+                    "titleEnglish": "Sed cursus ante dapibus diam",
+                    "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
+                  },
+                ],
+              },
+              "placeHolderText": "Search all of IBM",
+              "platform": Object {
+                "name": "Stock Charts",
+                "url": "https://www.example.com",
+              },
+              "selectedMenuItem": "Lorem ipsum dolor sit amet",
+            },
+          },
+          "subcomponents": undefined,
         }
       }
-      navigation="default"
-      placeHolderText="Search all of IBM"
-      platform={null}
-      searchOpenOnload={false}
-      selectedMenuItem="Services & Consulting"
     >
-      <HeaderContainer
-        isSideNavExpanded={false}
-        render={[Function]}
-      >
-        <render
-          isSideNavExpanded={false}
-          onClickSideNavExpand={[Function]}
-        >
-          <div
-            className="bx--masthead "
-          >
-            <div
-              className="bx--masthead__l0"
-            >
-              <Header
-                aria-label="IBM"
-                data-autoid="dds--masthead"
-              >
-                <header
-                  aria-label="IBM"
-                  className="bx--header"
-                  data-autoid="dds--masthead"
-                >
-                  <SkipToContent
-                    href="#main-content"
-                    tabIndex="0"
-                  >
-                    <a
-                      className="bx--skip-to-content"
-                      href="#main-content"
-                      tabIndex="0"
-                    >
-                      Skip to main content
-                    </a>
-                  </SkipToContent>
-                  <HeaderMenuButton
-                    aria-label="Open menu"
-                    className=""
-                    data-autoid="dds--masthead-default-sidenav__l0-menu"
-                    isActive={false}
-                    onClick={[Function]}
-                  >
-                    <button
-                      aria-label="Open menu"
-                      className="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                      data-autoid="dds--masthead-default-sidenav__l0-menu"
-                      onClick={[Function]}
-                      title="Open menu"
-                      type="button"
-                    >
-                      <ForwardRef(Menu20)>
-                        <Icon
-                          fill="currentColor"
-                          height={20}
-                          preserveAspectRatio="xMidYMid meet"
-                          viewBox="0 0 20 20"
-                          width={20}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <svg
-                            aria-hidden={true}
-                            fill="currentColor"
-                            focusable="false"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                            />
-                          </svg>
-                        </Icon>
-                      </ForwardRef(Menu20)>
-                    </button>
-                  </HeaderMenuButton>
-                  <MastheadLeftNav
-                    backButtonText="Back"
-                    hasL1Data={false}
-                    isSideNavExpanded={false}
-                    mastheadLogo={
+      <Masthead
+        hasProfile={true}
+        hasSearch={true}
+        initialSearchTerm=""
+        mastheadL1Data={
+          Object {
+            "navigationL1": Array [
+              Object {
+                "hasMegapanel": false,
+                "hasMenu": true,
+                "menuSections": Array [
+                  Object {
+                    "heading": "Explore",
+                    "menuItems": Array [
                       Object {
-                        "allowlist": Array [],
-                        "denylist": Array [],
-                        "end": "May 5, 2021 0:00:01",
-                        "path": "/",
-                        "svg": "<svg width=\\"81px\\" height=\\"33px\\" viewBox=\\"0 0 81 33\\" xmlns=\\"http://www.w3.org/2000/svg\\" version=\\"1.1\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\">
-      <title>Artboard</title>
-      <defs>
-        <path d=\\"M67.716,0.0192 L66.982,2.1532 L80.733,2.1532 L80.733,0.0192 L67.716,0.0192 Z M44.624,0.0192 L44.625,2.1532 L58.392,2.1532 L57.64,0.0192 L44.624,0.0192 Z M17.011,0.0192 L17.011,2.1532 L39.738,2.1532 C38.216,0.8282 36.189,0.0192 33.961,0.0192 L33.961,0.0192 L17.011,0.0192 Z M0.019,2.1532 L14.887,2.1532 L14.887,0.0192 L0.019,0.0192 L0.019,2.1532 Z M66.246,4.2862 L65.479,6.4192 L80.733,6.4192 L80.733,4.2862 L66.246,4.2862 Z M44.624,4.2862 L44.625,6.4192 L59.87,6.4192 L59.132,4.2862 L44.624,4.2862 Z M17.011,4.2862 L17.011,6.4192 L41.863,6.4192 C41.672,5.6612 41.365,4.9442 40.97,4.2862 L40.97,4.2862 L17.011,4.2862 Z M0.019,6.4192 L14.887,6.4192 L14.887,4.2862 L0.019,4.2862 L0.019,6.4192 Z M64.761,8.5532 L64.009,10.6862 L76.485,10.6862 L76.485,8.5532 L64.761,8.5532 Z M48.872,8.5532 L48.872,10.6862 L61.354,10.6862 L60.602,8.5532 L48.872,8.5532 Z M34.004,8.5532 L34.004,10.6862 L41.565,10.6862 C41.756,10.0052 41.863,9.2912 41.863,8.5532 L41.863,8.5532 L34.004,8.5532 Z M21.259,10.6862 L27.632,10.6862 L27.632,8.5532 L21.259,8.5532 L21.259,10.6862 Z M4.267,10.6862 L10.639,10.6862 L10.639,8.5532 L4.267,8.5532 L4.267,10.6862 Z M63.273,12.8192 L62.679,14.5432 L62.084,12.8192 L48.872,12.8192 L48.872,14.9532 L55.244,14.9532 L55.244,12.9912 L55.945,14.9532 L69.39,14.9532 L70.113,12.9912 L70.113,14.9532 L76.485,14.9532 L76.485,12.8192 L63.273,12.8192 Z M21.259,12.8192 L21.259,14.9532 L38.953,14.9532 C39.685,14.3502 40.316,13.6292 40.801,12.8192 L40.801,12.8192 L21.259,12.8192 Z M4.267,14.9532 L10.639,14.9532 L10.639,12.8192 L4.267,12.8192 L4.267,14.9532 Z M70.113,19.2182 L76.485,19.2182 L76.485,17.0852 L70.113,17.0852 L70.113,19.2182 Z M56.82,17.0862 L57.644,19.2182 L67.691,19.2182 L68.522,17.0862 L56.82,17.0862 Z M48.872,19.2182 L55.244,19.2182 L55.244,17.0852 L48.872,17.0852 L48.872,19.2182 Z M21.259,17.0862 L21.259,19.2182 L40.801,19.2182 C40.316,18.4092 39.685,17.6882 38.953,17.0862 L38.953,17.0862 L21.259,17.0862 Z M4.267,19.2182 L10.639,19.2182 L10.639,17.0852 L4.267,17.0852 L4.267,19.2182 Z M70.113,23.4852 L76.485,23.4852 L76.485,21.3522 L70.113,21.3522 L70.113,23.4852 Z M58.494,21.3522 L59.334,23.4852 L66.023,23.4852 L66.857,21.3522 L58.494,21.3522 Z M48.872,23.4852 L55.244,23.4852 L55.244,21.3522 L48.872,21.3522 L48.872,23.4852 Z M34.004,21.3522 L34.004,23.4852 L41.863,23.4852 C41.863,22.7472 41.756,22.0322 41.565,21.3522 L41.565,21.3522 L34.004,21.3522 Z M21.259,23.4852 L27.632,23.4852 L27.632,21.3522 L21.259,21.3522 L21.259,23.4852 Z M4.267,23.4852 L10.639,23.4852 L10.639,21.3522 L4.267,21.3522 L4.267,23.4852 Z M70.113,27.7522 L80.733,27.7522 L80.733,25.6192 L70.113,25.6192 L70.113,27.7522 Z M60.169,25.6192 L61.001,27.7522 L64.363,27.7522 L65.191,25.6192 L60.169,25.6192 Z M44.624,27.7522 L55.244,27.7522 L55.244,25.6192 L44.624,25.6192 L44.624,27.7522 Z M17.011,25.6192 L17.011,27.7522 L40.97,27.7522 C41.365,27.0932 41.672,26.3772 41.863,25.6192 L41.863,25.6192 L17.011,25.6192 Z M0.019,27.7522 L14.887,27.7522 L14.887,25.6192 L0.019,25.6192 L0.019,27.7522 Z M70.113,32.0192 L80.733,32.0192 L80.733,29.8852 L70.113,29.8852 L70.113,32.0192 Z M61.833,29.8852 L62.676,32.0192 L63.53,29.8852 L61.833,29.8852 Z M44.624,32.0192 L55.244,32.0192 L55.244,29.8852 L44.624,29.8852 L44.624,32.0192 Z M17.011,29.8852 L17.011,32.0192 L33.961,32.0192 C36.205,32.0192 38.216,31.2102 39.738,29.8852 L39.738,29.8852 L17.011,29.8852 Z M0.019,32.0192 L14.887,32.0192 L14.887,29.8852 L0.019,29.8852 L0.019,32.0192 Z\\" id=\\"path-1\\"></path>
-      </defs>
-      <g id=\\"Artboard\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\">
-        <g id=\\"Group-7\\">
-          <mask id=\\"mask-2\\" fill=\\"white\\">
-            <use xlink:href=\\"#path-1\\"></use>
-          </mask>
-          <g id=\\"Clip-2\\"></g>
-          <polygon id=\\"Fill-1\\" fill=\\"#EC1D24\\" mask=\\"url(#mask-2)\\" points=\\"-1 33.0382 86.8 33.0382 86.8 -0.9998 -1 -0.9998\\"></polygon>
-          <polygon id=\\"Fill-3\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 3.3942 86.8 3.3942 86.8 -0.9998 -1 -0.9998\\"></polygon>
-          <polygon id=\\"Fill-4\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 11.8162 86.8 11.8162 86.8 7.4222 -1 7.4222\\"></polygon>
-          <polygon id=\\"Fill-5\\" fill=\\"#00A550\\" mask=\\"url(#mask-2)\\" points=\\"-1 20.3502 86.8 20.3502 86.8 15.9562 -1 15.9562\\"></polygon>
-          <polygon id=\\"Fill-6\\" fill=\\"#FFF100\\" mask=\\"url(#mask-2)\\" points=\\"-1 28.8832 86.8 28.8832 86.8 24.4892 -1 24.4892\\"></polygon>
-        </g>
-      </g>
-      </svg>",
-                        "tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                      }
-                    }
-                    navType="default"
-                    navigation={Array []}
-                    platform={null}
-                    selectedMenuItem="Services & Consulting"
-                  >
-                    <ForwardRef(SideNav)
-                      addFocusListeners={true}
-                      addMouseListeners={true}
-                      aria-label="Side navigation"
-                      defaultExpanded={false}
-                      expanded={false}
-                      isChildOfHeader={true}
-                      isFixedNav={false}
-                      isPersistent={false}
-                    >
-                      <div
-                        className="bx--side-nav__overlay"
-                      />
-                      <nav
-                        aria-hidden={true}
-                        aria-label="Side navigation"
-                        className="bx--side-nav__navigation bx--side-nav bx--side-nav--ux bx--side-nav--hidden"
-                        onBlur={[Function]}
-                        onFocus={[Function]}
-                      >
-                        <nav
-                          data-autoid="dds--masthead-default-sidenav__l0"
-                        >
-                          <SideNavItems>
-                            <ul
-                              className="bx--side-nav__items"
-                            >
-                              <HeaderSideNavItems
-                                hasDivider={false}
-                                key=".0"
-                              >
-                                <div
-                                  className="bx--side-nav__header-navigation"
-                                >
-                                  <div>
-                                    <SideNavMenuSection
-                                      focusNode={
-                                        <button
-                                          aria-label="Open menu"
-                                          class="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                                          data-autoid="dds--masthead-default-sidenav__l0-menu"
-                                          title="Open menu"
-                                          type="button"
-                                        >
-                                          <svg
-                                            aria-hidden="true"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height="20"
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 20 20"
-                                            width="20"
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                                            />
-                                          </svg>
-                                        </button>
-                                      }
-                                      id="panel__(-1,-1)"
-                                      onBackClick={[Function]}
-                                      show={true}
-                                    >
-                                      <div
-                                        aria-hidden={false}
-                                        className="bx--side-nav__menu-section bx--side-nav__menu-section--expanded"
-                                        id="panel__(-1,-1)"
-                                      >
-                                        <button
-                                          aria-hidden={true}
-                                          className="bx--masthead__focus"
-                                          onFocus={[Function]}
-                                        />
-                                      </div>
-                                    </SideNavMenuSection>
-                                  </div>
-                                </div>
-                              </HeaderSideNavItems>
-                            </ul>
-                          </SideNavItems>
-                        </nav>
-                      </nav>
-                    </ForwardRef(SideNav)>
-                  </MastheadLeftNav>
-                  <IbmLogo
-                    autoid="dds--masthead-default__l0-logo"
-                    isSearchActive={false}
-                    logoData={
+                        "megapanelContent": Object {
+                          "description": "",
+                          "feature": Object {
+                            "heading": "",
+                            "imageUrl": "",
+                            "linkTitle": "",
+                            "linkUrl": "",
+                          },
+                          "headingTitle": "",
+                          "headingUrl": "",
+                          "quickLinks": Object {
+                            "links": Array [
+                              Object {
+                                "title": "Subnav 1",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 2",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 3",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 4",
+                                "url": "",
+                              },
+                            ],
+                            "title": "Title",
+                          },
+                        },
+                        "title": "Link 1",
+                        "url": "",
+                      },
                       Object {
-                        "allowlist": Array [],
-                        "denylist": Array [],
-                        "end": "May 5, 2021 0:00:01",
-                        "path": "/",
-                        "svg": "<svg width=\\"81px\\" height=\\"33px\\" viewBox=\\"0 0 81 33\\" xmlns=\\"http://www.w3.org/2000/svg\\" version=\\"1.1\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\">
-      <title>Artboard</title>
-      <defs>
-        <path d=\\"M67.716,0.0192 L66.982,2.1532 L80.733,2.1532 L80.733,0.0192 L67.716,0.0192 Z M44.624,0.0192 L44.625,2.1532 L58.392,2.1532 L57.64,0.0192 L44.624,0.0192 Z M17.011,0.0192 L17.011,2.1532 L39.738,2.1532 C38.216,0.8282 36.189,0.0192 33.961,0.0192 L33.961,0.0192 L17.011,0.0192 Z M0.019,2.1532 L14.887,2.1532 L14.887,0.0192 L0.019,0.0192 L0.019,2.1532 Z M66.246,4.2862 L65.479,6.4192 L80.733,6.4192 L80.733,4.2862 L66.246,4.2862 Z M44.624,4.2862 L44.625,6.4192 L59.87,6.4192 L59.132,4.2862 L44.624,4.2862 Z M17.011,4.2862 L17.011,6.4192 L41.863,6.4192 C41.672,5.6612 41.365,4.9442 40.97,4.2862 L40.97,4.2862 L17.011,4.2862 Z M0.019,6.4192 L14.887,6.4192 L14.887,4.2862 L0.019,4.2862 L0.019,6.4192 Z M64.761,8.5532 L64.009,10.6862 L76.485,10.6862 L76.485,8.5532 L64.761,8.5532 Z M48.872,8.5532 L48.872,10.6862 L61.354,10.6862 L60.602,8.5532 L48.872,8.5532 Z M34.004,8.5532 L34.004,10.6862 L41.565,10.6862 C41.756,10.0052 41.863,9.2912 41.863,8.5532 L41.863,8.5532 L34.004,8.5532 Z M21.259,10.6862 L27.632,10.6862 L27.632,8.5532 L21.259,8.5532 L21.259,10.6862 Z M4.267,10.6862 L10.639,10.6862 L10.639,8.5532 L4.267,8.5532 L4.267,10.6862 Z M63.273,12.8192 L62.679,14.5432 L62.084,12.8192 L48.872,12.8192 L48.872,14.9532 L55.244,14.9532 L55.244,12.9912 L55.945,14.9532 L69.39,14.9532 L70.113,12.9912 L70.113,14.9532 L76.485,14.9532 L76.485,12.8192 L63.273,12.8192 Z M21.259,12.8192 L21.259,14.9532 L38.953,14.9532 C39.685,14.3502 40.316,13.6292 40.801,12.8192 L40.801,12.8192 L21.259,12.8192 Z M4.267,14.9532 L10.639,14.9532 L10.639,12.8192 L4.267,12.8192 L4.267,14.9532 Z M70.113,19.2182 L76.485,19.2182 L76.485,17.0852 L70.113,17.0852 L70.113,19.2182 Z M56.82,17.0862 L57.644,19.2182 L67.691,19.2182 L68.522,17.0862 L56.82,17.0862 Z M48.872,19.2182 L55.244,19.2182 L55.244,17.0852 L48.872,17.0852 L48.872,19.2182 Z M21.259,17.0862 L21.259,19.2182 L40.801,19.2182 C40.316,18.4092 39.685,17.6882 38.953,17.0862 L38.953,17.0862 L21.259,17.0862 Z M4.267,19.2182 L10.639,19.2182 L10.639,17.0852 L4.267,17.0852 L4.267,19.2182 Z M70.113,23.4852 L76.485,23.4852 L76.485,21.3522 L70.113,21.3522 L70.113,23.4852 Z M58.494,21.3522 L59.334,23.4852 L66.023,23.4852 L66.857,21.3522 L58.494,21.3522 Z M48.872,23.4852 L55.244,23.4852 L55.244,21.3522 L48.872,21.3522 L48.872,23.4852 Z M34.004,21.3522 L34.004,23.4852 L41.863,23.4852 C41.863,22.7472 41.756,22.0322 41.565,21.3522 L41.565,21.3522 L34.004,21.3522 Z M21.259,23.4852 L27.632,23.4852 L27.632,21.3522 L21.259,21.3522 L21.259,23.4852 Z M4.267,23.4852 L10.639,23.4852 L10.639,21.3522 L4.267,21.3522 L4.267,23.4852 Z M70.113,27.7522 L80.733,27.7522 L80.733,25.6192 L70.113,25.6192 L70.113,27.7522 Z M60.169,25.6192 L61.001,27.7522 L64.363,27.7522 L65.191,25.6192 L60.169,25.6192 Z M44.624,27.7522 L55.244,27.7522 L55.244,25.6192 L44.624,25.6192 L44.624,27.7522 Z M17.011,25.6192 L17.011,27.7522 L40.97,27.7522 C41.365,27.0932 41.672,26.3772 41.863,25.6192 L41.863,25.6192 L17.011,25.6192 Z M0.019,27.7522 L14.887,27.7522 L14.887,25.6192 L0.019,25.6192 L0.019,27.7522 Z M70.113,32.0192 L80.733,32.0192 L80.733,29.8852 L70.113,29.8852 L70.113,32.0192 Z M61.833,29.8852 L62.676,32.0192 L63.53,29.8852 L61.833,29.8852 Z M44.624,32.0192 L55.244,32.0192 L55.244,29.8852 L44.624,29.8852 L44.624,32.0192 Z M17.011,29.8852 L17.011,32.0192 L33.961,32.0192 C36.205,32.0192 38.216,31.2102 39.738,29.8852 L39.738,29.8852 L17.011,29.8852 Z M0.019,32.0192 L14.887,32.0192 L14.887,29.8852 L0.019,29.8852 L0.019,32.0192 Z\\" id=\\"path-1\\"></path>
-      </defs>
-      <g id=\\"Artboard\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\">
-        <g id=\\"Group-7\\">
-          <mask id=\\"mask-2\\" fill=\\"white\\">
-            <use xlink:href=\\"#path-1\\"></use>
-          </mask>
-          <g id=\\"Clip-2\\"></g>
-          <polygon id=\\"Fill-1\\" fill=\\"#EC1D24\\" mask=\\"url(#mask-2)\\" points=\\"-1 33.0382 86.8 33.0382 86.8 -0.9998 -1 -0.9998\\"></polygon>
-          <polygon id=\\"Fill-3\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 3.3942 86.8 3.3942 86.8 -0.9998 -1 -0.9998\\"></polygon>
-          <polygon id=\\"Fill-4\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 11.8162 86.8 11.8162 86.8 7.4222 -1 7.4222\\"></polygon>
-          <polygon id=\\"Fill-5\\" fill=\\"#00A550\\" mask=\\"url(#mask-2)\\" points=\\"-1 20.3502 86.8 20.3502 86.8 15.9562 -1 15.9562\\"></polygon>
-          <polygon id=\\"Fill-6\\" fill=\\"#FFF100\\" mask=\\"url(#mask-2)\\" points=\\"-1 28.8832 86.8 28.8832 86.8 24.4892 -1 24.4892\\"></polygon>
-        </g>
-      </g>
-      </svg>",
-                        "tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                      }
-                    }
-                  >
-                    <div
-                      className="bx--header__logo"
-                    >
-                      <ConditionalWrapper
-                        condition={true}
-                        wrapper={[Function]}
-                      >
-                        <TooltipDefinition
-                          align="start"
-                          direction="bottom"
-                          tooltipText="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-                        >
-                          <span
-                            className="bx--tooltip--definition bx--tooltip--a11y"
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                          >
-                            <button
-                              aria-describedby="definition-tooltip-2"
-                              className="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--bottom bx--tooltip--align-start"
-                              onBlur={[Function]}
-                              onFocus={[Function]}
-                              type="button"
-                            >
-                              <a
-                                aria-label="IBM®"
-                                data-autoid="dds--masthead-default__l0-logo"
-                                href="http://www.ibm.com"
-                              >
-                                <MastheadLogo
-                                  height="23"
-                                  viewBox="0 0 58 23"
-                                  width="58"
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    height="23"
-                                    viewBox="0 0 58 23"
-                                    width="58"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M58 21.467V23h-7.632v-1.533H58zm-18.316 0V23h-7.631v-1.533h7.631zm5.955 0L45.025 23l-.606-1.533h1.22zm-17.097 0A6.285 6.285 0 0 1 24.391 23H12.21v-1.533zm-17.858 0V23H0v-1.533h10.684zm29-3.067v1.533h-7.631V18.4h7.631zm7.148 0l-.594 1.533H43.82l-.598-1.533h3.609zm-16.764 0a5.719 5.719 0 0 1-.64 1.533H12.21V18.4zm-19.384 0v1.533H0V18.4h10.684zM58 18.4v1.533h-7.632V18.4H58zm-3.053-3.067v1.534h-4.579v-1.534h4.58zm-15.263 0v1.534h-4.579v-1.534h4.58zm8.345 0l-.6 1.534h-4.806l-.604-1.534h6.01zm-18.174 0c.137.49.213 1.003.213 1.534h-5.647v-1.534zm-10.013 0v1.534h-4.579v-1.534h4.58zm-12.21 0v1.534h-4.58v-1.534h4.58zm47.315-3.066V13.8h-4.579v-1.533h4.58zm-15.263 0V13.8h-4.579v-1.533h4.58zm9.541 0l-.597 1.533h-7.22l-.591-1.533h8.408zm-21.248 0c.527.432.98.951 1.328 1.533H15.263v-1.533zm-20.345 0V13.8h-4.58v-1.533h4.58zM44.599 9.2l.427 1.24.428-1.24h9.493v1.533h-4.579V9.324l-.519 1.41h-9.661l-.504-1.41v1.41h-4.579V9.2H44.6zm-36.967 0v1.533h-4.58V9.2h4.58zm21.673 0a5.95 5.95 0 0 1-1.328 1.533H15.263V9.2zm25.642-3.067v1.534h-8.964l.54-1.534h8.424zm-11.413 0l.54 1.534h-8.969V6.133h8.43zm-13.466 0c0 .531-.076 1.045-.213 1.534H24.42V6.133zm-10.226 0v1.534h-4.579V6.133h4.58zm-12.21 0v1.534h-4.58V6.133h4.58zm34.845-3.066l.53 1.533H32.054V3.067h10.424zm15.523 0V4.6H47.04l.55-1.533H58zm-28.573 0c.284.473.504.988.641 1.533H12.211V3.067zm-18.743 0V4.6H0V3.067h10.684zM41.406 0l.54 1.533h-9.893V0h9.353zM58 0v1.533h-9.881L48.647 0H58zM24.39 0c1.601 0 3.057.581 4.152 1.533H12.211V0zM10.685 0v1.533H0V0h10.684z"
-                                      fill="#161616"
-                                      fillRule="evenodd"
-                                    />
-                                  </svg>
-                                </MastheadLogo>
-                              </a>
-                            </button>
-                            <span
-                              className="bx--assistive-text"
-                              id="definition-tooltip-2"
-                              role="tooltip"
-                            >
-                              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                            </span>
-                          </span>
-                        </TooltipDefinition>
-                      </ConditionalWrapper>
-                    </div>
-                  </IbmLogo>
-                  <div
-                    className="bx--header__search "
-                  >
-                    <MastheadTopNav
-                      mastheadLogo={
-                        Object {
-                          "allowlist": Array [],
-                          "denylist": Array [],
-                          "end": "May 5, 2021 0:00:01",
-                          "path": "/",
-                          "svg": "<svg width=\\"81px\\" height=\\"33px\\" viewBox=\\"0 0 81 33\\" xmlns=\\"http://www.w3.org/2000/svg\\" version=\\"1.1\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\">
-      <title>Artboard</title>
-      <defs>
-        <path d=\\"M67.716,0.0192 L66.982,2.1532 L80.733,2.1532 L80.733,0.0192 L67.716,0.0192 Z M44.624,0.0192 L44.625,2.1532 L58.392,2.1532 L57.64,0.0192 L44.624,0.0192 Z M17.011,0.0192 L17.011,2.1532 L39.738,2.1532 C38.216,0.8282 36.189,0.0192 33.961,0.0192 L33.961,0.0192 L17.011,0.0192 Z M0.019,2.1532 L14.887,2.1532 L14.887,0.0192 L0.019,0.0192 L0.019,2.1532 Z M66.246,4.2862 L65.479,6.4192 L80.733,6.4192 L80.733,4.2862 L66.246,4.2862 Z M44.624,4.2862 L44.625,6.4192 L59.87,6.4192 L59.132,4.2862 L44.624,4.2862 Z M17.011,4.2862 L17.011,6.4192 L41.863,6.4192 C41.672,5.6612 41.365,4.9442 40.97,4.2862 L40.97,4.2862 L17.011,4.2862 Z M0.019,6.4192 L14.887,6.4192 L14.887,4.2862 L0.019,4.2862 L0.019,6.4192 Z M64.761,8.5532 L64.009,10.6862 L76.485,10.6862 L76.485,8.5532 L64.761,8.5532 Z M48.872,8.5532 L48.872,10.6862 L61.354,10.6862 L60.602,8.5532 L48.872,8.5532 Z M34.004,8.5532 L34.004,10.6862 L41.565,10.6862 C41.756,10.0052 41.863,9.2912 41.863,8.5532 L41.863,8.5532 L34.004,8.5532 Z M21.259,10.6862 L27.632,10.6862 L27.632,8.5532 L21.259,8.5532 L21.259,10.6862 Z M4.267,10.6862 L10.639,10.6862 L10.639,8.5532 L4.267,8.5532 L4.267,10.6862 Z M63.273,12.8192 L62.679,14.5432 L62.084,12.8192 L48.872,12.8192 L48.872,14.9532 L55.244,14.9532 L55.244,12.9912 L55.945,14.9532 L69.39,14.9532 L70.113,12.9912 L70.113,14.9532 L76.485,14.9532 L76.485,12.8192 L63.273,12.8192 Z M21.259,12.8192 L21.259,14.9532 L38.953,14.9532 C39.685,14.3502 40.316,13.6292 40.801,12.8192 L40.801,12.8192 L21.259,12.8192 Z M4.267,14.9532 L10.639,14.9532 L10.639,12.8192 L4.267,12.8192 L4.267,14.9532 Z M70.113,19.2182 L76.485,19.2182 L76.485,17.0852 L70.113,17.0852 L70.113,19.2182 Z M56.82,17.0862 L57.644,19.2182 L67.691,19.2182 L68.522,17.0862 L56.82,17.0862 Z M48.872,19.2182 L55.244,19.2182 L55.244,17.0852 L48.872,17.0852 L48.872,19.2182 Z M21.259,17.0862 L21.259,19.2182 L40.801,19.2182 C40.316,18.4092 39.685,17.6882 38.953,17.0862 L38.953,17.0862 L21.259,17.0862 Z M4.267,19.2182 L10.639,19.2182 L10.639,17.0852 L4.267,17.0852 L4.267,19.2182 Z M70.113,23.4852 L76.485,23.4852 L76.485,21.3522 L70.113,21.3522 L70.113,23.4852 Z M58.494,21.3522 L59.334,23.4852 L66.023,23.4852 L66.857,21.3522 L58.494,21.3522 Z M48.872,23.4852 L55.244,23.4852 L55.244,21.3522 L48.872,21.3522 L48.872,23.4852 Z M34.004,21.3522 L34.004,23.4852 L41.863,23.4852 C41.863,22.7472 41.756,22.0322 41.565,21.3522 L41.565,21.3522 L34.004,21.3522 Z M21.259,23.4852 L27.632,23.4852 L27.632,21.3522 L21.259,21.3522 L21.259,23.4852 Z M4.267,23.4852 L10.639,23.4852 L10.639,21.3522 L4.267,21.3522 L4.267,23.4852 Z M70.113,27.7522 L80.733,27.7522 L80.733,25.6192 L70.113,25.6192 L70.113,27.7522 Z M60.169,25.6192 L61.001,27.7522 L64.363,27.7522 L65.191,25.6192 L60.169,25.6192 Z M44.624,27.7522 L55.244,27.7522 L55.244,25.6192 L44.624,25.6192 L44.624,27.7522 Z M17.011,25.6192 L17.011,27.7522 L40.97,27.7522 C41.365,27.0932 41.672,26.3772 41.863,25.6192 L41.863,25.6192 L17.011,25.6192 Z M0.019,27.7522 L14.887,27.7522 L14.887,25.6192 L0.019,25.6192 L0.019,27.7522 Z M70.113,32.0192 L80.733,32.0192 L80.733,29.8852 L70.113,29.8852 L70.113,32.0192 Z M61.833,29.8852 L62.676,32.0192 L63.53,29.8852 L61.833,29.8852 Z M44.624,32.0192 L55.244,32.0192 L55.244,29.8852 L44.624,29.8852 L44.624,32.0192 Z M17.011,29.8852 L17.011,32.0192 L33.961,32.0192 C36.205,32.0192 38.216,31.2102 39.738,29.8852 L39.738,29.8852 L17.011,29.8852 Z M0.019,32.0192 L14.887,32.0192 L14.887,29.8852 L0.019,29.8852 L0.019,32.0192 Z\\" id=\\"path-1\\"></path>
-      </defs>
-      <g id=\\"Artboard\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\">
-        <g id=\\"Group-7\\">
-          <mask id=\\"mask-2\\" fill=\\"white\\">
-            <use xlink:href=\\"#path-1\\"></use>
-          </mask>
-          <g id=\\"Clip-2\\"></g>
-          <polygon id=\\"Fill-1\\" fill=\\"#EC1D24\\" mask=\\"url(#mask-2)\\" points=\\"-1 33.0382 86.8 33.0382 86.8 -0.9998 -1 -0.9998\\"></polygon>
-          <polygon id=\\"Fill-3\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 3.3942 86.8 3.3942 86.8 -0.9998 -1 -0.9998\\"></polygon>
-          <polygon id=\\"Fill-4\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 11.8162 86.8 11.8162 86.8 7.4222 -1 7.4222\\"></polygon>
-          <polygon id=\\"Fill-5\\" fill=\\"#00A550\\" mask=\\"url(#mask-2)\\" points=\\"-1 20.3502 86.8 20.3502 86.8 15.9562 -1 15.9562\\"></polygon>
-          <polygon id=\\"Fill-6\\" fill=\\"#FFF100\\" mask=\\"url(#mask-2)\\" points=\\"-1 28.8832 86.8 28.8832 86.8 24.4892 -1 24.4892\\"></polygon>
-        </g>
-      </g>
-      </svg>",
-                          "tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                        }
-                      }
-                      navType="default"
-                      navigation={Array []}
-                      platform={null}
-                      selectedMenuItem="Services & Consulting"
-                    >
-                      <HeaderNavContainer>
-                        <div
-                          className="bx--header__nav-container"
-                        >
-                          <div
-                            className="bx--header__nav-content"
-                          >
-                            <div
-                              className="bx--sub-content-left"
-                            />
-                            <div
-                              className="bx--sub-content-right"
-                            />
-                            <HeaderNavigation
-                              aria-label="IBM"
-                              data-autoid="dds--masthead__l0-nav"
-                            >
-                              <nav
-                                aria-label="IBM"
-                                className="bx--header__nav"
-                                data-autoid="dds--masthead__l0-nav"
-                              >
-                                <ul
-                                  aria-label="IBM"
-                                  className="bx--header__menu-bar"
-                                />
-                              </nav>
-                            </HeaderNavigation>
-                          </div>
-                          <div
-                            className="bx--header__nav-caret-left-container"
-                            hidden={true}
-                          >
-                            <button
-                              aria-hidden="true"
-                              aria-label="Masthead left caret"
-                              className="bx--header__nav-caret-left"
-                              onClick={[Function]}
-                              tabIndex="-1"
-                            >
-                              <ForwardRef(CaretLeft20)>
-                                <Icon
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M20 24L10 16 20 8z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(CaretLeft20)>
-                            </button>
-                            <div
-                              className="bx--header__nav-caret-left-gradient"
-                            />
-                          </div>
-                          <div
-                            className="bx--header__nav-caret-right-container"
-                            hidden={true}
-                          >
-                            <div
-                              className="bx--header__nav-caret-right-gradient"
-                            />
-                            <button
-                              aria-hidden="true"
-                              aria-label="Masthead right caret"
-                              className="bx--header__nav-caret-right"
-                              onClick={[Function]}
-                              tabIndex="-1"
-                            >
-                              <ForwardRef(CaretRight20)>
-                                <Icon
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M12 8L22 16 12 24z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(CaretRight20)>
-                            </button>
-                          </div>
-                        </div>
-                      </HeaderNavContainer>
-                      <div
-                        className="bx--masthead__overlay"
-                      />
-                    </MastheadTopNav>
-                    <MastheadSearch
-                      initialSearchTerm=""
-                      isSearchActive={false}
-                      mastheadLogo={
-                        Object {
-                          "allowlist": Array [],
-                          "denylist": Array [],
-                          "end": "May 5, 2021 0:00:01",
-                          "path": "/",
-                          "svg": "<svg width=\\"81px\\" height=\\"33px\\" viewBox=\\"0 0 81 33\\" xmlns=\\"http://www.w3.org/2000/svg\\" version=\\"1.1\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\">
-      <title>Artboard</title>
-      <defs>
-        <path d=\\"M67.716,0.0192 L66.982,2.1532 L80.733,2.1532 L80.733,0.0192 L67.716,0.0192 Z M44.624,0.0192 L44.625,2.1532 L58.392,2.1532 L57.64,0.0192 L44.624,0.0192 Z M17.011,0.0192 L17.011,2.1532 L39.738,2.1532 C38.216,0.8282 36.189,0.0192 33.961,0.0192 L33.961,0.0192 L17.011,0.0192 Z M0.019,2.1532 L14.887,2.1532 L14.887,0.0192 L0.019,0.0192 L0.019,2.1532 Z M66.246,4.2862 L65.479,6.4192 L80.733,6.4192 L80.733,4.2862 L66.246,4.2862 Z M44.624,4.2862 L44.625,6.4192 L59.87,6.4192 L59.132,4.2862 L44.624,4.2862 Z M17.011,4.2862 L17.011,6.4192 L41.863,6.4192 C41.672,5.6612 41.365,4.9442 40.97,4.2862 L40.97,4.2862 L17.011,4.2862 Z M0.019,6.4192 L14.887,6.4192 L14.887,4.2862 L0.019,4.2862 L0.019,6.4192 Z M64.761,8.5532 L64.009,10.6862 L76.485,10.6862 L76.485,8.5532 L64.761,8.5532 Z M48.872,8.5532 L48.872,10.6862 L61.354,10.6862 L60.602,8.5532 L48.872,8.5532 Z M34.004,8.5532 L34.004,10.6862 L41.565,10.6862 C41.756,10.0052 41.863,9.2912 41.863,8.5532 L41.863,8.5532 L34.004,8.5532 Z M21.259,10.6862 L27.632,10.6862 L27.632,8.5532 L21.259,8.5532 L21.259,10.6862 Z M4.267,10.6862 L10.639,10.6862 L10.639,8.5532 L4.267,8.5532 L4.267,10.6862 Z M63.273,12.8192 L62.679,14.5432 L62.084,12.8192 L48.872,12.8192 L48.872,14.9532 L55.244,14.9532 L55.244,12.9912 L55.945,14.9532 L69.39,14.9532 L70.113,12.9912 L70.113,14.9532 L76.485,14.9532 L76.485,12.8192 L63.273,12.8192 Z M21.259,12.8192 L21.259,14.9532 L38.953,14.9532 C39.685,14.3502 40.316,13.6292 40.801,12.8192 L40.801,12.8192 L21.259,12.8192 Z M4.267,14.9532 L10.639,14.9532 L10.639,12.8192 L4.267,12.8192 L4.267,14.9532 Z M70.113,19.2182 L76.485,19.2182 L76.485,17.0852 L70.113,17.0852 L70.113,19.2182 Z M56.82,17.0862 L57.644,19.2182 L67.691,19.2182 L68.522,17.0862 L56.82,17.0862 Z M48.872,19.2182 L55.244,19.2182 L55.244,17.0852 L48.872,17.0852 L48.872,19.2182 Z M21.259,17.0862 L21.259,19.2182 L40.801,19.2182 C40.316,18.4092 39.685,17.6882 38.953,17.0862 L38.953,17.0862 L21.259,17.0862 Z M4.267,19.2182 L10.639,19.2182 L10.639,17.0852 L4.267,17.0852 L4.267,19.2182 Z M70.113,23.4852 L76.485,23.4852 L76.485,21.3522 L70.113,21.3522 L70.113,23.4852 Z M58.494,21.3522 L59.334,23.4852 L66.023,23.4852 L66.857,21.3522 L58.494,21.3522 Z M48.872,23.4852 L55.244,23.4852 L55.244,21.3522 L48.872,21.3522 L48.872,23.4852 Z M34.004,21.3522 L34.004,23.4852 L41.863,23.4852 C41.863,22.7472 41.756,22.0322 41.565,21.3522 L41.565,21.3522 L34.004,21.3522 Z M21.259,23.4852 L27.632,23.4852 L27.632,21.3522 L21.259,21.3522 L21.259,23.4852 Z M4.267,23.4852 L10.639,23.4852 L10.639,21.3522 L4.267,21.3522 L4.267,23.4852 Z M70.113,27.7522 L80.733,27.7522 L80.733,25.6192 L70.113,25.6192 L70.113,27.7522 Z M60.169,25.6192 L61.001,27.7522 L64.363,27.7522 L65.191,25.6192 L60.169,25.6192 Z M44.624,27.7522 L55.244,27.7522 L55.244,25.6192 L44.624,25.6192 L44.624,27.7522 Z M17.011,25.6192 L17.011,27.7522 L40.97,27.7522 C41.365,27.0932 41.672,26.3772 41.863,25.6192 L41.863,25.6192 L17.011,25.6192 Z M0.019,27.7522 L14.887,27.7522 L14.887,25.6192 L0.019,25.6192 L0.019,27.7522 Z M70.113,32.0192 L80.733,32.0192 L80.733,29.8852 L70.113,29.8852 L70.113,32.0192 Z M61.833,29.8852 L62.676,32.0192 L63.53,29.8852 L61.833,29.8852 Z M44.624,32.0192 L55.244,32.0192 L55.244,29.8852 L44.624,29.8852 L44.624,32.0192 Z M17.011,29.8852 L17.011,32.0192 L33.961,32.0192 C36.205,32.0192 38.216,31.2102 39.738,29.8852 L39.738,29.8852 L17.011,29.8852 Z M0.019,32.0192 L14.887,32.0192 L14.887,29.8852 L0.019,29.8852 L0.019,32.0192 Z\\" id=\\"path-1\\"></path>
-      </defs>
-      <g id=\\"Artboard\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\">
-        <g id=\\"Group-7\\">
-          <mask id=\\"mask-2\\" fill=\\"white\\">
-            <use xlink:href=\\"#path-1\\"></use>
-          </mask>
-          <g id=\\"Clip-2\\"></g>
-          <polygon id=\\"Fill-1\\" fill=\\"#EC1D24\\" mask=\\"url(#mask-2)\\" points=\\"-1 33.0382 86.8 33.0382 86.8 -0.9998 -1 -0.9998\\"></polygon>
-          <polygon id=\\"Fill-3\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 3.3942 86.8 3.3942 86.8 -0.9998 -1 -0.9998\\"></polygon>
-          <polygon id=\\"Fill-4\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 11.8162 86.8 11.8162 86.8 7.4222 -1 7.4222\\"></polygon>
-          <polygon id=\\"Fill-5\\" fill=\\"#00A550\\" mask=\\"url(#mask-2)\\" points=\\"-1 20.3502 86.8 20.3502 86.8 15.9562 -1 15.9562\\"></polygon>
-          <polygon id=\\"Fill-6\\" fill=\\"#FFF100\\" mask=\\"url(#mask-2)\\" points=\\"-1 28.8832 86.8 28.8832 86.8 24.4892 -1 24.4892\\"></polygon>
-        </g>
-      </g>
-      </svg>",
-                          "tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                        }
-                      }
-                      navType="default"
-                      onChangeSearchActive={[Function]}
-                      placeHolderText="Search all of IBM"
-                      renderValue={3}
-                      searchOpenOnload={false}
-                    >
-                      <div
-                        className="bx--masthead__search"
-                        data-autoid="dds--masthead__search"
-                      >
-                        <div
-                          className="bx--header__search--actions"
-                        >
-                          <HeaderGlobalAction
-                            aria-label="Open IBM search field"
-                            className="bx--header__search--search"
-                            data-autoid="dds--masthead-default__l0-search"
-                            onClick={[Function]}
-                            tabIndex="0"
-                          >
-                            <Button
-                              aria-label="Open IBM search field"
-                              className="bx--header__search--search bx--header__action"
-                              dangerDescription="danger"
-                              data-autoid="dds--masthead-default__l0-search"
-                              disabled={false}
-                              hasIconOnly={true}
-                              iconDescription="Open IBM search field"
-                              isExpressive={false}
-                              kind="primary"
-                              onClick={[Function]}
-                              size="default"
-                              tabIndex="0"
-                              tooltipAlignment="center"
-                              tooltipPosition="bottom"
-                              type="button"
-                            >
-                              <button
-                                aria-describedby={null}
-                                aria-label="Open IBM search field"
-                                aria-pressed={null}
-                                className="bx--header__search--search bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                data-autoid="dds--masthead-default__l0-search"
-                                disabled={false}
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                tabIndex="0"
-                                type="button"
-                              >
-                                <div
-                                  className="bx--assistive-text"
-                                  onMouseEnter={[Function]}
-                                >
-                                  Open IBM search field
-                                </div>
-                                <ForwardRef(Search20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(Search20)>
-                              </button>
-                            </Button>
-                          </HeaderGlobalAction>
-                          <HeaderGlobalAction
-                            aria-label="Close"
-                            className="bx--header__search--close"
-                            data-autoid="dds--masthead-default__l0-search--close"
-                            onClick={[Function]}
-                          >
-                            <Button
-                              aria-label="Close"
-                              className="bx--header__search--close bx--header__action"
-                              dangerDescription="danger"
-                              data-autoid="dds--masthead-default__l0-search--close"
-                              disabled={false}
-                              hasIconOnly={true}
-                              iconDescription="Close"
-                              isExpressive={false}
-                              kind="primary"
-                              onClick={[Function]}
-                              size="default"
-                              tabIndex={0}
-                              tooltipAlignment="center"
-                              tooltipPosition="bottom"
-                              type="button"
-                            >
-                              <button
-                                aria-describedby={null}
-                                aria-label="Close"
-                                aria-pressed={null}
-                                className="bx--header__search--close bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                data-autoid="dds--masthead-default__l0-search--close"
-                                disabled={false}
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                tabIndex={0}
-                                type="button"
-                              >
-                                <div
-                                  className="bx--assistive-text"
-                                  onMouseEnter={[Function]}
-                                >
-                                  Close
-                                </div>
-                                <ForwardRef(Close20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(Close20)>
-                              </button>
-                            </Button>
-                          </HeaderGlobalAction>
-                        </div>
-                      </div>
-                    </MastheadSearch>
-                  </div>
-                  <HeaderGlobalBar
-                    className="bx--header__profile"
-                  >
-                    <div
-                      className="bx--header__global bx--header__profile"
-                    >
-                      <MastheadProfile
-                        navType="default"
-                        overflowMenuItemProps={
-                          Object {
-                            "wrapperClassName": "bx--masthead__profile-item",
-                          }
-                        }
-                        overflowMenuProps={
-                          Object {
-                            "ariaLabel": "User Profile",
-                            "data-autoid": "dds--masthead-default__l0-account",
-                            "flipped": true,
-                            "onOpen": [Function],
-                            "renderIcon": [Function],
-                            "style": Object {
-                              "width": "3rem",
-                            },
-                          }
-                        }
-                        profileMenu={Array []}
-                      >
-                        <ForwardRef(OverflowMenu)
-                          ariaLabel="User Profile"
-                          className="bx--header__action"
-                          data-autoid="dds--masthead-default__l0-account"
-                          flipped={true}
-                          onOpen={[Function]}
-                          renderIcon={[Function]}
-                          style={
-                            Object {
-                              "width": "3rem",
-                            }
-                          }
-                        >
-                          <OverflowMenu
-                            ariaLabel="User Profile"
-                            className="bx--header__action"
-                            data-autoid="dds--masthead-default__l0-account"
-                            direction="bottom"
-                            flipped={true}
-                            iconDescription="open and close list of options"
-                            innerRef={null}
-                            light={false}
-                            menuOffset={[Function]}
-                            menuOffsetFlip={[Function]}
-                            onClick={[Function]}
-                            onClose={[Function]}
-                            onKeyDown={[Function]}
-                            onOpen={[Function]}
-                            open={false}
-                            renderIcon={[Function]}
-                            selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
-                            style={
-                              Object {
-                                "width": "3rem",
-                              }
-                            }
-                          >
-                            <ClickListener
-                              onClickOutside={[Function]}
-                            >
-                              <button
-                                aria-expanded={false}
-                                aria-haspopup={true}
-                                aria-label="User Profile"
-                                className="bx--header__action bx--overflow-menu"
-                                data-autoid="dds--masthead-default__l0-account"
-                                onClick={[Function]}
-                                onClose={[Function]}
-                                onKeyDown={[Function]}
-                                open={false}
-                                style={
-                                  Object {
-                                    "width": "3rem",
-                                  }
-                                }
-                                type="button"
-                              >
-                                <renderIcon
-                                  aria-label="open and close list of options"
-                                  className="bx--overflow-menu__icon"
-                                  onClick={[Function]}
-                                  onKeyDown={[Function]}
-                                >
-                                  <ForwardRef(User20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M16 4a5 5 0 11-5 5 5 5 0 015-5m0-2a7 7 0 107 7A7 7 0 0016 2zM26 30H24V25a5 5 0 00-5-5H13a5 5 0 00-5 5v5H6V25a7 7 0 017-7h6a7 7 0 017 7z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(User20)>
-                                </renderIcon>
-                              </button>
-                            </ClickListener>
-                          </OverflowMenu>
-                        </ForwardRef(OverflowMenu)>
-                      </MastheadProfile>
-                    </div>
-                  </HeaderGlobalBar>
-                </header>
-              </Header>
-            </div>
-          </div>
-        </render>
-      </HeaderContainer>
-    </Masthead>
-  </div>
-  <input
-    aria-label="input-text-offleft"
-    className="bx--visually-hidden"
-    type="text"
-  />
-</Container>
-`;
-
-exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-masthead--with-custom-navigation",
-      "component": undefined,
-      "docs": Object {},
-      "fileName": "./components/Masthead/__stories__/Masthead.stories.js",
-      "framework": "react",
-      "knobs": Object {
-        "Masthead": [Function],
-        "escapeHTML": false,
-      },
-      "options": Object {
-        "name": "Carbon for IBM.com React",
-        "storySort": [Function],
-        "theme": Object {
-          "appBg": "#F6F9FC",
-          "appBorderColor": "rgba(0,0,0,.1)",
-          "appBorderRadius": 4,
-          "appContentBg": "#FFFFFF",
-          "barBg": "#FFFFFF",
-          "barSelectedColor": "#1EA7FD",
-          "barTextColor": "#999999",
-          "base": "light",
-          "brandTitle": "Carbon for IBM.com React v1.24.0-rc.1",
-          "brandUrl": "https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/react",
-          "colorPrimary": "#FF4785",
-          "colorSecondary": "#1EA7FD",
-          "fontBase": "\\"IBM Plex Sans\\", \\"Helvetica Neue\\", Arial, sans-serif",
-          "fontCode": "\\"IBM Plex Mono\\", Menlo, \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace",
-          "inputBg": "#FFFFFF",
-          "inputBorder": "rgba(0,0,0,.1)",
-          "inputBorderRadius": 4,
-          "inputTextColor": "#333333",
-          "textColor": "#333333",
-          "textInverseColor": "#FFFFFF",
-        },
-        "url": "https://github.com/carbon-design-system/carbon-for-ibm-dotcom",
-      },
-      "props": Object {
-        "Masthead": Object {
-          "customProfileLogin": null,
-          "hasProfile": true,
-          "hasSearch": true,
-          "navigation": Array [
-            Object {
-              "hasMegapanel": false,
-              "hasMenu": true,
-              "menuSections": Array [
-                Object {
-                  "heading": "Explore",
-                  "menuItems": Array [
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "",
-                        "feature": Object {
-                          "heading": "",
-                          "imageUrl": "",
-                          "linkTitle": "",
-                          "linkUrl": "",
-                        },
-                        "headingTitle": "",
-                        "headingUrl": "",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Subnav 1",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 2",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 3",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 4",
-                              "url": "",
-                            },
-                          ],
-                          "title": "Title",
-                        },
-                      },
-                      "title": "Link 1",
-                      "url": "",
-                    },
-                    Object {
-                      "title": "Menu dropdown item with extra long text",
-                      "url": "",
-                    },
-                  ],
-                },
-              ],
-              "title": "Lorem ipsum dolor sit amet",
-              "titleEnglish": "Lorem ipsum dolor sit amet",
-              "url": "",
-            },
-            Object {
-              "hasMenu": true,
-              "menuSections": Array [
-                Object {
-                  "heading": "",
-                  "menuItems": Array [
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "Reimagine your business, designing and building the platforms necessary for growth",
-                        "feature": Object {
-                          "heading": "IBM Services, your Digital Reinvention â„¢ partner",
-                          "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
-                          "linkTitle": "Explore all our business consulting and technology services",
-                          "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                        },
-                        "headingTitle": "Services",
-                        "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Subnav 1",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 2",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 3",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 4",
-                              "url": "",
-                            },
-                          ],
-                          "title": "Quicklinks",
-                        },
-                      },
-                      "title": "Link 2",
-                      "url": "",
-                    },
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "Funding options that fit your business",
-                        "feature": Object {
-                          "heading": "Cloud financing strategies that work for your business",
-                          "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
-                          "linkTitle": "Committed to cloud? Make the most of your cash flow.",
-                          "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
-                        },
-                        "headingTitle": "Financing",
-                        "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Subnav 1",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 2",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 3",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 4",
-                              "url": "",
-                            },
-                          ],
-                          "title": "Quicklinks",
-                        },
-                      },
-                      "title": "Financing",
-                      "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                    },
-                  ],
-                },
-              ],
-              "title": "Consectetur adipiscing elit",
-              "titleEnglish": "Consectetur adipiscing elit",
-              "url": "",
-            },
-            Object {
-              "hasMegapanel": false,
-              "hasMenu": false,
-              "menuSections": Array [],
-              "title": "Nulla quis sem at nibh elementum imperdiet",
-              "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
-              "url": "https://www.ibm.com/industries?lnk=min",
-            },
-            Object {
-              "hasMegapanel": false,
-              "hasMenu": true,
-              "menuSections": Array [
-                Object {
-                  "heading": "",
-                  "menuItems": Array [
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "",
-                        "feature": Object {
-                          "heading": "IBM Developer newsletters",
-                          "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
-                          "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
-                          "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
-                        },
-                        "headingTitle": "IBM Developer",
-                        "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Subnav 1",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 2",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 3",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 4",
-                              "url": "",
-                            },
-                          ],
-                          "title": "Quicklinks",
-                        },
-                      },
-                      "title": "IBM Developer",
-                      "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                    },
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "",
-                        "feature": Object {
-                          "heading": "Blockchain 101",
-                          "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
-                          "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
-                          "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
-                        },
-                        "headingTitle": "Blockchain",
-                        "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Subnav 1",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 2",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 3",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 4",
-                              "url": "",
-                            },
-                          ],
-                          "title": "Quicklinks",
-                        },
-                      },
-                      "title": "Blockchain",
-                      "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                    },
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "",
-                        "feature": Object {
-                          "heading": "Make sense of Kubernetes",
-                          "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
-                          "linkTitle": "Deploy a simple Python application with Kubernetes",
-                          "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
-                        },
-                        "headingTitle": "Containers",
-                        "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Code patterns",
-                              "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            Object {
-                              "title": "Tutorials",
-                              "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            Object {
-                              "title": "Events",
-                              "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                          ],
-                          "title": "Quicklinks",
-                        },
-                      },
-                      "title": "Containers",
-                      "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                    },
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "",
-                        "feature": Object {
-                          "heading": "Train your data no matter where it lives",
-                          "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
-                          "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
-                          "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
-                        },
-                        "headingTitle": "Analytics",
-                        "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Code patterns",
-                              "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            Object {
-                              "title": "Tutorials",
-                              "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            Object {
-                              "title": "Events",
-                              "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            Object {
-                              "title": "Developer community",
-                              "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                          ],
-                          "title": "Quicklinks",
-                        },
+                        "title": "Menu dropdown item with extra long text",
+                        "url": "",
                       },
-                      "title": "Analytics",
-                      "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                    },
-                  ],
-                },
-              ],
-              "title": "Fusce nec tellus sed augue semper porta",
-              "titleEnglish": "Fusce nec tellus sed augue semper porta",
-              "url": "",
-            },
-            Object {
-              "hasMegapanel": false,
-              "hasMenu": false,
-              "menuSections": Array [],
-              "title": "Sed cursus ante dapibus diam",
-              "titleEnglish": "Sed cursus ante dapibus diam",
-              "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
-            },
-          ],
-          "placeHolderText": "Search all of IBM",
-          "platform": null,
-          "selectedMenuItem": "Lorem ipsum dolor sit amet",
-        },
-      },
-      "subcomponents": undefined,
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <Default
-      parameters={
-        Object {
-          "__id": "components-masthead--with-custom-navigation",
-          "component": undefined,
-          "docs": Object {},
-          "fileName": "./components/Masthead/__stories__/Masthead.stories.js",
-          "framework": "react",
-          "knobs": Object {
-            "Masthead": [Function],
-            "escapeHTML": false,
-          },
-          "options": Object {
-            "name": "Carbon for IBM.com React",
-            "storySort": [Function],
-            "theme": Object {
-              "appBg": "#F6F9FC",
-              "appBorderColor": "rgba(0,0,0,.1)",
-              "appBorderRadius": 4,
-              "appContentBg": "#FFFFFF",
-              "barBg": "#FFFFFF",
-              "barSelectedColor": "#1EA7FD",
-              "barTextColor": "#999999",
-              "base": "light",
-              "brandTitle": "Carbon for IBM.com React v1.24.0-rc.1",
-              "brandUrl": "https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/react",
-              "colorPrimary": "#FF4785",
-              "colorSecondary": "#1EA7FD",
-              "fontBase": "\\"IBM Plex Sans\\", \\"Helvetica Neue\\", Arial, sans-serif",
-              "fontCode": "\\"IBM Plex Mono\\", Menlo, \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace",
-              "inputBg": "#FFFFFF",
-              "inputBorder": "rgba(0,0,0,.1)",
-              "inputBorderRadius": 4,
-              "inputTextColor": "#333333",
-              "textColor": "#333333",
-              "textInverseColor": "#FFFFFF",
-            },
-            "url": "https://github.com/carbon-design-system/carbon-for-ibm-dotcom",
-          },
-          "props": Object {
-            "Masthead": Object {
-              "customProfileLogin": null,
-              "hasProfile": true,
-              "hasSearch": true,
-              "navigation": Array [
-                Object {
-                  "hasMegapanel": false,
-                  "hasMenu": true,
-                  "menuSections": Array [
-                    Object {
-                      "heading": "Explore",
-                      "menuItems": Array [
-                        Object {
-                          "megapanelContent": Object {
-                            "description": "",
-                            "feature": Object {
-                              "heading": "",
-                              "imageUrl": "",
-                              "linkTitle": "",
-                              "linkUrl": "",
-                            },
-                            "headingTitle": "",
-                            "headingUrl": "",
-                            "quickLinks": Object {
-                              "links": Array [
-                                Object {
-                                  "title": "Subnav 1",
-                                  "url": "",
-                                },
-                                Object {
-                                  "title": "Subnav 2",
-                                  "url": "",
-                                },
-                                Object {
-                                  "title": "Subnav 3",
-                                  "url": "",
-                                },
-                                Object {
-                                  "title": "Subnav 4",
-                                  "url": "",
-                                },
-                              ],
-                              "title": "Title",
-                            },
-                          },
-                          "title": "Link 1",
-                          "url": "",
-                        },
-                        Object {
-                          "title": "Menu dropdown item with extra long text",
-                          "url": "",
-                        },
-                      ],
-                    },
-                  ],
-                  "title": "Lorem ipsum dolor sit amet",
-                  "titleEnglish": "Lorem ipsum dolor sit amet",
-                  "url": "",
-                },
-                Object {
-                  "hasMenu": true,
-                  "menuSections": Array [
-                    Object {
-                      "heading": "",
-                      "menuItems": Array [
-                        Object {
-                          "megapanelContent": Object {
-                            "description": "Reimagine your business, designing and building the platforms necessary for growth",
-                            "feature": Object {
-                              "heading": "IBM Services, your Digital Reinvention â„¢ partner",
-                              "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
-                              "linkTitle": "Explore all our business consulting and technology services",
-                              "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                            },
-                            "headingTitle": "Services",
-                            "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                            "quickLinks": Object {
-                              "links": Array [
-                                Object {
-                                  "title": "Subnav 1",
-                                  "url": "",
-                                },
-                                Object {
-                                  "title": "Subnav 2",
-                                  "url": "",
-                                },
-                                Object {
-                                  "title": "Subnav 3",
-                                  "url": "",
-                                },
-                                Object {
-                                  "title": "Subnav 4",
-                                  "url": "",
-                                },
-                              ],
-                              "title": "Quicklinks",
-                            },
+                    ],
+                  },
+                ],
+                "title": "Lorem ipsum dolor sit amet",
+                "titleEnglish": "Lorem ipsum dolor sit amet",
+                "url": "",
+              },
+              Object {
+                "hasMenu": true,
+                "menuSections": Array [
+                  Object {
+                    "heading": "",
+                    "menuItems": Array [
+                      Object {
+                        "megapanelContent": Object {
+                          "description": "Reimagine your business, designing and building the platforms necessary for growth",
+                          "feature": Object {
+                            "heading": "IBM Services, your Digital Reinvention â„¢ partner",
+                            "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
+                            "linkTitle": "Explore all our business consulting and technology services",
+                            "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
                           },
-                          "title": "Link 2",
-                          "url": "",
-                        },
-                        Object {
-                          "megapanelContent": Object {
-                            "description": "Funding options that fit your business",
-                            "feature": Object {
-                              "heading": "Cloud financing strategies that work for your business",
-                              "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
-                              "linkTitle": "Committed to cloud? Make the most of your cash flow.",
-                              "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
-                            },
-                            "headingTitle": "Financing",
-                            "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                            "quickLinks": Object {
-                              "links": Array [
-                                Object {
-                                  "title": "Subnav 1",
-                                  "url": "",
-                                },
-                                Object {
-                                  "title": "Subnav 2",
-                                  "url": "",
-                                },
-                                Object {
-                                  "title": "Subnav 3",
-                                  "url": "",
-                                },
-                                Object {
-                                  "title": "Subnav 4",
-                                  "url": "",
-                                },
-                              ],
-                              "title": "Quicklinks",
-                            },
+                          "headingTitle": "Services",
+                          "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
+                          "quickLinks": Object {
+                            "links": Array [
+                              Object {
+                                "title": "Subnav 1",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 2",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 3",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 4",
+                                "url": "",
+                              },
+                            ],
+                            "title": "Quicklinks",
                           },
-                          "title": "Financing",
-                          "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
                         },
-                      ],
-                    },
-                  ],
-                  "title": "Consectetur adipiscing elit",
-                  "titleEnglish": "Consectetur adipiscing elit",
-                  "url": "",
-                },
-                Object {
-                  "hasMegapanel": false,
-                  "hasMenu": false,
-                  "menuSections": Array [],
-                  "title": "Nulla quis sem at nibh elementum imperdiet",
-                  "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
-                  "url": "https://www.ibm.com/industries?lnk=min",
-                },
-                Object {
-                  "hasMegapanel": false,
-                  "hasMenu": true,
-                  "menuSections": Array [
-                    Object {
-                      "heading": "",
-                      "menuItems": Array [
-                        Object {
-                          "megapanelContent": Object {
-                            "description": "",
-                            "feature": Object {
-                              "heading": "IBM Developer newsletters",
-                              "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
-                              "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
-                              "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            "headingTitle": "IBM Developer",
-                            "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                            "quickLinks": Object {
-                              "links": Array [
-                                Object {
-                                  "title": "Subnav 1",
-                                  "url": "",
-                                },
-                                Object {
-                                  "title": "Subnav 2",
-                                  "url": "",
-                                },
-                                Object {
-                                  "title": "Subnav 3",
-                                  "url": "",
-                                },
-                                Object {
-                                  "title": "Subnav 4",
-                                  "url": "",
-                                },
-                              ],
-                              "title": "Quicklinks",
-                            },
+                        "title": "Link 2",
+                        "url": "",
+                      },
+                      Object {
+                        "megapanelContent": Object {
+                          "description": "Funding options that fit your business",
+                          "feature": Object {
+                            "heading": "Cloud financing strategies that work for your business",
+                            "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
+                            "linkTitle": "Committed to cloud? Make the most of your cash flow.",
+                            "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
                           },
-                          "title": "IBM Developer",
-                          "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                        },
-                        Object {
-                          "megapanelContent": Object {
-                            "description": "",
-                            "feature": Object {
-                              "heading": "Blockchain 101",
-                              "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
-                              "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
-                              "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            "headingTitle": "Blockchain",
-                            "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                            "quickLinks": Object {
-                              "links": Array [
-                                Object {
-                                  "title": "Subnav 1",
-                                  "url": "",
-                                },
-                                Object {
-                                  "title": "Subnav 2",
-                                  "url": "",
-                                },
-                                Object {
-                                  "title": "Subnav 3",
-                                  "url": "",
-                                },
-                                Object {
-                                  "title": "Subnav 4",
-                                  "url": "",
-                                },
-                              ],
-                              "title": "Quicklinks",
-                            },
+                          "headingTitle": "Financing",
+                          "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
+                          "quickLinks": Object {
+                            "links": Array [
+                              Object {
+                                "title": "Subnav 1",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 2",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 3",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 4",
+                                "url": "",
+                              },
+                            ],
+                            "title": "Quicklinks",
                           },
-                          "title": "Blockchain",
-                          "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
                         },
-                        Object {
-                          "megapanelContent": Object {
-                            "description": "",
-                            "feature": Object {
-                              "heading": "Make sense of Kubernetes",
-                              "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
-                              "linkTitle": "Deploy a simple Python application with Kubernetes",
-                              "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            "headingTitle": "Containers",
-                            "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                            "quickLinks": Object {
-                              "links": Array [
-                                Object {
-                                  "title": "Code patterns",
-                                  "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                },
-                                Object {
-                                  "title": "Tutorials",
-                                  "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                },
-                                Object {
-                                  "title": "Events",
-                                  "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                },
-                              ],
-                              "title": "Quicklinks",
-                            },
+                        "title": "Financing",
+                        "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
+                      },
+                    ],
+                  },
+                ],
+                "title": "Consectetur adipiscing elit",
+                "titleEnglish": "Consectetur adipiscing elit",
+                "url": "",
+              },
+              Object {
+                "hasMegapanel": false,
+                "hasMenu": false,
+                "menuSections": Array [],
+                "title": "Nulla quis sem at nibh elementum imperdiet",
+                "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
+                "url": "https://www.ibm.com/industries?lnk=min",
+              },
+              Object {
+                "hasMegapanel": false,
+                "hasMenu": true,
+                "menuSections": Array [
+                  Object {
+                    "heading": "",
+                    "menuItems": Array [
+                      Object {
+                        "megapanelContent": Object {
+                          "description": "",
+                          "feature": Object {
+                            "heading": "IBM Developer newsletters",
+                            "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
+                            "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
+                            "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
                           },
-                          "title": "Containers",
-                          "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                        },
-                        Object {
-                          "megapanelContent": Object {
-                            "description": "",
-                            "feature": Object {
-                              "heading": "Train your data no matter where it lives",
-                              "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
-                              "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
-                              "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            "headingTitle": "Analytics",
-                            "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                            "quickLinks": Object {
-                              "links": Array [
-                                Object {
-                                  "title": "Code patterns",
-                                  "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                },
-                                Object {
-                                  "title": "Tutorials",
-                                  "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                },
-                                Object {
-                                  "title": "Events",
-                                  "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                },
-                                Object {
-                                  "title": "Developer community",
-                                  "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
-                                },
-                              ],
-                              "title": "Quicklinks",
-                            },
+                          "headingTitle": "IBM Developer",
+                          "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
+                          "quickLinks": Object {
+                            "links": Array [
+                              Object {
+                                "title": "Subnav 1",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 2",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 3",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 4",
+                                "url": "",
+                              },
+                            ],
+                            "title": "Quicklinks",
                           },
-                          "title": "Analytics",
-                          "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                        },
-                      ],
-                    },
-                  ],
-                  "title": "Fusce nec tellus sed augue semper porta",
-                  "titleEnglish": "Fusce nec tellus sed augue semper porta",
-                  "url": "",
-                },
-                Object {
-                  "hasMegapanel": false,
-                  "hasMenu": false,
-                  "menuSections": Array [],
-                  "title": "Sed cursus ante dapibus diam",
-                  "titleEnglish": "Sed cursus ante dapibus diam",
-                  "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
-                },
-              ],
-              "placeHolderText": "Search all of IBM",
-              "platform": null,
-              "selectedMenuItem": "Lorem ipsum dolor sit amet",
-            },
-          },
-          "subcomponents": undefined,
-        }
-      }
-    >
-      <Masthead
-        customProfileLogin={null}
-        hasProfile={true}
-        hasSearch={true}
-        initialSearchTerm=""
-        mastheadL1Data={null}
-        navigation={
-          Array [
-            Object {
-              "hasMegapanel": false,
-              "hasMenu": true,
-              "menuSections": Array [
-                Object {
-                  "heading": "Explore",
-                  "menuItems": Array [
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "",
-                        "feature": Object {
-                          "heading": "",
-                          "imageUrl": "",
-                          "linkTitle": "",
-                          "linkUrl": "",
-                        },
-                        "headingTitle": "",
-                        "headingUrl": "",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Subnav 1",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 2",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 3",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 4",
-                              "url": "",
-                            },
-                          ],
-                          "title": "Title",
-                        },
-                      },
-                      "title": "Link 1",
-                      "url": "",
-                    },
-                    Object {
-                      "title": "Menu dropdown item with extra long text",
-                      "url": "",
-                    },
-                  ],
-                },
-              ],
-              "title": "Lorem ipsum dolor sit amet",
-              "titleEnglish": "Lorem ipsum dolor sit amet",
-              "url": "",
-            },
-            Object {
-              "hasMenu": true,
-              "menuSections": Array [
-                Object {
-                  "heading": "",
-                  "menuItems": Array [
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "Reimagine your business, designing and building the platforms necessary for growth",
-                        "feature": Object {
-                          "heading": "IBM Services, your Digital Reinvention â„¢ partner",
-                          "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
-                          "linkTitle": "Explore all our business consulting and technology services",
-                          "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                        },
-                        "headingTitle": "Services",
-                        "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Subnav 1",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 2",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 3",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 4",
-                              "url": "",
-                            },
-                          ],
-                          "title": "Quicklinks",
-                        },
-                      },
-                      "title": "Link 2",
-                      "url": "",
-                    },
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "Funding options that fit your business",
-                        "feature": Object {
-                          "heading": "Cloud financing strategies that work for your business",
-                          "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
-                          "linkTitle": "Committed to cloud? Make the most of your cash flow.",
-                          "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
-                        },
-                        "headingTitle": "Financing",
-                        "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Subnav 1",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 2",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 3",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 4",
-                              "url": "",
-                            },
-                          ],
-                          "title": "Quicklinks",
-                        },
-                      },
-                      "title": "Financing",
-                      "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                    },
-                  ],
-                },
-              ],
-              "title": "Consectetur adipiscing elit",
-              "titleEnglish": "Consectetur adipiscing elit",
-              "url": "",
-            },
-            Object {
-              "hasMegapanel": false,
-              "hasMenu": false,
-              "menuSections": Array [],
-              "title": "Nulla quis sem at nibh elementum imperdiet",
-              "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
-              "url": "https://www.ibm.com/industries?lnk=min",
-            },
-            Object {
-              "hasMegapanel": false,
-              "hasMenu": true,
-              "menuSections": Array [
-                Object {
-                  "heading": "",
-                  "menuItems": Array [
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "",
-                        "feature": Object {
-                          "heading": "IBM Developer newsletters",
-                          "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
-                          "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
-                          "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
-                        },
-                        "headingTitle": "IBM Developer",
-                        "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Subnav 1",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 2",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 3",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 4",
-                              "url": "",
-                            },
-                          ],
-                          "title": "Quicklinks",
                         },
+                        "title": "IBM Developer",
+                        "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
                       },
-                      "title": "IBM Developer",
-                      "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                    },
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "",
-                        "feature": Object {
-                          "heading": "Blockchain 101",
-                          "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
-                          "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
-                          "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
-                        },
-                        "headingTitle": "Blockchain",
-                        "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Subnav 1",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 2",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 3",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 4",
-                              "url": "",
-                            },
-                          ],
-                          "title": "Quicklinks",
+                      Object {
+                        "megapanelContent": Object {
+                          "description": "",
+                          "feature": Object {
+                            "heading": "Blockchain 101",
+                            "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
+                            "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
+                            "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
+                          },
+                          "headingTitle": "Blockchain",
+                          "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
+                          "quickLinks": Object {
+                            "links": Array [
+                              Object {
+                                "title": "Subnav 1",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 2",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 3",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Subnav 4",
+                                "url": "",
+                              },
+                            ],
+                            "title": "Quicklinks",
+                          },
                         },
+                        "title": "Blockchain",
+                        "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
                       },
-                      "title": "Blockchain",
-                      "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                    },
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "",
-                        "feature": Object {
-                          "heading": "Make sense of Kubernetes",
-                          "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
-                          "linkTitle": "Deploy a simple Python application with Kubernetes",
-                          "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
-                        },
-                        "headingTitle": "Containers",
-                        "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Code patterns",
-                              "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            Object {
-                              "title": "Tutorials",
-                              "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            Object {
-                              "title": "Events",
-                              "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                          ],
-                          "title": "Quicklinks",
+                      Object {
+                        "megapanelContent": Object {
+                          "description": "",
+                          "feature": Object {
+                            "heading": "Make sense of Kubernetes",
+                            "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
+                            "linkTitle": "Deploy a simple Python application with Kubernetes",
+                            "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
+                          },
+                          "headingTitle": "Containers",
+                          "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
+                          "quickLinks": Object {
+                            "links": Array [
+                              Object {
+                                "title": "Code patterns",
+                                "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                              },
+                              Object {
+                                "title": "Tutorials",
+                                "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                              },
+                              Object {
+                                "title": "Events",
+                                "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                              },
+                            ],
+                            "title": "Quicklinks",
+                          },
                         },
+                        "title": "Containers",
+                        "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
                       },
-                      "title": "Containers",
-                      "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                    },
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "",
-                        "feature": Object {
-                          "heading": "Train your data no matter where it lives",
-                          "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
-                          "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
-                          "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
-                        },
-                        "headingTitle": "Analytics",
-                        "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Code patterns",
-                              "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            Object {
-                              "title": "Tutorials",
-                              "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            Object {
-                              "title": "Events",
-                              "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            Object {
-                              "title": "Developer community",
-                              "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                          ],
-                          "title": "Quicklinks",
+                      Object {
+                        "megapanelContent": Object {
+                          "description": "",
+                          "feature": Object {
+                            "heading": "Train your data no matter where it lives",
+                            "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
+                            "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
+                            "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
+                          },
+                          "headingTitle": "Analytics",
+                          "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                          "quickLinks": Object {
+                            "links": Array [
+                              Object {
+                                "title": "Code patterns",
+                                "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                              },
+                              Object {
+                                "title": "Tutorials",
+                                "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                              },
+                              Object {
+                                "title": "Events",
+                                "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                              },
+                              Object {
+                                "title": "Developer community",
+                                "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
+                              },
+                            ],
+                            "title": "Quicklinks",
+                          },
                         },
+                        "title": "Analytics",
+                        "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
                       },
-                      "title": "Analytics",
-                      "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                    },
-                  ],
-                },
-              ],
-              "title": "Fusce nec tellus sed augue semper porta",
-              "titleEnglish": "Fusce nec tellus sed augue semper porta",
-              "url": "",
-            },
-            Object {
-              "hasMegapanel": false,
-              "hasMenu": false,
-              "menuSections": Array [],
-              "title": "Sed cursus ante dapibus diam",
-              "titleEnglish": "Sed cursus ante dapibus diam",
-              "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
-            },
-          ]
+                    ],
+                  },
+                ],
+                "title": "Fusce nec tellus sed augue semper porta",
+                "titleEnglish": "Fusce nec tellus sed augue semper porta",
+                "url": "",
+              },
+              Object {
+                "hasMegapanel": false,
+                "hasMenu": false,
+                "menuSections": Array [],
+                "title": "Sed cursus ante dapibus diam",
+                "titleEnglish": "Sed cursus ante dapibus diam",
+                "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
+              },
+            ],
+          }
         }
         placeHolderText="Search all of IBM"
-        platform={null}
+        platform={
+          Object {
+            "name": "Stock Charts",
+            "url": "https://www.example.com",
+          }
+        }
         searchOpenOnload={false}
         selectedMenuItem="Lorem ipsum dolor sit amet"
       >
@@ -121951,15 +121061,15 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                     </SkipToContent>
                     <HeaderMenuButton
                       aria-label="Open menu"
-                      className=""
-                      data-autoid="dds--masthead-default-sidenav__l0-menu"
+                      className="bx--masthead__platform"
+                      data-autoid="dds--masthead-eco-sidenav__l0-menu"
                       isActive={false}
                       onClick={[Function]}
                     >
                       <button
                         aria-label="Open menu"
-                        className="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                        data-autoid="dds--masthead-default-sidenav__l0-menu"
+                        className="bx--masthead__platform bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
+                        data-autoid="dds--masthead-eco-sidenav__l0-menu"
                         onClick={[Function]}
                         title="Open menu"
                         type="button"
@@ -121993,10 +121103,9 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                     </HeaderMenuButton>
                     <MastheadLeftNav
                       backButtonText="Back"
-                      customProfileLogin={null}
-                      hasL1Data={false}
+                      hasL1Data={true}
                       isSideNavExpanded={false}
-                      navType="default"
+                      navType="eco"
                       navigation={
                         Array [
                           Object {
@@ -122310,7 +121419,12 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                           },
                         ]
                       }
-                      platform={null}
+                      platform={
+                        Object {
+                          "name": "Stock Charts",
+                          "url": "https://www.example.com",
+                        }
+                      }
                       selectedMenuItem="Lorem ipsum dolor sit amet"
                     >
                       <ForwardRef(SideNav)
@@ -122334,8 +121448,16 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                           onFocus={[Function]}
                         >
                           <nav
-                            data-autoid="dds--masthead-default-sidenav__l0"
+                            data-autoid="dds--masthead-eco-sidenav__l0"
                           >
+                            <a
+                              aria-haspopup="true"
+                              className="bx--side-nav__submenu bx--side-nav__submenu-platform"
+                              data-autoid="dds--masthead-eco-sidenav__l0-productname"
+                              href="https://www.example.com"
+                            >
+                              Stock Charts
+                            </a>
                             <SideNavItems>
                               <ul
                                 className="bx--side-nav__items"
@@ -122352,8 +121474,8 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                         focusNode={
                                           <button
                                             aria-label="Open menu"
-                                            class="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                                            data-autoid="dds--masthead-default-sidenav__l0-menu"
+                                            class="bx--masthead__platform bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
+                                            data-autoid="dds--masthead-eco-sidenav__l0-menu"
                                             title="Open menu"
                                             type="button"
                                           >
@@ -122383,7 +121505,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                           id="panel__(-1,-1)"
                                         >
                                           <ForwardRef
-                                            autoid="dds--masthead-default-sidenav__l0-nav0"
+                                            autoid="dds--masthead-eco-sidenav__l1-nav0"
                                             dataTitle="lorem-ipsum-dolor-sit-amet"
                                             isSideNavExpanded={false}
                                             onToggle={[Function]}
@@ -122391,7 +121513,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             title="Lorem ipsum dolor sit amet"
                                           >
                                             <SideNavMenu
-                                              autoid="dds--masthead-default-sidenav__l0-nav0"
+                                              autoid="dds--masthead-eco-sidenav__l1-nav0"
                                               buttonRef={null}
                                               dataTitle="lorem-ipsum-dolor-sit-amet"
                                               defaultExpanded={false}
@@ -122419,7 +121541,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                                   >
                                                     <span
                                                       className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-default-sidenav__l0-nav0"
+                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav0"
                                                     >
                                                       Lorem ipsum dolor sit amet
                                                     </span>
@@ -122463,7 +121585,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             </SideNavMenu>
                                           </ForwardRef>
                                           <ForwardRef
-                                            autoid="dds--masthead-default-sidenav__l0-nav1"
+                                            autoid="dds--masthead-eco-sidenav__l1-nav1"
                                             dataTitle="consectetur-adipiscing-elit"
                                             isSideNavExpanded={false}
                                             onToggle={[Function]}
@@ -122471,7 +121593,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             title="Consectetur adipiscing elit"
                                           >
                                             <SideNavMenu
-                                              autoid="dds--masthead-default-sidenav__l0-nav1"
+                                              autoid="dds--masthead-eco-sidenav__l1-nav1"
                                               buttonRef={null}
                                               dataTitle="consectetur-adipiscing-elit"
                                               defaultExpanded={false}
@@ -122499,7 +121621,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                                   >
                                                     <span
                                                       className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-default-sidenav__l0-nav1"
+                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav1"
                                                     >
                                                       Consectetur adipiscing elit
                                                     </span>
@@ -122544,7 +121666,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                           </ForwardRef>
                                           <ForwardRef(SideNavMenuItem)
                                             className={false}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav2"
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav2"
                                             href="https://www.ibm.com/industries?lnk=min"
                                             key="Nulla quis sem at nibh elementum imperdiet"
                                           >
@@ -122553,13 +121675,13 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav2"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav2"
                                                 element="a"
                                                 href="https://www.ibm.com/industries?lnk=min"
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav2"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav2"
                                                   href="https://www.ibm.com/industries?lnk=min"
                                                 >
                                                   <SideNavLinkText>
@@ -122574,7 +121696,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef
-                                            autoid="dds--masthead-default-sidenav__l0-nav3"
+                                            autoid="dds--masthead-eco-sidenav__l1-nav3"
                                             dataTitle="fusce-nec-tellus-sed-augue-semper-porta"
                                             isSideNavExpanded={false}
                                             onToggle={[Function]}
@@ -122582,7 +121704,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             title="Fusce nec tellus sed augue semper porta"
                                           >
                                             <SideNavMenu
-                                              autoid="dds--masthead-default-sidenav__l0-nav3"
+                                              autoid="dds--masthead-eco-sidenav__l1-nav3"
                                               buttonRef={null}
                                               dataTitle="fusce-nec-tellus-sed-augue-semper-porta"
                                               defaultExpanded={false}
@@ -122610,7 +121732,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                                   >
                                                     <span
                                                       className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-default-sidenav__l0-nav3"
+                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav3"
                                                     >
                                                       Fusce nec tellus sed augue semper porta
                                                     </span>
@@ -122655,7 +121777,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                           </ForwardRef>
                                           <ForwardRef(SideNavMenuItem)
                                             className={false}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav4"
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav4"
                                             href="https://www.ibm.com/support/home/?lnk=msu_usen"
                                             key="Sed cursus ante dapibus diam"
                                           >
@@ -122664,13 +121786,13 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav4"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav4"
                                                 element="a"
                                                 href="https://www.ibm.com/support/home/?lnk=msu_usen"
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav4"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav4"
                                                   href="https://www.ibm.com/support/home/?lnk=msu_usen"
                                                 >
                                                   <SideNavLinkText>
@@ -122697,7 +121819,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                         heading="Explore"
                                         id="panel__(0,-1)"
                                         isSubmenu={true}
-                                        navType="default"
+                                        navType="eco"
                                         onBackClick={[Function]}
                                         show={false}
                                         title="Lorem ipsum dolor sit amet"
@@ -122714,7 +121836,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                           />
                                           <ForwardRef(SideNavMenuBackButton)
                                             backButtonText="Back"
-                                            navType="default"
+                                            navType="eco"
                                             onBackClick={[Function]}
                                           >
                                             <li
@@ -122722,7 +121844,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <button
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-back"
+                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
                                                 isbackbutton="true"
                                                 onClick={[Function]}
                                                 onKeyPress={[Function]}
@@ -122771,14 +121893,14 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             Explore
                                           </p>
                                           <ForwardRef
-                                            autoid="dds--masthead-default-sidenav__l0-nav0-list0"
+                                            autoid="dds--masthead-eco-sidenav__l1-nav0-list0"
                                             className={false}
                                             isSideNavExpanded={false}
                                             onToggle={[Function]}
                                             title="Link 1"
                                           >
                                             <SideNavMenu
-                                              autoid="dds--masthead-default-sidenav__l0-nav0-list0"
+                                              autoid="dds--masthead-eco-sidenav__l1-nav0-list0"
                                               buttonRef={null}
                                               className={false}
                                               defaultExpanded={false}
@@ -122804,7 +121926,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                                   >
                                                     <span
                                                       className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-default-sidenav__l0-nav0-list0"
+                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0"
                                                     >
                                                       Link 1
                                                     </span>
@@ -122849,7 +121971,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                           </ForwardRef>
                                           <ForwardRef(SideNavMenuItem)
                                             className={false}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav0-list1"
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav0-list1"
                                             href=""
                                             key="Menu dropdown item with extra long text"
                                           >
@@ -122858,13 +121980,13 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav0-list1"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav0-list1"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav0-list1"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav0-list1"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -122891,7 +122013,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                         heading=""
                                         id="panel__(1,-1)"
                                         isSubmenu={true}
-                                        navType="default"
+                                        navType="eco"
                                         onBackClick={[Function]}
                                         show={false}
                                         title="Consectetur adipiscing elit"
@@ -122908,7 +122030,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                           />
                                           <ForwardRef(SideNavMenuBackButton)
                                             backButtonText="Back"
-                                            navType="default"
+                                            navType="eco"
                                             onBackClick={[Function]}
                                           >
                                             <li
@@ -122916,7 +122038,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <button
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-back"
+                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
                                                 isbackbutton="true"
                                                 onClick={[Function]}
                                                 onKeyPress={[Function]}
@@ -122960,14 +122082,14 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             Consectetur adipiscing elit
                                           </li>
                                           <ForwardRef
-                                            autoid="dds--masthead-default-sidenav__l0-nav1-list0"
+                                            autoid="dds--masthead-eco-sidenav__l1-nav1-list0"
                                             className={false}
                                             isSideNavExpanded={false}
                                             onToggle={[Function]}
                                             title="Link 2"
                                           >
                                             <SideNavMenu
-                                              autoid="dds--masthead-default-sidenav__l0-nav1-list0"
+                                              autoid="dds--masthead-eco-sidenav__l1-nav1-list0"
                                               buttonRef={null}
                                               className={false}
                                               defaultExpanded={false}
@@ -122993,7 +122115,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                                   >
                                                     <span
                                                       className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-default-sidenav__l0-nav1-list0"
+                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0"
                                                     >
                                                       Link 2
                                                     </span>
@@ -123037,14 +122159,14 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             </SideNavMenu>
                                           </ForwardRef>
                                           <ForwardRef
-                                            autoid="dds--masthead-default-sidenav__l0-nav1-list1"
+                                            autoid="dds--masthead-eco-sidenav__l1-nav1-list1"
                                             className={false}
                                             isSideNavExpanded={false}
                                             onToggle={[Function]}
                                             title="Financing"
                                           >
                                             <SideNavMenu
-                                              autoid="dds--masthead-default-sidenav__l0-nav1-list1"
+                                              autoid="dds--masthead-eco-sidenav__l1-nav1-list1"
                                               buttonRef={null}
                                               className={false}
                                               defaultExpanded={false}
@@ -123070,7 +122192,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                                   >
                                                     <span
                                                       className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-default-sidenav__l0-nav1-list1"
+                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1"
                                                     >
                                                       Financing
                                                     </span>
@@ -123126,7 +122248,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                         heading=""
                                         id="panel__(3,-1)"
                                         isSubmenu={true}
-                                        navType="default"
+                                        navType="eco"
                                         onBackClick={[Function]}
                                         show={false}
                                         title="Fusce nec tellus sed augue semper porta"
@@ -123143,7 +122265,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                           />
                                           <ForwardRef(SideNavMenuBackButton)
                                             backButtonText="Back"
-                                            navType="default"
+                                            navType="eco"
                                             onBackClick={[Function]}
                                           >
                                             <li
@@ -123151,7 +122273,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <button
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-back"
+                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
                                                 isbackbutton="true"
                                                 onClick={[Function]}
                                                 onKeyPress={[Function]}
@@ -123195,14 +122317,14 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             Fusce nec tellus sed augue semper porta
                                           </li>
                                           <ForwardRef
-                                            autoid="dds--masthead-default-sidenav__l0-nav3-list0"
+                                            autoid="dds--masthead-eco-sidenav__l1-nav3-list0"
                                             className={false}
                                             isSideNavExpanded={false}
                                             onToggle={[Function]}
                                             title="IBM Developer"
                                           >
                                             <SideNavMenu
-                                              autoid="dds--masthead-default-sidenav__l0-nav3-list0"
+                                              autoid="dds--masthead-eco-sidenav__l1-nav3-list0"
                                               buttonRef={null}
                                               className={false}
                                               defaultExpanded={false}
@@ -123228,7 +122350,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                                   >
                                                     <span
                                                       className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-default-sidenav__l0-nav3-list0"
+                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0"
                                                     >
                                                       IBM Developer
                                                     </span>
@@ -123272,14 +122394,14 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             </SideNavMenu>
                                           </ForwardRef>
                                           <ForwardRef
-                                            autoid="dds--masthead-default-sidenav__l0-nav3-list1"
+                                            autoid="dds--masthead-eco-sidenav__l1-nav3-list1"
                                             className={false}
                                             isSideNavExpanded={false}
                                             onToggle={[Function]}
                                             title="Blockchain"
                                           >
                                             <SideNavMenu
-                                              autoid="dds--masthead-default-sidenav__l0-nav3-list1"
+                                              autoid="dds--masthead-eco-sidenav__l1-nav3-list1"
                                               buttonRef={null}
                                               className={false}
                                               defaultExpanded={false}
@@ -123305,7 +122427,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                                   >
                                                     <span
                                                       className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-default-sidenav__l0-nav3-list1"
+                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1"
                                                     >
                                                       Blockchain
                                                     </span>
@@ -123349,14 +122471,14 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             </SideNavMenu>
                                           </ForwardRef>
                                           <ForwardRef
-                                            autoid="dds--masthead-default-sidenav__l0-nav3-list2"
+                                            autoid="dds--masthead-eco-sidenav__l1-nav3-list2"
                                             className={false}
                                             isSideNavExpanded={false}
                                             onToggle={[Function]}
                                             title="Containers"
                                           >
                                             <SideNavMenu
-                                              autoid="dds--masthead-default-sidenav__l0-nav3-list2"
+                                              autoid="dds--masthead-eco-sidenav__l1-nav3-list2"
                                               buttonRef={null}
                                               className={false}
                                               defaultExpanded={false}
@@ -123382,7 +122504,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                                   >
                                                     <span
                                                       className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-default-sidenav__l0-nav3-list2"
+                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2"
                                                     >
                                                       Containers
                                                     </span>
@@ -123426,14 +122548,14 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             </SideNavMenu>
                                           </ForwardRef>
                                           <ForwardRef
-                                            autoid="dds--masthead-default-sidenav__l0-nav3-list3"
+                                            autoid="dds--masthead-eco-sidenav__l1-nav3-list3"
                                             className={false}
                                             isSideNavExpanded={false}
                                             onToggle={[Function]}
                                             title="Analytics"
                                           >
                                             <SideNavMenu
-                                              autoid="dds--masthead-default-sidenav__l0-nav3-list3"
+                                              autoid="dds--masthead-eco-sidenav__l1-nav3-list3"
                                               buttonRef={null}
                                               className={false}
                                               defaultExpanded={false}
@@ -123459,7 +122581,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                                   >
                                                     <span
                                                       className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-default-sidenav__l0-nav3-list3"
+                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3"
                                                     >
                                                       Analytics
                                                     </span>
@@ -123514,7 +122636,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                         className="bx--side-nav__menu-section-submenu"
                                         id="panel__(0,0)"
                                         isSubmenu={true}
-                                        navType="default"
+                                        navType="eco"
                                         onBackClick={[Function]}
                                         show={false}
                                         title="Link 1"
@@ -123532,7 +122654,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                           />
                                           <ForwardRef(SideNavMenuBackButton)
                                             backButtonText="Back"
-                                            navType="default"
+                                            navType="eco"
                                             onBackClick={[Function]}
                                           >
                                             <li
@@ -123540,7 +122662,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <button
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-back"
+                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
                                                 isbackbutton="true"
                                                 onClick={[Function]}
                                                 onKeyPress={[Function]}
@@ -123584,7 +122706,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             Link 1
                                           </li>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item0"
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item0"
                                             href=""
                                             key="Subnav 1"
                                           >
@@ -123593,13 +122715,13 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item0"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item0"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item0"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item0"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -123614,7 +122736,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item1"
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item1"
                                             href=""
                                             key="Subnav 2"
                                           >
@@ -123623,13 +122745,13 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item1"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item1"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item1"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item1"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -123644,7 +122766,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item2"
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item2"
                                             href=""
                                             key="Subnav 3"
                                           >
@@ -123653,13 +122775,13 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item2"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item2"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item2"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item2"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -123674,7 +122796,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item3"
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item3"
                                             href=""
                                             key="Subnav 4"
                                           >
@@ -123683,13 +122805,13 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item3"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item3"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item3"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item3"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -123715,7 +122837,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                         className="bx--side-nav__menu-section-submenu"
                                         id="panel__(0,1)"
                                         isSubmenu={true}
-                                        navType="default"
+                                        navType="eco"
                                         onBackClick={[Function]}
                                         show={false}
                                         title="Menu dropdown item with extra long text"
@@ -123733,7 +122855,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                           />
                                           <ForwardRef(SideNavMenuBackButton)
                                             backButtonText="Back"
-                                            navType="default"
+                                            navType="eco"
                                             onBackClick={[Function]}
                                           >
                                             <li
@@ -123741,7 +122863,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <button
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-back"
+                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
                                                 isbackbutton="true"
                                                 onClick={[Function]}
                                                 onKeyPress={[Function]}
@@ -123796,7 +122918,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                         className="bx--side-nav__menu-section-submenu"
                                         id="panel__(1,0)"
                                         isSubmenu={true}
-                                        navType="default"
+                                        navType="eco"
                                         onBackClick={[Function]}
                                         show={false}
                                         title="Link 2"
@@ -123814,7 +122936,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                           />
                                           <ForwardRef(SideNavMenuBackButton)
                                             backButtonText="Back"
-                                            navType="default"
+                                            navType="eco"
                                             onBackClick={[Function]}
                                           >
                                             <li
@@ -123822,7 +122944,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <button
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-back"
+                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
                                                 isbackbutton="true"
                                                 onClick={[Function]}
                                                 onKeyPress={[Function]}
@@ -123866,7 +122988,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             Link 2
                                           </li>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item0"
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item0"
                                             href=""
                                             key="Subnav 1"
                                           >
@@ -123875,13 +122997,13 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item0"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item0"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item0"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item0"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -123896,7 +123018,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item1"
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item1"
                                             href=""
                                             key="Subnav 2"
                                           >
@@ -123905,13 +123027,13 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item1"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item1"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item1"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item1"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -123926,7 +123048,523 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item2"
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item2"
+                                            href=""
+                                            key="Subnav 3"
+                                          >
+                                            <li
+                                              className="bx--side-nav__menu-item"
+                                            >
+                                              <Link
+                                                className="bx--side-nav__link"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item2"
+                                                element="a"
+                                                href=""
+                                              >
+                                                <a
+                                                  className="bx--side-nav__link"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item2"
+                                                  href=""
+                                                >
+                                                  <SideNavLinkText>
+                                                    <span
+                                                      className="bx--side-nav__link-text"
+                                                    >
+                                                      Subnav 3
+                                                    </span>
+                                                  </SideNavLinkText>
+                                                </a>
+                                              </Link>
+                                            </li>
+                                          </ForwardRef(SideNavMenuItem)>
+                                          <ForwardRef(SideNavMenuItem)
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item3"
+                                            href=""
+                                            key="Subnav 4"
+                                          >
+                                            <li
+                                              className="bx--side-nav__menu-item"
+                                            >
+                                              <Link
+                                                className="bx--side-nav__link"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item3"
+                                                element="a"
+                                                href=""
+                                              >
+                                                <a
+                                                  className="bx--side-nav__link"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item3"
+                                                  href=""
+                                                >
+                                                  <SideNavLinkText>
+                                                    <span
+                                                      className="bx--side-nav__link-text"
+                                                    >
+                                                      Subnav 4
+                                                    </span>
+                                                  </SideNavLinkText>
+                                                </a>
+                                              </Link>
+                                            </li>
+                                          </ForwardRef(SideNavMenuItem)>
+                                          <button
+                                            aria-hidden={true}
+                                            className="bx--masthead__focus"
+                                            onFocus={[Function]}
+                                          />
+                                        </div>
+                                      </SideNavMenuSection>
+                                      <SideNavMenuSection
+                                        backButtonText="Back"
+                                        className="bx--side-nav__menu-section-submenu"
+                                        id="panel__(1,1)"
+                                        isSubmenu={true}
+                                        navType="eco"
+                                        onBackClick={[Function]}
+                                        show={false}
+                                        title="Financing"
+                                        titleUrl="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
+                                      >
+                                        <div
+                                          aria-hidden={true}
+                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
+                                          id="panel__(1,1)"
+                                        >
+                                          <button
+                                            aria-hidden={true}
+                                            className="bx--masthead__focus"
+                                            onFocus={[Function]}
+                                          />
+                                          <ForwardRef(SideNavMenuBackButton)
+                                            backButtonText="Back"
+                                            navType="eco"
+                                            onBackClick={[Function]}
+                                          >
+                                            <li
+                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
+                                            >
+                                              <button
+                                                className="bx--side-nav__link"
+                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
+                                                isbackbutton="true"
+                                                onClick={[Function]}
+                                                onKeyPress={[Function]}
+                                              >
+                                                <span
+                                                  className="bx--side-nav__link-text"
+                                                >
+                                                  <ForwardRef(ChevronLeft20)>
+                                                    <Icon
+                                                      fill="currentColor"
+                                                      height={20}
+                                                      preserveAspectRatio="xMidYMid meet"
+                                                      viewBox="0 0 32 32"
+                                                      width={20}
+                                                      xmlns="http://www.w3.org/2000/svg"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        fill="currentColor"
+                                                        focusable="false"
+                                                        height={20}
+                                                        preserveAspectRatio="xMidYMid meet"
+                                                        viewBox="0 0 32 32"
+                                                        width={20}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      >
+                                                        <path
+                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
+                                                        />
+                                                      </svg>
+                                                    </Icon>
+                                                  </ForwardRef(ChevronLeft20)>
+                                                  Back
+                                                </span>
+                                              </button>
+                                            </li>
+                                          </ForwardRef(SideNavMenuBackButton)>
+                                          <ForwardRef(SideNavLink)
+                                            className="bx--masthead__side-nav--submemu-section-title"
+                                            element="a"
+                                            href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
+                                            large={false}
+                                          >
+                                            <SideNavItem
+                                              large={false}
+                                            >
+                                              <li
+                                                className="bx--side-nav__item"
+                                              >
+                                                <Link
+                                                  className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
+                                                  element="a"
+                                                  href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
+                                                >
+                                                  <a
+                                                    className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
+                                                    href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
+                                                  >
+                                                    <SideNavLinkText>
+                                                      <span
+                                                        className="bx--side-nav__link-text"
+                                                      >
+                                                        Financing
+                                                        <div
+                                                          className="bx--masthead__side-nav--submemu-section-title__icon"
+                                                        >
+                                                          <ForwardRef(ArrowRight20)>
+                                                            <Icon
+                                                              fill="currentColor"
+                                                              height={20}
+                                                              preserveAspectRatio="xMidYMid meet"
+                                                              viewBox="0 0 20 20"
+                                                              width={20}
+                                                              xmlns="http://www.w3.org/2000/svg"
+                                                            >
+                                                              <svg
+                                                                aria-hidden={true}
+                                                                fill="currentColor"
+                                                                focusable="false"
+                                                                height={20}
+                                                                preserveAspectRatio="xMidYMid meet"
+                                                                viewBox="0 0 20 20"
+                                                                width={20}
+                                                                xmlns="http://www.w3.org/2000/svg"
+                                                              >
+                                                                <path
+                                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
+                                                                />
+                                                              </svg>
+                                                            </Icon>
+                                                          </ForwardRef(ArrowRight20)>
+                                                        </div>
+                                                      </span>
+                                                    </SideNavLinkText>
+                                                  </a>
+                                                </Link>
+                                              </li>
+                                            </SideNavItem>
+                                          </ForwardRef(SideNavLink)>
+                                          <ForwardRef(SideNavMenuItem)
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item0"
+                                            href=""
+                                            key="Subnav 1"
+                                          >
+                                            <li
+                                              className="bx--side-nav__menu-item"
+                                            >
+                                              <Link
+                                                className="bx--side-nav__link"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item0"
+                                                element="a"
+                                                href=""
+                                              >
+                                                <a
+                                                  className="bx--side-nav__link"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item0"
+                                                  href=""
+                                                >
+                                                  <SideNavLinkText>
+                                                    <span
+                                                      className="bx--side-nav__link-text"
+                                                    >
+                                                      Subnav 1
+                                                    </span>
+                                                  </SideNavLinkText>
+                                                </a>
+                                              </Link>
+                                            </li>
+                                          </ForwardRef(SideNavMenuItem)>
+                                          <ForwardRef(SideNavMenuItem)
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item1"
+                                            href=""
+                                            key="Subnav 2"
+                                          >
+                                            <li
+                                              className="bx--side-nav__menu-item"
+                                            >
+                                              <Link
+                                                className="bx--side-nav__link"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item1"
+                                                element="a"
+                                                href=""
+                                              >
+                                                <a
+                                                  className="bx--side-nav__link"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item1"
+                                                  href=""
+                                                >
+                                                  <SideNavLinkText>
+                                                    <span
+                                                      className="bx--side-nav__link-text"
+                                                    >
+                                                      Subnav 2
+                                                    </span>
+                                                  </SideNavLinkText>
+                                                </a>
+                                              </Link>
+                                            </li>
+                                          </ForwardRef(SideNavMenuItem)>
+                                          <ForwardRef(SideNavMenuItem)
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item2"
+                                            href=""
+                                            key="Subnav 3"
+                                          >
+                                            <li
+                                              className="bx--side-nav__menu-item"
+                                            >
+                                              <Link
+                                                className="bx--side-nav__link"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item2"
+                                                element="a"
+                                                href=""
+                                              >
+                                                <a
+                                                  className="bx--side-nav__link"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item2"
+                                                  href=""
+                                                >
+                                                  <SideNavLinkText>
+                                                    <span
+                                                      className="bx--side-nav__link-text"
+                                                    >
+                                                      Subnav 3
+                                                    </span>
+                                                  </SideNavLinkText>
+                                                </a>
+                                              </Link>
+                                            </li>
+                                          </ForwardRef(SideNavMenuItem)>
+                                          <ForwardRef(SideNavMenuItem)
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item3"
+                                            href=""
+                                            key="Subnav 4"
+                                          >
+                                            <li
+                                              className="bx--side-nav__menu-item"
+                                            >
+                                              <Link
+                                                className="bx--side-nav__link"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item3"
+                                                element="a"
+                                                href=""
+                                              >
+                                                <a
+                                                  className="bx--side-nav__link"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item3"
+                                                  href=""
+                                                >
+                                                  <SideNavLinkText>
+                                                    <span
+                                                      className="bx--side-nav__link-text"
+                                                    >
+                                                      Subnav 4
+                                                    </span>
+                                                  </SideNavLinkText>
+                                                </a>
+                                              </Link>
+                                            </li>
+                                          </ForwardRef(SideNavMenuItem)>
+                                          <button
+                                            aria-hidden={true}
+                                            className="bx--masthead__focus"
+                                            onFocus={[Function]}
+                                          />
+                                        </div>
+                                      </SideNavMenuSection>
+                                      <SideNavMenuSection
+                                        backButtonText="Back"
+                                        className="bx--side-nav__menu-section-submenu"
+                                        id="panel__(3,0)"
+                                        isSubmenu={true}
+                                        navType="eco"
+                                        onBackClick={[Function]}
+                                        show={false}
+                                        title="IBM Developer"
+                                        titleUrl="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
+                                      >
+                                        <div
+                                          aria-hidden={true}
+                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
+                                          id="panel__(3,0)"
+                                        >
+                                          <button
+                                            aria-hidden={true}
+                                            className="bx--masthead__focus"
+                                            onFocus={[Function]}
+                                          />
+                                          <ForwardRef(SideNavMenuBackButton)
+                                            backButtonText="Back"
+                                            navType="eco"
+                                            onBackClick={[Function]}
+                                          >
+                                            <li
+                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
+                                            >
+                                              <button
+                                                className="bx--side-nav__link"
+                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
+                                                isbackbutton="true"
+                                                onClick={[Function]}
+                                                onKeyPress={[Function]}
+                                              >
+                                                <span
+                                                  className="bx--side-nav__link-text"
+                                                >
+                                                  <ForwardRef(ChevronLeft20)>
+                                                    <Icon
+                                                      fill="currentColor"
+                                                      height={20}
+                                                      preserveAspectRatio="xMidYMid meet"
+                                                      viewBox="0 0 32 32"
+                                                      width={20}
+                                                      xmlns="http://www.w3.org/2000/svg"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        fill="currentColor"
+                                                        focusable="false"
+                                                        height={20}
+                                                        preserveAspectRatio="xMidYMid meet"
+                                                        viewBox="0 0 32 32"
+                                                        width={20}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      >
+                                                        <path
+                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
+                                                        />
+                                                      </svg>
+                                                    </Icon>
+                                                  </ForwardRef(ChevronLeft20)>
+                                                  Back
+                                                </span>
+                                              </button>
+                                            </li>
+                                          </ForwardRef(SideNavMenuBackButton)>
+                                          <ForwardRef(SideNavLink)
+                                            className="bx--masthead__side-nav--submemu-section-title"
+                                            element="a"
+                                            href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
+                                            large={false}
+                                          >
+                                            <SideNavItem
+                                              large={false}
+                                            >
+                                              <li
+                                                className="bx--side-nav__item"
+                                              >
+                                                <Link
+                                                  className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
+                                                  element="a"
+                                                  href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
+                                                >
+                                                  <a
+                                                    className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
+                                                    href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
+                                                  >
+                                                    <SideNavLinkText>
+                                                      <span
+                                                        className="bx--side-nav__link-text"
+                                                      >
+                                                        IBM Developer
+                                                        <div
+                                                          className="bx--masthead__side-nav--submemu-section-title__icon"
+                                                        >
+                                                          <ForwardRef(ArrowRight20)>
+                                                            <Icon
+                                                              fill="currentColor"
+                                                              height={20}
+                                                              preserveAspectRatio="xMidYMid meet"
+                                                              viewBox="0 0 20 20"
+                                                              width={20}
+                                                              xmlns="http://www.w3.org/2000/svg"
+                                                            >
+                                                              <svg
+                                                                aria-hidden={true}
+                                                                fill="currentColor"
+                                                                focusable="false"
+                                                                height={20}
+                                                                preserveAspectRatio="xMidYMid meet"
+                                                                viewBox="0 0 20 20"
+                                                                width={20}
+                                                                xmlns="http://www.w3.org/2000/svg"
+                                                              >
+                                                                <path
+                                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
+                                                                />
+                                                              </svg>
+                                                            </Icon>
+                                                          </ForwardRef(ArrowRight20)>
+                                                        </div>
+                                                      </span>
+                                                    </SideNavLinkText>
+                                                  </a>
+                                                </Link>
+                                              </li>
+                                            </SideNavItem>
+                                          </ForwardRef(SideNavLink)>
+                                          <ForwardRef(SideNavMenuItem)
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item0"
+                                            href=""
+                                            key="Subnav 1"
+                                          >
+                                            <li
+                                              className="bx--side-nav__menu-item"
+                                            >
+                                              <Link
+                                                className="bx--side-nav__link"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item0"
+                                                element="a"
+                                                href=""
+                                              >
+                                                <a
+                                                  className="bx--side-nav__link"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item0"
+                                                  href=""
+                                                >
+                                                  <SideNavLinkText>
+                                                    <span
+                                                      className="bx--side-nav__link-text"
+                                                    >
+                                                      Subnav 1
+                                                    </span>
+                                                  </SideNavLinkText>
+                                                </a>
+                                              </Link>
+                                            </li>
+                                          </ForwardRef(SideNavMenuItem)>
+                                          <ForwardRef(SideNavMenuItem)
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item1"
+                                            href=""
+                                            key="Subnav 2"
+                                          >
+                                            <li
+                                              className="bx--side-nav__menu-item"
+                                            >
+                                              <Link
+                                                className="bx--side-nav__link"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item1"
+                                                element="a"
+                                                href=""
+                                              >
+                                                <a
+                                                  className="bx--side-nav__link"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item1"
+                                                  href=""
+                                                >
+                                                  <SideNavLinkText>
+                                                    <span
+                                                      className="bx--side-nav__link-text"
+                                                    >
+                                                      Subnav 2
+                                                    </span>
+                                                  </SideNavLinkText>
+                                                </a>
+                                              </Link>
+                                            </li>
+                                          </ForwardRef(SideNavMenuItem)>
+                                          <ForwardRef(SideNavMenuItem)
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item2"
                                             href=""
                                             key="Subnav 3"
                                           >
@@ -123935,13 +123573,13 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item2"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item2"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item2"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item2"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -123956,7 +123594,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item3"
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item3"
                                             href=""
                                             key="Subnav 4"
                                           >
@@ -123965,13 +123603,13 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item3"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item3"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item3"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item3"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -123995,18 +123633,18 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                       <SideNavMenuSection
                                         backButtonText="Back"
                                         className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(1,1)"
+                                        id="panel__(3,1)"
                                         isSubmenu={true}
-                                        navType="default"
+                                        navType="eco"
                                         onBackClick={[Function]}
                                         show={false}
-                                        title="Financing"
-                                        titleUrl="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
+                                        title="Blockchain"
+                                        titleUrl="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
                                       >
                                         <div
                                           aria-hidden={true}
                                           className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(1,1)"
+                                          id="panel__(3,1)"
                                         >
                                           <button
                                             aria-hidden={true}
@@ -124015,7 +123653,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                           />
                                           <ForwardRef(SideNavMenuBackButton)
                                             backButtonText="Back"
-                                            navType="default"
+                                            navType="eco"
                                             onBackClick={[Function]}
                                           >
                                             <li
@@ -124023,7 +123661,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <button
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-back"
+                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
                                                 isbackbutton="true"
                                                 onClick={[Function]}
                                                 onKeyPress={[Function]}
@@ -124064,7 +123702,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                           <ForwardRef(SideNavLink)
                                             className="bx--masthead__side-nav--submemu-section-title"
                                             element="a"
-                                            href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
+                                            href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
                                             large={false}
                                           >
                                             <SideNavItem
@@ -124076,17 +123714,17 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                                 <Link
                                                   className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
                                                   element="a"
-                                                  href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
+                                                  href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
                                                 >
                                                   <a
                                                     className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                    href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
+                                                    href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
                                                   >
                                                     <SideNavLinkText>
                                                       <span
                                                         className="bx--side-nav__link-text"
                                                       >
-                                                        Financing
+                                                        Blockchain
                                                         <div
                                                           className="bx--masthead__side-nav--submemu-section-title__icon"
                                                         >
@@ -124124,7 +123762,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             </SideNavItem>
                                           </ForwardRef(SideNavLink)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item0"
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item0"
                                             href=""
                                             key="Subnav 1"
                                           >
@@ -124133,13 +123771,13 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item0"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item0"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item0"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item0"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -124154,7 +123792,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item1"
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item1"
                                             href=""
                                             key="Subnav 2"
                                           >
@@ -124163,13 +123801,13 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item1"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item1"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item1"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item1"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -124184,7 +123822,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item2"
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item2"
                                             href=""
                                             key="Subnav 3"
                                           >
@@ -124193,13 +123831,13 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item2"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item2"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item2"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item2"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -124214,7 +123852,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item3"
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item3"
                                             href=""
                                             key="Subnav 4"
                                           >
@@ -124223,13 +123861,13 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item3"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item3"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item3"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item3"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -124253,18 +123891,18 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                       <SideNavMenuSection
                                         backButtonText="Back"
                                         className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(3,0)"
+                                        id="panel__(3,2)"
                                         isSubmenu={true}
-                                        navType="default"
+                                        navType="eco"
                                         onBackClick={[Function]}
                                         show={false}
-                                        title="IBM Developer"
-                                        titleUrl="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
+                                        title="Containers"
+                                        titleUrl="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
                                       >
                                         <div
                                           aria-hidden={true}
                                           className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(3,0)"
+                                          id="panel__(3,2)"
                                         >
                                           <button
                                             aria-hidden={true}
@@ -124273,7 +123911,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                           />
                                           <ForwardRef(SideNavMenuBackButton)
                                             backButtonText="Back"
-                                            navType="default"
+                                            navType="eco"
                                             onBackClick={[Function]}
                                           >
                                             <li
@@ -124281,7 +123919,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <button
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-back"
+                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
                                                 isbackbutton="true"
                                                 onClick={[Function]}
                                                 onKeyPress={[Function]}
@@ -124322,7 +123960,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                           <ForwardRef(SideNavLink)
                                             className="bx--masthead__side-nav--submemu-section-title"
                                             element="a"
-                                            href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
+                                            href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
                                             large={false}
                                           >
                                             <SideNavItem
@@ -124334,17 +123972,17 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                                 <Link
                                                   className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
                                                   element="a"
-                                                  href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
+                                                  href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
                                                 >
                                                   <a
                                                     className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                    href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
+                                                    href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
                                                   >
                                                     <SideNavLinkText>
                                                       <span
                                                         className="bx--side-nav__link-text"
                                                       >
-                                                        IBM Developer
+                                                        Containers
                                                         <div
                                                           className="bx--masthead__side-nav--submemu-section-title__icon"
                                                         >
@@ -124382,59 +124020,29 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             </SideNavItem>
                                           </ForwardRef(SideNavLink)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item0"
-                                            href=""
-                                            key="Subnav 1"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item0"
-                                                element="a"
-                                                href=""
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item0"
-                                                  href=""
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 1
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </ForwardRef(SideNavMenuItem)>
-                                          <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item1"
-                                            href=""
-                                            key="Subnav 2"
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item0"
+                                            href="https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn"
+                                            key="Code patterns"
                                           >
                                             <li
                                               className="bx--side-nav__menu-item"
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item1"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item0"
                                                 element="a"
-                                                href=""
+                                                href="https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn"
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item1"
-                                                  href=""
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item0"
+                                                  href="https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn"
                                                 >
                                                   <SideNavLinkText>
                                                     <span
                                                       className="bx--side-nav__link-text"
                                                     >
-                                                      Subnav 2
+                                                      Code patterns
                                                     </span>
                                                   </SideNavLinkText>
                                                 </a>
@@ -124442,29 +124050,29 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item2"
-                                            href=""
-                                            key="Subnav 3"
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item1"
+                                            href="https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn"
+                                            key="Tutorials"
                                           >
                                             <li
                                               className="bx--side-nav__menu-item"
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item2"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item1"
                                                 element="a"
-                                                href=""
+                                                href="https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn"
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item2"
-                                                  href=""
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item1"
+                                                  href="https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn"
                                                 >
                                                   <SideNavLinkText>
                                                     <span
                                                       className="bx--side-nav__link-text"
                                                     >
-                                                      Subnav 3
+                                                      Tutorials
                                                     </span>
                                                   </SideNavLinkText>
                                                 </a>
@@ -124472,29 +124080,29 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item3"
-                                            href=""
-                                            key="Subnav 4"
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item2"
+                                            href="https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn"
+                                            key="Events"
                                           >
                                             <li
                                               className="bx--side-nav__menu-item"
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item3"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item2"
                                                 element="a"
-                                                href=""
+                                                href="https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn"
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item3"
-                                                  href=""
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item2"
+                                                  href="https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn"
                                                 >
                                                   <SideNavLinkText>
                                                     <span
                                                       className="bx--side-nav__link-text"
                                                     >
-                                                      Subnav 4
+                                                      Events
                                                     </span>
                                                   </SideNavLinkText>
                                                 </a>
@@ -124511,18 +124119,18 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                       <SideNavMenuSection
                                         backButtonText="Back"
                                         className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(3,1)"
+                                        id="panel__(3,3)"
                                         isSubmenu={true}
-                                        navType="default"
+                                        navType="eco"
                                         onBackClick={[Function]}
                                         show={false}
-                                        title="Blockchain"
-                                        titleUrl="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
+                                        title="Analytics"
+                                        titleUrl="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
                                       >
                                         <div
                                           aria-hidden={true}
                                           className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(3,1)"
+                                          id="panel__(3,3)"
                                         >
                                           <button
                                             aria-hidden={true}
@@ -124531,7 +124139,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                           />
                                           <ForwardRef(SideNavMenuBackButton)
                                             backButtonText="Back"
-                                            navType="default"
+                                            navType="eco"
                                             onBackClick={[Function]}
                                           >
                                             <li
@@ -124539,7 +124147,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             >
                                               <button
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-back"
+                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
                                                 isbackbutton="true"
                                                 onClick={[Function]}
                                                 onKeyPress={[Function]}
@@ -124580,7 +124188,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                           <ForwardRef(SideNavLink)
                                             className="bx--masthead__side-nav--submemu-section-title"
                                             element="a"
-                                            href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
+                                            href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
                                             large={false}
                                           >
                                             <SideNavItem
@@ -124592,17 +124200,17 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                                 <Link
                                                   className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
                                                   element="a"
-                                                  href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
+                                                  href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
                                                 >
                                                   <a
                                                     className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                    href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
+                                                    href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
                                                   >
                                                     <SideNavLinkText>
                                                       <span
                                                         className="bx--side-nav__link-text"
                                                       >
-                                                        Blockchain
+                                                        Analytics
                                                         <div
                                                           className="bx--masthead__side-nav--submemu-section-title__icon"
                                                         >
@@ -124640,29 +124248,29 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             </SideNavItem>
                                           </ForwardRef(SideNavLink)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item0"
-                                            href=""
-                                            key="Subnav 1"
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item0"
+                                            href="https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
+                                            key="Code patterns"
                                           >
                                             <li
                                               className="bx--side-nav__menu-item"
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item0"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item0"
                                                 element="a"
-                                                href=""
+                                                href="https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item0"
-                                                  href=""
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item0"
+                                                  href="https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
                                                 >
                                                   <SideNavLinkText>
                                                     <span
                                                       className="bx--side-nav__link-text"
                                                     >
-                                                      Subnav 1
+                                                      Code patterns
                                                     </span>
                                                   </SideNavLinkText>
                                                 </a>
@@ -124670,1953 +124278,2379 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item1"
-                                            href=""
-                                            key="Subnav 2"
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item1"
+                                            href="https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
+                                            key="Tutorials"
+                                          >
+                                            <li
+                                              className="bx--side-nav__menu-item"
+                                            >
+                                              <Link
+                                                className="bx--side-nav__link"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item1"
+                                                element="a"
+                                                href="https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
+                                              >
+                                                <a
+                                                  className="bx--side-nav__link"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item1"
+                                                  href="https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
+                                                >
+                                                  <SideNavLinkText>
+                                                    <span
+                                                      className="bx--side-nav__link-text"
+                                                    >
+                                                      Tutorials
+                                                    </span>
+                                                  </SideNavLinkText>
+                                                </a>
+                                              </Link>
+                                            </li>
+                                          </ForwardRef(SideNavMenuItem)>
+                                          <ForwardRef(SideNavMenuItem)
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item2"
+                                            href="https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
+                                            key="Events"
+                                          >
+                                            <li
+                                              className="bx--side-nav__menu-item"
+                                            >
+                                              <Link
+                                                className="bx--side-nav__link"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item2"
+                                                element="a"
+                                                href="https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
+                                              >
+                                                <a
+                                                  className="bx--side-nav__link"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item2"
+                                                  href="https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
+                                                >
+                                                  <SideNavLinkText>
+                                                    <span
+                                                      className="bx--side-nav__link-text"
+                                                    >
+                                                      Events
+                                                    </span>
+                                                  </SideNavLinkText>
+                                                </a>
+                                              </Link>
+                                            </li>
+                                          </ForwardRef(SideNavMenuItem)>
+                                          <ForwardRef(SideNavMenuItem)
+                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item3"
+                                            href="https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn"
+                                            key="Developer community"
                                           >
                                             <li
                                               className="bx--side-nav__menu-item"
                                             >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item1"
-                                                element="a"
-                                                href=""
+                                              <Link
+                                                className="bx--side-nav__link"
+                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item3"
+                                                element="a"
+                                                href="https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn"
+                                              >
+                                                <a
+                                                  className="bx--side-nav__link"
+                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item3"
+                                                  href="https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn"
+                                                >
+                                                  <SideNavLinkText>
+                                                    <span
+                                                      className="bx--side-nav__link-text"
+                                                    >
+                                                      Developer community
+                                                    </span>
+                                                  </SideNavLinkText>
+                                                </a>
+                                              </Link>
+                                            </li>
+                                          </ForwardRef(SideNavMenuItem)>
+                                          <button
+                                            aria-hidden={true}
+                                            className="bx--masthead__focus"
+                                            onFocus={[Function]}
+                                          />
+                                        </div>
+                                      </SideNavMenuSection>
+                                    </div>
+                                  </div>
+                                </HeaderSideNavItems>
+                              </ul>
+                            </SideNavItems>
+                          </nav>
+                        </nav>
+                      </ForwardRef(SideNav)>
+                    </MastheadLeftNav>
+                    <IbmLogo
+                      autoid="dds--masthead-eco__l0-logo"
+                      isSearchActive={false}
+                    >
+                      <div
+                        className="bx--header__logo"
+                      >
+                        <ConditionalWrapper
+                          wrapper={[Function]}
+                        >
+                          <a
+                            aria-label="IBM®"
+                            data-autoid="dds--masthead-eco__l0-logo"
+                            href="http://www.ibm.com"
+                          >
+                            <MastheadLogo
+                              height="23"
+                              viewBox="0 0 58 23"
+                              width="58"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <svg
+                                height="23"
+                                viewBox="0 0 58 23"
+                                width="58"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M58 21.467V23h-7.632v-1.533H58zm-18.316 0V23h-7.631v-1.533h7.631zm5.955 0L45.025 23l-.606-1.533h1.22zm-17.097 0A6.285 6.285 0 0 1 24.391 23H12.21v-1.533zm-17.858 0V23H0v-1.533h10.684zm29-3.067v1.533h-7.631V18.4h7.631zm7.148 0l-.594 1.533H43.82l-.598-1.533h3.609zm-16.764 0a5.719 5.719 0 0 1-.64 1.533H12.21V18.4zm-19.384 0v1.533H0V18.4h10.684zM58 18.4v1.533h-7.632V18.4H58zm-3.053-3.067v1.534h-4.579v-1.534h4.58zm-15.263 0v1.534h-4.579v-1.534h4.58zm8.345 0l-.6 1.534h-4.806l-.604-1.534h6.01zm-18.174 0c.137.49.213 1.003.213 1.534h-5.647v-1.534zm-10.013 0v1.534h-4.579v-1.534h4.58zm-12.21 0v1.534h-4.58v-1.534h4.58zm47.315-3.066V13.8h-4.579v-1.533h4.58zm-15.263 0V13.8h-4.579v-1.533h4.58zm9.541 0l-.597 1.533h-7.22l-.591-1.533h8.408zm-21.248 0c.527.432.98.951 1.328 1.533H15.263v-1.533zm-20.345 0V13.8h-4.58v-1.533h4.58zM44.599 9.2l.427 1.24.428-1.24h9.493v1.533h-4.579V9.324l-.519 1.41h-9.661l-.504-1.41v1.41h-4.579V9.2H44.6zm-36.967 0v1.533h-4.58V9.2h4.58zm21.673 0a5.95 5.95 0 0 1-1.328 1.533H15.263V9.2zm25.642-3.067v1.534h-8.964l.54-1.534h8.424zm-11.413 0l.54 1.534h-8.969V6.133h8.43zm-13.466 0c0 .531-.076 1.045-.213 1.534H24.42V6.133zm-10.226 0v1.534h-4.579V6.133h4.58zm-12.21 0v1.534h-4.58V6.133h4.58zm34.845-3.066l.53 1.533H32.054V3.067h10.424zm15.523 0V4.6H47.04l.55-1.533H58zm-28.573 0c.284.473.504.988.641 1.533H12.211V3.067zm-18.743 0V4.6H0V3.067h10.684zM41.406 0l.54 1.533h-9.893V0h9.353zM58 0v1.533h-9.881L48.647 0H58zM24.39 0c1.601 0 3.057.581 4.152 1.533H12.211V0zM10.685 0v1.533H0V0h10.684z"
+                                  fill="#161616"
+                                  fillRule="evenodd"
+                                />
+                              </svg>
+                            </MastheadLogo>
+                          </a>
+                        </ConditionalWrapper>
+                      </div>
+                    </IbmLogo>
+                    <div
+                      className="bx--header__search bx--masthead__platform"
+                    >
+                      <MastheadSearch
+                        initialSearchTerm=""
+                        isSearchActive={false}
+                        navType="eco"
+                        onChangeSearchActive={[Function]}
+                        placeHolderText="Search all of IBM"
+                        renderValue={3}
+                        searchOpenOnload={false}
+                      >
+                        <div
+                          className="bx--masthead__search"
+                          data-autoid="dds--masthead__search"
+                        >
+                          <div
+                            className="bx--header__search--actions"
+                          >
+                            <HeaderGlobalAction
+                              aria-label="Open IBM search field"
+                              className="bx--header__search--search"
+                              data-autoid="dds--masthead-eco__l0-search"
+                              onClick={[Function]}
+                              tabIndex="0"
+                            >
+                              <Button
+                                aria-label="Open IBM search field"
+                                className="bx--header__search--search bx--header__action"
+                                dangerDescription="danger"
+                                data-autoid="dds--masthead-eco__l0-search"
+                                disabled={false}
+                                hasIconOnly={true}
+                                iconDescription="Open IBM search field"
+                                isExpressive={false}
+                                kind="primary"
+                                onClick={[Function]}
+                                size="default"
+                                tabIndex="0"
+                                tooltipAlignment="center"
+                                tooltipPosition="bottom"
+                                type="button"
+                              >
+                                <button
+                                  aria-describedby={null}
+                                  aria-label="Open IBM search field"
+                                  aria-pressed={null}
+                                  className="bx--header__search--search bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
+                                  data-autoid="dds--masthead-eco__l0-search"
+                                  disabled={false}
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onMouseEnter={[Function]}
+                                  onMouseLeave={[Function]}
+                                  tabIndex="0"
+                                  type="button"
+                                >
+                                  <div
+                                    className="bx--assistive-text"
+                                    onMouseEnter={[Function]}
+                                  >
+                                    Open IBM search field
+                                  </div>
+                                  <ForwardRef(Search20)>
+                                    <Icon
+                                      fill="currentColor"
+                                      height={20}
+                                      preserveAspectRatio="xMidYMid meet"
+                                      viewBox="0 0 32 32"
+                                      width={20}
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        fill="currentColor"
+                                        focusable="false"
+                                        height={20}
+                                        preserveAspectRatio="xMidYMid meet"
+                                        viewBox="0 0 32 32"
+                                        width={20}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
+                                        />
+                                      </svg>
+                                    </Icon>
+                                  </ForwardRef(Search20)>
+                                </button>
+                              </Button>
+                            </HeaderGlobalAction>
+                            <HeaderGlobalAction
+                              aria-label="Close"
+                              className="bx--header__search--close"
+                              data-autoid="dds--masthead-eco__l0-search--close"
+                              onClick={[Function]}
+                            >
+                              <Button
+                                aria-label="Close"
+                                className="bx--header__search--close bx--header__action"
+                                dangerDescription="danger"
+                                data-autoid="dds--masthead-eco__l0-search--close"
+                                disabled={false}
+                                hasIconOnly={true}
+                                iconDescription="Close"
+                                isExpressive={false}
+                                kind="primary"
+                                onClick={[Function]}
+                                size="default"
+                                tabIndex={0}
+                                tooltipAlignment="center"
+                                tooltipPosition="bottom"
+                                type="button"
+                              >
+                                <button
+                                  aria-describedby={null}
+                                  aria-label="Close"
+                                  aria-pressed={null}
+                                  className="bx--header__search--close bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
+                                  data-autoid="dds--masthead-eco__l0-search--close"
+                                  disabled={false}
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onMouseEnter={[Function]}
+                                  onMouseLeave={[Function]}
+                                  tabIndex={0}
+                                  type="button"
+                                >
+                                  <div
+                                    className="bx--assistive-text"
+                                    onMouseEnter={[Function]}
+                                  >
+                                    Close
+                                  </div>
+                                  <ForwardRef(Close20)>
+                                    <Icon
+                                      fill="currentColor"
+                                      height={20}
+                                      preserveAspectRatio="xMidYMid meet"
+                                      viewBox="0 0 32 32"
+                                      width={20}
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        fill="currentColor"
+                                        focusable="false"
+                                        height={20}
+                                        preserveAspectRatio="xMidYMid meet"
+                                        viewBox="0 0 32 32"
+                                        width={20}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
+                                        />
+                                      </svg>
+                                    </Icon>
+                                  </ForwardRef(Close20)>
+                                </button>
+                              </Button>
+                            </HeaderGlobalAction>
+                          </div>
+                        </div>
+                      </MastheadSearch>
+                    </div>
+                    <HeaderGlobalBar
+                      className="bx--header__profile"
+                    >
+                      <div
+                        className="bx--header__global bx--header__profile"
+                      >
+                        <MastheadProfile
+                          navType="eco"
+                          overflowMenuItemProps={
+                            Object {
+                              "wrapperClassName": "bx--masthead__profile-item",
+                            }
+                          }
+                          overflowMenuProps={
+                            Object {
+                              "ariaLabel": "User Profile",
+                              "data-autoid": "dds--masthead-eco__l0-account",
+                              "flipped": true,
+                              "onOpen": [Function],
+                              "renderIcon": [Function],
+                              "style": Object {
+                                "width": "3rem",
+                              },
+                            }
+                          }
+                          profileMenu={Array []}
+                        >
+                          <ForwardRef(OverflowMenu)
+                            ariaLabel="User Profile"
+                            className="bx--header__action"
+                            data-autoid="dds--masthead-eco__l0-account"
+                            flipped={true}
+                            onOpen={[Function]}
+                            renderIcon={[Function]}
+                            style={
+                              Object {
+                                "width": "3rem",
+                              }
+                            }
+                          >
+                            <OverflowMenu
+                              ariaLabel="User Profile"
+                              className="bx--header__action"
+                              data-autoid="dds--masthead-eco__l0-account"
+                              direction="bottom"
+                              flipped={true}
+                              iconDescription="open and close list of options"
+                              innerRef={null}
+                              light={false}
+                              menuOffset={[Function]}
+                              menuOffsetFlip={[Function]}
+                              onClick={[Function]}
+                              onClose={[Function]}
+                              onKeyDown={[Function]}
+                              onOpen={[Function]}
+                              open={false}
+                              renderIcon={[Function]}
+                              selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
+                              style={
+                                Object {
+                                  "width": "3rem",
+                                }
+                              }
+                            >
+                              <ClickListener
+                                onClickOutside={[Function]}
+                              >
+                                <button
+                                  aria-expanded={false}
+                                  aria-haspopup={true}
+                                  aria-label="User Profile"
+                                  className="bx--header__action bx--overflow-menu"
+                                  data-autoid="dds--masthead-eco__l0-account"
+                                  onClick={[Function]}
+                                  onClose={[Function]}
+                                  onKeyDown={[Function]}
+                                  open={false}
+                                  style={
+                                    Object {
+                                      "width": "3rem",
+                                    }
+                                  }
+                                  type="button"
+                                >
+                                  <renderIcon
+                                    aria-label="open and close list of options"
+                                    className="bx--overflow-menu__icon"
+                                    onClick={[Function]}
+                                    onKeyDown={[Function]}
+                                  >
+                                    <ForwardRef(User20)>
+                                      <Icon
+                                        fill="currentColor"
+                                        height={20}
+                                        preserveAspectRatio="xMidYMid meet"
+                                        viewBox="0 0 32 32"
+                                        width={20}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <svg
+                                          aria-hidden={true}
+                                          fill="currentColor"
+                                          focusable="false"
+                                          height={20}
+                                          preserveAspectRatio="xMidYMid meet"
+                                          viewBox="0 0 32 32"
+                                          width={20}
+                                          xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                          <path
+                                            d="M16 4a5 5 0 11-5 5 5 5 0 015-5m0-2a7 7 0 107 7A7 7 0 0016 2zM26 30H24V25a5 5 0 00-5-5H13a5 5 0 00-5 5v5H6V25a7 7 0 017-7h6a7 7 0 017 7z"
+                                          />
+                                        </svg>
+                                      </Icon>
+                                    </ForwardRef(User20)>
+                                  </renderIcon>
+                                </button>
+                              </ClickListener>
+                            </OverflowMenu>
+                          </ForwardRef(OverflowMenu)>
+                        </MastheadProfile>
+                      </div>
+                    </HeaderGlobalBar>
+                  </header>
+                </Header>
+              </div>
+              <div>
+                <MastheadL1
+                  isShort={false}
+                  navType="eco"
+                  navigationL1={
+                    Array [
+                      Object {
+                        "hasMegapanel": false,
+                        "hasMenu": true,
+                        "menuSections": Array [
+                          Object {
+                            "heading": "Explore",
+                            "menuItems": Array [
+                              Object {
+                                "megapanelContent": Object {
+                                  "description": "",
+                                  "feature": Object {
+                                    "heading": "",
+                                    "imageUrl": "",
+                                    "linkTitle": "",
+                                    "linkUrl": "",
+                                  },
+                                  "headingTitle": "",
+                                  "headingUrl": "",
+                                  "quickLinks": Object {
+                                    "links": Array [
+                                      Object {
+                                        "title": "Subnav 1",
+                                        "url": "",
+                                      },
+                                      Object {
+                                        "title": "Subnav 2",
+                                        "url": "",
+                                      },
+                                      Object {
+                                        "title": "Subnav 3",
+                                        "url": "",
+                                      },
+                                      Object {
+                                        "title": "Subnav 4",
+                                        "url": "",
+                                      },
+                                    ],
+                                    "title": "Title",
+                                  },
+                                },
+                                "title": "Link 1",
+                                "url": "",
+                              },
+                              Object {
+                                "title": "Menu dropdown item with extra long text",
+                                "url": "",
+                              },
+                            ],
+                          },
+                        ],
+                        "title": "Lorem ipsum dolor sit amet",
+                        "titleEnglish": "Lorem ipsum dolor sit amet",
+                        "url": "",
+                      },
+                      Object {
+                        "hasMenu": true,
+                        "menuSections": Array [
+                          Object {
+                            "heading": "",
+                            "menuItems": Array [
+                              Object {
+                                "megapanelContent": Object {
+                                  "description": "Reimagine your business, designing and building the platforms necessary for growth",
+                                  "feature": Object {
+                                    "heading": "IBM Services, your Digital Reinvention â„¢ partner",
+                                    "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
+                                    "linkTitle": "Explore all our business consulting and technology services",
+                                    "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
+                                  },
+                                  "headingTitle": "Services",
+                                  "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
+                                  "quickLinks": Object {
+                                    "links": Array [
+                                      Object {
+                                        "title": "Subnav 1",
+                                        "url": "",
+                                      },
+                                      Object {
+                                        "title": "Subnav 2",
+                                        "url": "",
+                                      },
+                                      Object {
+                                        "title": "Subnav 3",
+                                        "url": "",
+                                      },
+                                      Object {
+                                        "title": "Subnav 4",
+                                        "url": "",
+                                      },
+                                    ],
+                                    "title": "Quicklinks",
+                                  },
+                                },
+                                "title": "Link 2",
+                                "url": "",
+                              },
+                              Object {
+                                "megapanelContent": Object {
+                                  "description": "Funding options that fit your business",
+                                  "feature": Object {
+                                    "heading": "Cloud financing strategies that work for your business",
+                                    "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
+                                    "linkTitle": "Committed to cloud? Make the most of your cash flow.",
+                                    "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
+                                  },
+                                  "headingTitle": "Financing",
+                                  "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
+                                  "quickLinks": Object {
+                                    "links": Array [
+                                      Object {
+                                        "title": "Subnav 1",
+                                        "url": "",
+                                      },
+                                      Object {
+                                        "title": "Subnav 2",
+                                        "url": "",
+                                      },
+                                      Object {
+                                        "title": "Subnav 3",
+                                        "url": "",
+                                      },
+                                      Object {
+                                        "title": "Subnav 4",
+                                        "url": "",
+                                      },
+                                    ],
+                                    "title": "Quicklinks",
+                                  },
+                                },
+                                "title": "Financing",
+                                "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
+                              },
+                            ],
+                          },
+                        ],
+                        "title": "Consectetur adipiscing elit",
+                        "titleEnglish": "Consectetur adipiscing elit",
+                        "url": "",
+                      },
+                      Object {
+                        "hasMegapanel": false,
+                        "hasMenu": false,
+                        "menuSections": Array [],
+                        "title": "Nulla quis sem at nibh elementum imperdiet",
+                        "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
+                        "url": "https://www.ibm.com/industries?lnk=min",
+                      },
+                      Object {
+                        "hasMegapanel": false,
+                        "hasMenu": true,
+                        "menuSections": Array [
+                          Object {
+                            "heading": "",
+                            "menuItems": Array [
+                              Object {
+                                "megapanelContent": Object {
+                                  "description": "",
+                                  "feature": Object {
+                                    "heading": "IBM Developer newsletters",
+                                    "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
+                                    "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
+                                    "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
+                                  },
+                                  "headingTitle": "IBM Developer",
+                                  "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
+                                  "quickLinks": Object {
+                                    "links": Array [
+                                      Object {
+                                        "title": "Subnav 1",
+                                        "url": "",
+                                      },
+                                      Object {
+                                        "title": "Subnav 2",
+                                        "url": "",
+                                      },
+                                      Object {
+                                        "title": "Subnav 3",
+                                        "url": "",
+                                      },
+                                      Object {
+                                        "title": "Subnav 4",
+                                        "url": "",
+                                      },
+                                    ],
+                                    "title": "Quicklinks",
+                                  },
+                                },
+                                "title": "IBM Developer",
+                                "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
+                              },
+                              Object {
+                                "megapanelContent": Object {
+                                  "description": "",
+                                  "feature": Object {
+                                    "heading": "Blockchain 101",
+                                    "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
+                                    "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
+                                    "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
+                                  },
+                                  "headingTitle": "Blockchain",
+                                  "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
+                                  "quickLinks": Object {
+                                    "links": Array [
+                                      Object {
+                                        "title": "Subnav 1",
+                                        "url": "",
+                                      },
+                                      Object {
+                                        "title": "Subnav 2",
+                                        "url": "",
+                                      },
+                                      Object {
+                                        "title": "Subnav 3",
+                                        "url": "",
+                                      },
+                                      Object {
+                                        "title": "Subnav 4",
+                                        "url": "",
+                                      },
+                                    ],
+                                    "title": "Quicklinks",
+                                  },
+                                },
+                                "title": "Blockchain",
+                                "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
+                              },
+                              Object {
+                                "megapanelContent": Object {
+                                  "description": "",
+                                  "feature": Object {
+                                    "heading": "Make sense of Kubernetes",
+                                    "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
+                                    "linkTitle": "Deploy a simple Python application with Kubernetes",
+                                    "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
+                                  },
+                                  "headingTitle": "Containers",
+                                  "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
+                                  "quickLinks": Object {
+                                    "links": Array [
+                                      Object {
+                                        "title": "Code patterns",
+                                        "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                                      },
+                                      Object {
+                                        "title": "Tutorials",
+                                        "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                                      },
+                                      Object {
+                                        "title": "Events",
+                                        "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                                      },
+                                    ],
+                                    "title": "Quicklinks",
+                                  },
+                                },
+                                "title": "Containers",
+                                "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
+                              },
+                              Object {
+                                "megapanelContent": Object {
+                                  "description": "",
+                                  "feature": Object {
+                                    "heading": "Train your data no matter where it lives",
+                                    "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
+                                    "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
+                                    "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
+                                  },
+                                  "headingTitle": "Analytics",
+                                  "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                                  "quickLinks": Object {
+                                    "links": Array [
+                                      Object {
+                                        "title": "Code patterns",
+                                        "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                                      },
+                                      Object {
+                                        "title": "Tutorials",
+                                        "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                                      },
+                                      Object {
+                                        "title": "Events",
+                                        "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                                      },
+                                      Object {
+                                        "title": "Developer community",
+                                        "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
+                                      },
+                                    ],
+                                    "title": "Quicklinks",
+                                  },
+                                },
+                                "title": "Analytics",
+                                "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                              },
+                            ],
+                          },
+                        ],
+                        "title": "Fusce nec tellus sed augue semper porta",
+                        "titleEnglish": "Fusce nec tellus sed augue semper porta",
+                        "url": "",
+                      },
+                      Object {
+                        "hasMegapanel": false,
+                        "hasMenu": false,
+                        "menuSections": Array [],
+                        "title": "Sed cursus ante dapibus diam",
+                        "titleEnglish": "Sed cursus ante dapibus diam",
+                        "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
+                      },
+                    ]
+                  }
+                  platform={
+                    Object {
+                      "name": "Stock Charts",
+                      "url": "https://www.example.com",
+                    }
+                  }
+                  selectedMenuItem="Lorem ipsum dolor sit amet"
+                  titleLink={null}
+                >
+                  <div
+                    className="bx--masthead__l1"
+                  >
+                    <div
+                      className="bx--masthead__l1-inner-container"
+                    >
+                      <div
+                        aria-selected={false}
+                        className="bx--masthead__l1-name"
+                      >
+                        <span
+                          className="bx--masthead__l1-name-title"
+                        >
+                          <a
+                            href="https://www.example.com"
+                          >
+                            Stock Charts
+                          </a>
+                        </span>
+                      </div>
+                      <HeaderNavContainer>
+                        <div
+                          className="bx--header__nav-container"
+                        >
+                          <div
+                            className="bx--header__nav-content"
+                          >
+                            <div
+                              className="bx--sub-content-left"
+                            />
+                            <div
+                              className="bx--sub-content-right"
+                            />
+                            <HeaderNavigation
+                              aria-label=""
+                              className="bx--masthead__l1-nav"
+                            >
+                              <nav
+                                aria-label=""
+                                className="bx--header__nav bx--masthead__l1-nav"
+                              >
+                                <ul
+                                  aria-label=""
+                                  className="bx--header__menu-bar"
+                                >
+                                  <ForwardRef
+                                    aria-label="Lorem ipsum dolor sit amet"
+                                    autoId="dds--masthead-eco__l1-nav0"
+                                    className=""
+                                    key=".$0"
+                                    menuLinkName="Lorem ipsum dolor sit amet"
+                                    selected={true}
+                                  >
+                                    <HeaderMenu
+                                      aria-label="Lorem ipsum dolor sit amet"
+                                      autoId="dds--masthead-eco__l1-nav0"
+                                      className=""
+                                      focusRef={[Function]}
+                                      menuLinkName="Lorem ipsum dolor sit amet"
+                                      renderMenuContent={[Function]}
+                                      selected={true}
+                                      setOverlay={[Function]}
+                                    >
+                                      <li
+                                        className="bx--header__submenu"
+                                        data-autoid="dds--masthead-eco__l1-nav0"
+                                        onBlur={[Function]}
+                                        onKeyDown={[Function]}
+                                      >
+                                        <a
+                                          aria-expanded={false}
+                                          aria-haspopup="menu"
+                                          aria-label="Lorem ipsum dolor sit amet"
+                                          aria-selected="true"
+                                          className="bx--header__menu-item bx--header__menu-title"
+                                          href="#"
+                                          onClick={[Function]}
+                                          onKeyDown={[Function]}
+                                          role="menuitem"
+                                          tabIndex={0}
+                                        >
+                                          Lorem ipsum dolor sit amet
+                                          <defaultRenderMenuContent>
+                                            <ForwardRef(ChevronDown20)
+                                              className="bx--header__menu-arrow"
+                                            >
+                                              <Icon
+                                                className="bx--header__menu-arrow"
+                                                fill="currentColor"
+                                                height={20}
+                                                preserveAspectRatio="xMidYMid meet"
+                                                viewBox="0 0 32 32"
+                                                width={20}
+                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item1"
-                                                  href=""
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="bx--header__menu-arrow"
+                                                  fill="currentColor"
+                                                  focusable="false"
+                                                  height={20}
+                                                  preserveAspectRatio="xMidYMid meet"
+                                                  viewBox="0 0 32 32"
+                                                  width={20}
+                                                  xmlns="http://www.w3.org/2000/svg"
                                                 >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 2
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </ForwardRef(SideNavMenuItem)>
-                                          <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item2"
+                                                  <path
+                                                    d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
+                                                  />
+                                                </svg>
+                                              </Icon>
+                                            </ForwardRef(ChevronDown20)>
+                                          </defaultRenderMenuContent>
+                                        </a>
+                                        <ul
+                                          aria-label="Lorem ipsum dolor sit amet"
+                                          className="bx--header__menu"
+                                        >
+                                          <ForwardRef(HeaderMenuItem)
+                                            data-autoid="dds--masthead-eco__l1-nav0-item0"
                                             href=""
-                                            key="Subnav 3"
+                                            key=".$Link 1"
+                                            refs={[Function]}
+                                            role="none"
                                           >
                                             <li
-                                              className="bx--side-nav__menu-item"
+                                              role="none"
                                             >
                                               <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item2"
+                                                className="bx--header__menu-item"
+                                                data-autoid="dds--masthead-eco__l1-nav0-item0"
                                                 element="a"
                                                 href=""
+                                                refs={[Function]}
+                                                tabIndex={0}
                                               >
                                                 <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item2"
+                                                  className="bx--header__menu-item"
+                                                  data-autoid="dds--masthead-eco__l1-nav0-item0"
                                                   href=""
+                                                  refs={[Function]}
+                                                  tabIndex={0}
                                                 >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 3
-                                                    </span>
-                                                  </SideNavLinkText>
+                                                  <span
+                                                    className="bx--text-truncate--end"
+                                                  >
+                                                    Link 1
+                                                  </span>
                                                 </a>
                                               </Link>
                                             </li>
-                                          </ForwardRef(SideNavMenuItem)>
-                                          <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item3"
+                                          </ForwardRef(HeaderMenuItem)>
+                                          <ForwardRef(HeaderMenuItem)
+                                            data-autoid="dds--masthead-eco__l1-nav0-item1"
                                             href=""
-                                            key="Subnav 4"
+                                            key=".$Menu dropdown item with extra long text"
+                                            refs={[Function]}
+                                            role="none"
                                           >
                                             <li
-                                              className="bx--side-nav__menu-item"
+                                              role="none"
                                             >
                                               <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item3"
+                                                className="bx--header__menu-item"
+                                                data-autoid="dds--masthead-eco__l1-nav0-item1"
                                                 element="a"
                                                 href=""
+                                                refs={[Function]}
+                                                tabIndex={0}
                                               >
                                                 <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item3"
+                                                  className="bx--header__menu-item"
+                                                  data-autoid="dds--masthead-eco__l1-nav0-item1"
                                                   href=""
+                                                  refs={[Function]}
+                                                  tabIndex={0}
                                                 >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 4
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </ForwardRef(SideNavMenuItem)>
-                                          <button
-                                            aria-hidden={true}
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          />
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(3,2)"
-                                        isSubmenu={true}
-                                        navType="default"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Containers"
-                                        titleUrl="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(3,2)"
-                                        >
-                                          <button
-                                            aria-hidden={true}
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          />
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="default"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <ForwardRef(SideNavLink)
-                                            className="bx--masthead__side-nav--submemu-section-title"
-                                            element="a"
-                                            href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                            large={false}
-                                          >
-                                            <SideNavItem
-                                              large={false}
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <Link
-                                                  className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                  element="a"
-                                                  href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                >
-                                                  <a
-                                                    className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                    href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                  >
-                                                    <SideNavLinkText>
-                                                      <span
-                                                        className="bx--side-nav__link-text"
-                                                      >
-                                                        Containers
-                                                        <div
-                                                          className="bx--masthead__side-nav--submemu-section-title__icon"
-                                                        >
-                                                          <ForwardRef(ArrowRight20)>
-                                                            <Icon
-                                                              fill="currentColor"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <svg
-                                                                aria-hidden={true}
-                                                                fill="currentColor"
-                                                                focusable="false"
-                                                                height={20}
-                                                                preserveAspectRatio="xMidYMid meet"
-                                                                viewBox="0 0 20 20"
-                                                                width={20}
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                              >
-                                                                <path
-                                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                />
-                                                              </svg>
-                                                            </Icon>
-                                                          </ForwardRef(ArrowRight20)>
-                                                        </div>
-                                                      </span>
-                                                    </SideNavLinkText>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </SideNavItem>
-                                          </ForwardRef(SideNavLink)>
-                                          <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item0"
-                                            href="https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Code patterns"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item0"
-                                                element="a"
-                                                href="https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item0"
-                                                  href="https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Code patterns
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </ForwardRef(SideNavMenuItem)>
-                                          <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item1"
-                                            href="https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Tutorials"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item1"
-                                                element="a"
-                                                href="https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item1"
-                                                  href="https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Tutorials
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </ForwardRef(SideNavMenuItem)>
-                                          <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item2"
-                                            href="https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Events"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item2"
-                                                element="a"
-                                                href="https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item2"
-                                                  href="https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Events
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </ForwardRef(SideNavMenuItem)>
-                                          <button
-                                            aria-hidden={true}
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          />
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(3,3)"
-                                        isSubmenu={true}
-                                        navType="default"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Analytics"
-                                        titleUrl="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(3,3)"
-                                        >
-                                          <button
-                                            aria-hidden={true}
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          />
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="default"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <ForwardRef(SideNavLink)
-                                            className="bx--masthead__side-nav--submemu-section-title"
-                                            element="a"
-                                            href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                            large={false}
-                                          >
-                                            <SideNavItem
-                                              large={false}
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <Link
-                                                  className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                  element="a"
-                                                  href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                >
-                                                  <a
-                                                    className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                    href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                  >
-                                                    <SideNavLinkText>
-                                                      <span
-                                                        className="bx--side-nav__link-text"
-                                                      >
-                                                        Analytics
-                                                        <div
-                                                          className="bx--masthead__side-nav--submemu-section-title__icon"
-                                                        >
-                                                          <ForwardRef(ArrowRight20)>
-                                                            <Icon
-                                                              fill="currentColor"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <svg
-                                                                aria-hidden={true}
-                                                                fill="currentColor"
-                                                                focusable="false"
-                                                                height={20}
-                                                                preserveAspectRatio="xMidYMid meet"
-                                                                viewBox="0 0 20 20"
-                                                                width={20}
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                              >
-                                                                <path
-                                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                />
-                                                              </svg>
-                                                            </Icon>
-                                                          </ForwardRef(ArrowRight20)>
-                                                        </div>
-                                                      </span>
-                                                    </SideNavLinkText>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </SideNavItem>
-                                          </ForwardRef(SideNavLink)>
-                                          <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item0"
-                                            href="https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Code patterns"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item0"
-                                                element="a"
-                                                href="https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item0"
-                                                  href="https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Code patterns
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </ForwardRef(SideNavMenuItem)>
-                                          <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item1"
-                                            href="https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Tutorials"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item1"
-                                                element="a"
-                                                href="https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item1"
-                                                  href="https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Tutorials
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </ForwardRef(SideNavMenuItem)>
-                                          <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item2"
-                                            href="https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Events"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item2"
-                                                element="a"
-                                                href="https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item2"
-                                                  href="https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Events
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </ForwardRef(SideNavMenuItem)>
-                                          <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item3"
-                                            href="https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Developer community"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item3"
-                                                element="a"
-                                                href="https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item3"
-                                                  href="https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Developer community
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </ForwardRef(SideNavMenuItem)>
-                                          <button
-                                            aria-hidden={true}
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          />
-                                        </div>
-                                      </SideNavMenuSection>
-                                    </div>
-                                  </div>
-                                </HeaderSideNavItems>
-                              </ul>
-                            </SideNavItems>
-                          </nav>
-                        </nav>
-                      </ForwardRef(SideNav)>
-                    </MastheadLeftNav>
-                    <IbmLogo
-                      autoid="dds--masthead-default__l0-logo"
-                      isSearchActive={false}
-                    >
-                      <div
-                        className="bx--header__logo"
-                      >
-                        <ConditionalWrapper
-                          wrapper={[Function]}
-                        >
-                          <a
-                            aria-label="IBM®"
-                            data-autoid="dds--masthead-default__l0-logo"
-                            href="http://www.ibm.com"
-                          >
-                            <MastheadLogo
-                              height="23"
-                              viewBox="0 0 58 23"
-                              width="58"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                height="23"
-                                viewBox="0 0 58 23"
-                                width="58"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M58 21.467V23h-7.632v-1.533H58zm-18.316 0V23h-7.631v-1.533h7.631zm5.955 0L45.025 23l-.606-1.533h1.22zm-17.097 0A6.285 6.285 0 0 1 24.391 23H12.21v-1.533zm-17.858 0V23H0v-1.533h10.684zm29-3.067v1.533h-7.631V18.4h7.631zm7.148 0l-.594 1.533H43.82l-.598-1.533h3.609zm-16.764 0a5.719 5.719 0 0 1-.64 1.533H12.21V18.4zm-19.384 0v1.533H0V18.4h10.684zM58 18.4v1.533h-7.632V18.4H58zm-3.053-3.067v1.534h-4.579v-1.534h4.58zm-15.263 0v1.534h-4.579v-1.534h4.58zm8.345 0l-.6 1.534h-4.806l-.604-1.534h6.01zm-18.174 0c.137.49.213 1.003.213 1.534h-5.647v-1.534zm-10.013 0v1.534h-4.579v-1.534h4.58zm-12.21 0v1.534h-4.58v-1.534h4.58zm47.315-3.066V13.8h-4.579v-1.533h4.58zm-15.263 0V13.8h-4.579v-1.533h4.58zm9.541 0l-.597 1.533h-7.22l-.591-1.533h8.408zm-21.248 0c.527.432.98.951 1.328 1.533H15.263v-1.533zm-20.345 0V13.8h-4.58v-1.533h4.58zM44.599 9.2l.427 1.24.428-1.24h9.493v1.533h-4.579V9.324l-.519 1.41h-9.661l-.504-1.41v1.41h-4.579V9.2H44.6zm-36.967 0v1.533h-4.58V9.2h4.58zm21.673 0a5.95 5.95 0 0 1-1.328 1.533H15.263V9.2zm25.642-3.067v1.534h-8.964l.54-1.534h8.424zm-11.413 0l.54 1.534h-8.969V6.133h8.43zm-13.466 0c0 .531-.076 1.045-.213 1.534H24.42V6.133zm-10.226 0v1.534h-4.579V6.133h4.58zm-12.21 0v1.534h-4.58V6.133h4.58zm34.845-3.066l.53 1.533H32.054V3.067h10.424zm15.523 0V4.6H47.04l.55-1.533H58zm-28.573 0c.284.473.504.988.641 1.533H12.211V3.067zm-18.743 0V4.6H0V3.067h10.684zM41.406 0l.54 1.533h-9.893V0h9.353zM58 0v1.533h-9.881L48.647 0H58zM24.39 0c1.601 0 3.057.581 4.152 1.533H12.211V0zM10.685 0v1.533H0V0h10.684z"
-                                  fill="#161616"
-                                  fillRule="evenodd"
-                                />
-                              </svg>
-                            </MastheadLogo>
-                          </a>
-                        </ConditionalWrapper>
-                      </div>
-                    </IbmLogo>
-                    <div
-                      className="bx--header__search "
-                    >
-                      <MastheadTopNav
-                        customProfileLogin={null}
-                        navType="default"
-                        navigation={
-                          Array [
-                            Object {
-                              "hasMegapanel": false,
-                              "hasMenu": true,
-                              "menuSections": Array [
-                                Object {
-                                  "heading": "Explore",
-                                  "menuItems": Array [
-                                    Object {
-                                      "megapanelContent": Object {
-                                        "description": "",
-                                        "feature": Object {
-                                          "heading": "",
-                                          "imageUrl": "",
-                                          "linkTitle": "",
-                                          "linkUrl": "",
-                                        },
-                                        "headingTitle": "",
-                                        "headingUrl": "",
-                                        "quickLinks": Object {
-                                          "links": Array [
-                                            Object {
-                                              "title": "Subnav 1",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 2",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 3",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 4",
-                                              "url": "",
-                                            },
-                                          ],
-                                          "title": "Title",
-                                        },
-                                      },
-                                      "title": "Link 1",
-                                      "url": "",
-                                    },
-                                    Object {
-                                      "title": "Menu dropdown item with extra long text",
-                                      "url": "",
-                                    },
-                                  ],
-                                },
-                              ],
-                              "title": "Lorem ipsum dolor sit amet",
-                              "titleEnglish": "Lorem ipsum dolor sit amet",
-                              "url": "",
-                            },
-                            Object {
-                              "hasMenu": true,
-                              "menuSections": Array [
-                                Object {
-                                  "heading": "",
-                                  "menuItems": Array [
-                                    Object {
-                                      "megapanelContent": Object {
-                                        "description": "Reimagine your business, designing and building the platforms necessary for growth",
-                                        "feature": Object {
-                                          "heading": "IBM Services, your Digital Reinvention â„¢ partner",
-                                          "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
-                                          "linkTitle": "Explore all our business consulting and technology services",
-                                          "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                                        },
-                                        "headingTitle": "Services",
-                                        "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                                        "quickLinks": Object {
-                                          "links": Array [
-                                            Object {
-                                              "title": "Subnav 1",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 2",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 3",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 4",
-                                              "url": "",
-                                            },
-                                          ],
-                                          "title": "Quicklinks",
-                                        },
-                                      },
-                                      "title": "Link 2",
-                                      "url": "",
-                                    },
-                                    Object {
-                                      "megapanelContent": Object {
-                                        "description": "Funding options that fit your business",
-                                        "feature": Object {
-                                          "heading": "Cloud financing strategies that work for your business",
-                                          "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
-                                          "linkTitle": "Committed to cloud? Make the most of your cash flow.",
-                                          "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
-                                        },
-                                        "headingTitle": "Financing",
-                                        "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                                        "quickLinks": Object {
-                                          "links": Array [
-                                            Object {
-                                              "title": "Subnav 1",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 2",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 3",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 4",
-                                              "url": "",
-                                            },
-                                          ],
-                                          "title": "Quicklinks",
-                                        },
-                                      },
-                                      "title": "Financing",
-                                      "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                                    },
-                                  ],
-                                },
-                              ],
-                              "title": "Consectetur adipiscing elit",
-                              "titleEnglish": "Consectetur adipiscing elit",
-                              "url": "",
-                            },
-                            Object {
-                              "hasMegapanel": false,
-                              "hasMenu": false,
-                              "menuSections": Array [],
-                              "title": "Nulla quis sem at nibh elementum imperdiet",
-                              "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
-                              "url": "https://www.ibm.com/industries?lnk=min",
-                            },
-                            Object {
-                              "hasMegapanel": false,
-                              "hasMenu": true,
-                              "menuSections": Array [
-                                Object {
-                                  "heading": "",
-                                  "menuItems": Array [
-                                    Object {
-                                      "megapanelContent": Object {
-                                        "description": "",
-                                        "feature": Object {
-                                          "heading": "IBM Developer newsletters",
-                                          "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
-                                          "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
-                                          "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
-                                        },
-                                        "headingTitle": "IBM Developer",
-                                        "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                                        "quickLinks": Object {
-                                          "links": Array [
-                                            Object {
-                                              "title": "Subnav 1",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 2",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 3",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 4",
-                                              "url": "",
-                                            },
-                                          ],
-                                          "title": "Quicklinks",
-                                        },
-                                      },
-                                      "title": "IBM Developer",
-                                      "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                                    },
-                                    Object {
-                                      "megapanelContent": Object {
-                                        "description": "",
-                                        "feature": Object {
-                                          "heading": "Blockchain 101",
-                                          "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
-                                          "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
-                                          "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
-                                        },
-                                        "headingTitle": "Blockchain",
-                                        "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                                        "quickLinks": Object {
-                                          "links": Array [
-                                            Object {
-                                              "title": "Subnav 1",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 2",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 3",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 4",
-                                              "url": "",
-                                            },
-                                          ],
-                                          "title": "Quicklinks",
-                                        },
-                                      },
-                                      "title": "Blockchain",
-                                      "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                                    },
-                                    Object {
-                                      "megapanelContent": Object {
-                                        "description": "",
-                                        "feature": Object {
-                                          "heading": "Make sense of Kubernetes",
-                                          "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
-                                          "linkTitle": "Deploy a simple Python application with Kubernetes",
-                                          "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
-                                        },
-                                        "headingTitle": "Containers",
-                                        "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                        "quickLinks": Object {
-                                          "links": Array [
-                                            Object {
-                                              "title": "Code patterns",
-                                              "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                            },
-                                            Object {
-                                              "title": "Tutorials",
-                                              "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                            },
-                                            Object {
-                                              "title": "Events",
-                                              "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                            },
-                                          ],
-                                          "title": "Quicklinks",
-                                        },
-                                      },
-                                      "title": "Containers",
-                                      "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                    },
-                                    Object {
-                                      "megapanelContent": Object {
-                                        "description": "",
-                                        "feature": Object {
-                                          "heading": "Train your data no matter where it lives",
-                                          "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
-                                          "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
-                                          "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
-                                        },
-                                        "headingTitle": "Analytics",
-                                        "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                        "quickLinks": Object {
-                                          "links": Array [
-                                            Object {
-                                              "title": "Code patterns",
-                                              "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                            },
-                                            Object {
-                                              "title": "Tutorials",
-                                              "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                            },
-                                            Object {
-                                              "title": "Events",
-                                              "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                            },
-                                            Object {
-                                              "title": "Developer community",
-                                              "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
-                                            },
-                                          ],
-                                          "title": "Quicklinks",
-                                        },
-                                      },
-                                      "title": "Analytics",
-                                      "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                    },
-                                  ],
-                                },
-                              ],
-                              "title": "Fusce nec tellus sed augue semper porta",
-                              "titleEnglish": "Fusce nec tellus sed augue semper porta",
-                              "url": "",
-                            },
-                            Object {
-                              "hasMegapanel": false,
-                              "hasMenu": false,
-                              "menuSections": Array [],
-                              "title": "Sed cursus ante dapibus diam",
-                              "titleEnglish": "Sed cursus ante dapibus diam",
-                              "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
-                            },
-                          ]
-                        }
-                        platform={null}
-                        selectedMenuItem="Lorem ipsum dolor sit amet"
-                      >
-                        <HeaderNavContainer>
-                          <div
-                            className="bx--header__nav-container"
-                          >
-                            <div
-                              className="bx--header__nav-content"
-                            >
-                              <div
-                                className="bx--sub-content-left"
-                              />
-                              <div
-                                className="bx--sub-content-right"
-                              />
-                              <HeaderNavigation
-                                aria-label="IBM"
-                                data-autoid="dds--masthead__l0-nav"
-                              >
-                                <nav
-                                  aria-label="IBM"
-                                  className="bx--header__nav"
-                                  data-autoid="dds--masthead__l0-nav"
-                                >
-                                  <ul
-                                    aria-label="IBM"
-                                    className="bx--header__menu-bar"
+                                                  <span
+                                                    className="bx--text-truncate--end"
+                                                  >
+                                                    Menu dropdown item with extra long text
+                                                  </span>
+                                                </a>
+                                              </Link>
+                                            </li>
+                                          </ForwardRef(HeaderMenuItem)>
+                                        </ul>
+                                      </li>
+                                    </HeaderMenu>
+                                  </ForwardRef>
+                                  <ForwardRef
+                                    aria-label="Consectetur adipiscing elit"
+                                    autoId="dds--masthead-eco__l1-nav1"
+                                    className=""
+                                    key=".$1"
+                                    menuLinkName="Consectetur adipiscing elit"
+                                    selected={false}
                                   >
-                                    <ForwardRef
-                                      aria-label="Lorem ipsum dolor sit amet"
-                                      autoId="dds--masthead-default__l0-nav0"
+                                    <HeaderMenu
+                                      aria-label="Consectetur adipiscing elit"
+                                      autoId="dds--masthead-eco__l1-nav1"
                                       className=""
-                                      dataTitle="lorem-ipsum-dolor-sit-amet"
-                                      disableScroll={false}
-                                      key=".$0"
-                                      menuLinkName="Lorem ipsum dolor sit amet"
-                                      selected={true}
+                                      focusRef={[Function]}
+                                      menuLinkName="Consectetur adipiscing elit"
+                                      renderMenuContent={[Function]}
+                                      selected={false}
                                       setOverlay={[Function]}
                                     >
-                                      <HeaderMenu
-                                        aria-label="Lorem ipsum dolor sit amet"
-                                        autoId="dds--masthead-default__l0-nav0"
-                                        className=""
-                                        dataTitle="lorem-ipsum-dolor-sit-amet"
-                                        disableScroll={false}
-                                        focusRef={[Function]}
-                                        menuLinkName="Lorem ipsum dolor sit amet"
-                                        renderMenuContent={[Function]}
-                                        selected={true}
-                                        setOverlay={[Function]}
+                                      <li
+                                        className="bx--header__submenu"
+                                        data-autoid="dds--masthead-eco__l1-nav1"
+                                        onBlur={[Function]}
+                                        onKeyDown={[Function]}
                                       >
-                                        <li
-                                          className="bx--header__submenu"
-                                          data-autoid="dds--masthead-default__l0-nav0"
-                                          onBlur={[Function]}
+                                        <a
+                                          aria-expanded={false}
+                                          aria-haspopup="menu"
+                                          aria-label="Consectetur adipiscing elit"
+                                          aria-selected="false"
+                                          className="bx--header__menu-item bx--header__menu-title"
+                                          href="#"
+                                          onClick={[Function]}
                                           onKeyDown={[Function]}
+                                          role="menuitem"
+                                          tabIndex={0}
                                         >
-                                          <a
-                                            aria-expanded={false}
-                                            aria-haspopup="menu"
-                                            aria-label="Lorem ipsum dolor sit amet"
-                                            aria-selected="true"
-                                            className="bx--header__menu-item bx--header__menu-title"
-                                            data-title="lorem-ipsum-dolor-sit-amet"
-                                            href="#"
-                                            onClick={[Function]}
-                                            onKeyDown={[Function]}
-                                            role="menuitem"
-                                            tabIndex={0}
-                                          >
-                                            Lorem ipsum dolor sit amet
-                                            <defaultRenderMenuContent>
-                                              <ForwardRef(ChevronDown20)
+                                          Consectetur adipiscing elit
+                                          <defaultRenderMenuContent>
+                                            <ForwardRef(ChevronDown20)
+                                              className="bx--header__menu-arrow"
+                                            >
+                                              <Icon
                                                 className="bx--header__menu-arrow"
+                                                fill="currentColor"
+                                                height={20}
+                                                preserveAspectRatio="xMidYMid meet"
+                                                viewBox="0 0 32 32"
+                                                width={20}
+                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <Icon
+                                                <svg
+                                                  aria-hidden={true}
                                                   className="bx--header__menu-arrow"
                                                   fill="currentColor"
+                                                  focusable="false"
                                                   height={20}
                                                   preserveAspectRatio="xMidYMid meet"
                                                   viewBox="0 0 32 32"
                                                   width={20}
                                                   xmlns="http://www.w3.org/2000/svg"
                                                 >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="bx--header__menu-arrow"
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 32 32"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ChevronDown20)>
-                                            </defaultRenderMenuContent>
-                                          </a>
-                                          <ul
-                                            aria-label="Lorem ipsum dolor sit amet"
-                                            className="bx--header__menu"
+                                                  <path
+                                                    d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
+                                                  />
+                                                </svg>
+                                              </Icon>
+                                            </ForwardRef(ChevronDown20)>
+                                          </defaultRenderMenuContent>
+                                        </a>
+                                        <ul
+                                          aria-label="Consectetur adipiscing elit"
+                                          className="bx--header__menu"
+                                        >
+                                          <ForwardRef(HeaderMenuItem)
+                                            data-autoid="dds--masthead-eco__l1-nav0-item0"
+                                            href=""
+                                            key=".$Link 2"
+                                            refs={[Function]}
+                                            role="none"
                                           >
-                                            <ForwardRef(HeaderMenuItem)
-                                              data-autoid="dds--masthead-default__l0-nav0--subnav-col0-item0"
-                                              href=""
-                                              key=".$Link 1"
-                                              refs={[Function]}
+                                            <li
                                               role="none"
                                             >
-                                              <li
-                                                role="none"
+                                              <Link
+                                                className="bx--header__menu-item"
+                                                data-autoid="dds--masthead-eco__l1-nav0-item0"
+                                                element="a"
+                                                href=""
+                                                refs={[Function]}
+                                                tabIndex={0}
                                               >
-                                                <Link
+                                                <a
                                                   className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-default__l0-nav0--subnav-col0-item0"
-                                                  element="a"
+                                                  data-autoid="dds--masthead-eco__l1-nav0-item0"
                                                   href=""
                                                   refs={[Function]}
                                                   tabIndex={0}
                                                 >
-                                                  <a
-                                                    className="bx--header__menu-item"
-                                                    data-autoid="dds--masthead-default__l0-nav0--subnav-col0-item0"
-                                                    href=""
-                                                    refs={[Function]}
-                                                    tabIndex={0}
+                                                  <span
+                                                    className="bx--text-truncate--end"
                                                   >
-                                                    <span
-                                                      className="bx--text-truncate--end"
-                                                    >
-                                                      Link 1
-                                                    </span>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </ForwardRef(HeaderMenuItem)>
-                                            <ForwardRef(HeaderMenuItem)
-                                              data-autoid="dds--masthead-default__l0-nav0--subnav-col0-item1"
-                                              href=""
-                                              key=".$Menu dropdown item with extra long text"
-                                              refs={[Function]}
+                                                    Link 2
+                                                  </span>
+                                                </a>
+                                              </Link>
+                                            </li>
+                                          </ForwardRef(HeaderMenuItem)>
+                                          <ForwardRef(HeaderMenuItem)
+                                            data-autoid="dds--masthead-eco__l1-nav0-item1"
+                                            href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
+                                            key=".$Financing"
+                                            refs={[Function]}
+                                            role="none"
+                                          >
+                                            <li
                                               role="none"
                                             >
-                                              <li
-                                                role="none"
+                                              <Link
+                                                className="bx--header__menu-item"
+                                                data-autoid="dds--masthead-eco__l1-nav0-item1"
+                                                element="a"
+                                                href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
+                                                refs={[Function]}
+                                                tabIndex={0}
                                               >
-                                                <Link
+                                                <a
                                                   className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-default__l0-nav0--subnav-col0-item1"
-                                                  element="a"
-                                                  href=""
+                                                  data-autoid="dds--masthead-eco__l1-nav0-item1"
+                                                  href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
                                                   refs={[Function]}
                                                   tabIndex={0}
                                                 >
-                                                  <a
-                                                    className="bx--header__menu-item"
-                                                    data-autoid="dds--masthead-default__l0-nav0--subnav-col0-item1"
-                                                    href=""
-                                                    refs={[Function]}
-                                                    tabIndex={0}
+                                                  <span
+                                                    className="bx--text-truncate--end"
                                                   >
-                                                    <span
-                                                      className="bx--text-truncate--end"
-                                                    >
-                                                      Menu dropdown item with extra long text
-                                                    </span>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </ForwardRef(HeaderMenuItem)>
-                                          </ul>
-                                        </li>
-                                      </HeaderMenu>
-                                    </ForwardRef>
-                                    <ForwardRef
-                                      aria-label="Consectetur adipiscing elit"
-                                      autoId="dds--masthead-default__l0-nav1"
+                                                    Financing
+                                                  </span>
+                                                </a>
+                                              </Link>
+                                            </li>
+                                          </ForwardRef(HeaderMenuItem)>
+                                        </ul>
+                                      </li>
+                                    </HeaderMenu>
+                                  </ForwardRef>
+                                  <ForwardRef(HeaderMenuItem)
+                                    aria-selected="false"
+                                    data-autoid="dds--masthead-eco__l1-nav2"
+                                    href="https://www.ibm.com/industries?lnk=min"
+                                    key=".$2"
+                                  >
+                                    <li>
+                                      <Link
+                                        aria-selected="false"
+                                        className="bx--header__menu-item"
+                                        data-autoid="dds--masthead-eco__l1-nav2"
+                                        element="a"
+                                        href="https://www.ibm.com/industries?lnk=min"
+                                        tabIndex={0}
+                                      >
+                                        <a
+                                          aria-selected="false"
+                                          className="bx--header__menu-item"
+                                          data-autoid="dds--masthead-eco__l1-nav2"
+                                          href="https://www.ibm.com/industries?lnk=min"
+                                          tabIndex={0}
+                                        >
+                                          <span
+                                            className="bx--text-truncate--end"
+                                          >
+                                            Nulla quis sem at nibh elementum imperdiet
+                                          </span>
+                                        </a>
+                                      </Link>
+                                    </li>
+                                  </ForwardRef(HeaderMenuItem)>
+                                  <ForwardRef
+                                    aria-label="Fusce nec tellus sed augue semper porta"
+                                    autoId="dds--masthead-eco__l1-nav3"
+                                    className=""
+                                    key=".$3"
+                                    menuLinkName="Fusce nec tellus sed augue semper porta"
+                                    selected={false}
+                                  >
+                                    <HeaderMenu
+                                      aria-label="Fusce nec tellus sed augue semper porta"
+                                      autoId="dds--masthead-eco__l1-nav3"
                                       className=""
-                                      dataTitle="consectetur-adipiscing-elit"
-                                      key=".$1"
-                                      menuLinkName="Consectetur adipiscing elit"
+                                      focusRef={[Function]}
+                                      menuLinkName="Fusce nec tellus sed augue semper porta"
+                                      renderMenuContent={[Function]}
                                       selected={false}
                                       setOverlay={[Function]}
                                     >
-                                      <HeaderMenu
-                                        aria-label="Consectetur adipiscing elit"
-                                        autoId="dds--masthead-default__l0-nav1"
-                                        className=""
-                                        dataTitle="consectetur-adipiscing-elit"
-                                        focusRef={[Function]}
-                                        menuLinkName="Consectetur adipiscing elit"
-                                        renderMenuContent={[Function]}
-                                        selected={false}
-                                        setOverlay={[Function]}
+                                      <li
+                                        className="bx--header__submenu"
+                                        data-autoid="dds--masthead-eco__l1-nav3"
+                                        onBlur={[Function]}
+                                        onKeyDown={[Function]}
                                       >
-                                        <li
-                                          className="bx--header__submenu"
-                                          data-autoid="dds--masthead-default__l0-nav1"
-                                          onBlur={[Function]}
+                                        <a
+                                          aria-expanded={false}
+                                          aria-haspopup="menu"
+                                          aria-label="Fusce nec tellus sed augue semper porta"
+                                          aria-selected="false"
+                                          className="bx--header__menu-item bx--header__menu-title"
+                                          href="#"
+                                          onClick={[Function]}
                                           onKeyDown={[Function]}
+                                          role="menuitem"
+                                          tabIndex={0}
                                         >
-                                          <a
-                                            aria-expanded={false}
-                                            aria-haspopup="menu"
-                                            aria-label="Consectetur adipiscing elit"
-                                            aria-selected="false"
-                                            className="bx--header__menu-item bx--header__menu-title"
-                                            data-title="consectetur-adipiscing-elit"
-                                            href="#"
-                                            onClick={[Function]}
-                                            onKeyDown={[Function]}
-                                            role="menuitem"
-                                            tabIndex={0}
-                                          >
-                                            Consectetur adipiscing elit
-                                            <defaultRenderMenuContent>
-                                              <ForwardRef(ChevronDown20)
+                                          Fusce nec tellus sed augue semper porta
+                                          <defaultRenderMenuContent>
+                                            <ForwardRef(ChevronDown20)
+                                              className="bx--header__menu-arrow"
+                                            >
+                                              <Icon
                                                 className="bx--header__menu-arrow"
+                                                fill="currentColor"
+                                                height={20}
+                                                preserveAspectRatio="xMidYMid meet"
+                                                viewBox="0 0 32 32"
+                                                width={20}
+                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <Icon
+                                                <svg
+                                                  aria-hidden={true}
                                                   className="bx--header__menu-arrow"
                                                   fill="currentColor"
+                                                  focusable="false"
                                                   height={20}
                                                   preserveAspectRatio="xMidYMid meet"
                                                   viewBox="0 0 32 32"
                                                   width={20}
                                                   xmlns="http://www.w3.org/2000/svg"
                                                 >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="bx--header__menu-arrow"
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 32 32"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  <path
+                                                    d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
+                                                  />
+                                                </svg>
+                                              </Icon>
+                                            </ForwardRef(ChevronDown20)>
+                                          </defaultRenderMenuContent>
+                                        </a>
+                                        <ul
+                                          aria-label="Fusce nec tellus sed augue semper porta"
+                                          className="bx--header__menu"
+                                        >
+                                          <ForwardRef(HeaderMenuItem)
+                                            data-autoid="dds--masthead-eco__l1-nav0-item0"
+                                            href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
+                                            key=".$IBM Developer"
+                                            refs={[Function]}
+                                            role="none"
+                                          >
+                                            <li
+                                              role="none"
+                                            >
+                                              <Link
+                                                className="bx--header__menu-item"
+                                                data-autoid="dds--masthead-eco__l1-nav0-item0"
+                                                element="a"
+                                                href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
+                                                refs={[Function]}
+                                                tabIndex={0}
+                                              >
+                                                <a
+                                                  className="bx--header__menu-item"
+                                                  data-autoid="dds--masthead-eco__l1-nav0-item0"
+                                                  href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
+                                                  refs={[Function]}
+                                                  tabIndex={0}
+                                                >
+                                                  <span
+                                                    className="bx--text-truncate--end"
                                                   >
-                                                    <path
-                                                      d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ChevronDown20)>
-                                            </defaultRenderMenuContent>
-                                          </a>
-                                          <ul
-                                            aria-label="Consectetur adipiscing elit"
-                                            className="bx--header__menu"
+                                                    IBM Developer
+                                                  </span>
+                                                </a>
+                                              </Link>
+                                            </li>
+                                          </ForwardRef(HeaderMenuItem)>
+                                          <ForwardRef(HeaderMenuItem)
+                                            data-autoid="dds--masthead-eco__l1-nav0-item1"
+                                            href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
+                                            key=".$Blockchain"
+                                            refs={[Function]}
+                                            role="none"
                                           >
-                                            <ForwardRef(HeaderMenuItem)
-                                              data-autoid="dds--masthead-default__l0-nav1--subnav-col0-item0"
-                                              href=""
-                                              key=".$Link 2"
-                                              refs={[Function]}
+                                            <li
                                               role="none"
                                             >
-                                              <li
-                                                role="none"
+                                              <Link
+                                                className="bx--header__menu-item"
+                                                data-autoid="dds--masthead-eco__l1-nav0-item1"
+                                                element="a"
+                                                href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
+                                                refs={[Function]}
+                                                tabIndex={0}
                                               >
-                                                <Link
+                                                <a
                                                   className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-default__l0-nav1--subnav-col0-item0"
-                                                  element="a"
-                                                  href=""
+                                                  data-autoid="dds--masthead-eco__l1-nav0-item1"
+                                                  href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
                                                   refs={[Function]}
                                                   tabIndex={0}
                                                 >
-                                                  <a
-                                                    className="bx--header__menu-item"
-                                                    data-autoid="dds--masthead-default__l0-nav1--subnav-col0-item0"
-                                                    href=""
-                                                    refs={[Function]}
-                                                    tabIndex={0}
+                                                  <span
+                                                    className="bx--text-truncate--end"
                                                   >
-                                                    <span
-                                                      className="bx--text-truncate--end"
-                                                    >
-                                                      Link 2
-                                                    </span>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </ForwardRef(HeaderMenuItem)>
-                                            <ForwardRef(HeaderMenuItem)
-                                              data-autoid="dds--masthead-default__l0-nav1--subnav-col0-item1"
-                                              href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                              key=".$Financing"
-                                              refs={[Function]}
+                                                    Blockchain
+                                                  </span>
+                                                </a>
+                                              </Link>
+                                            </li>
+                                          </ForwardRef(HeaderMenuItem)>
+                                          <ForwardRef(HeaderMenuItem)
+                                            data-autoid="dds--masthead-eco__l1-nav0-item2"
+                                            href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
+                                            key=".$Containers"
+                                            refs={[Function]}
+                                            role="none"
+                                          >
+                                            <li
                                               role="none"
                                             >
-                                              <li
-                                                role="none"
+                                              <Link
+                                                className="bx--header__menu-item"
+                                                data-autoid="dds--masthead-eco__l1-nav0-item2"
+                                                element="a"
+                                                href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
+                                                refs={[Function]}
+                                                tabIndex={0}
                                               >
-                                                <Link
+                                                <a
                                                   className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-default__l0-nav1--subnav-col0-item1"
-                                                  element="a"
-                                                  href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
+                                                  data-autoid="dds--masthead-eco__l1-nav0-item2"
+                                                  href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
                                                   refs={[Function]}
                                                   tabIndex={0}
                                                 >
-                                                  <a
-                                                    className="bx--header__menu-item"
-                                                    data-autoid="dds--masthead-default__l0-nav1--subnav-col0-item1"
-                                                    href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                                    refs={[Function]}
-                                                    tabIndex={0}
+                                                  <span
+                                                    className="bx--text-truncate--end"
                                                   >
-                                                    <span
-                                                      className="bx--text-truncate--end"
-                                                    >
-                                                      Financing
-                                                    </span>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </ForwardRef(HeaderMenuItem)>
-                                          </ul>
-                                        </li>
-                                      </HeaderMenu>
-                                    </ForwardRef>
-                                    <ForwardRef(HeaderMenuItem)
-                                      aria-selected="false"
-                                      data-autoid="dds--masthead-default__l0-nav2"
-                                      href="https://www.ibm.com/industries?lnk=min"
-                                      key=".$2"
-                                    >
-                                      <li>
-                                        <Link
+                                                    Containers
+                                                  </span>
+                                                </a>
+                                              </Link>
+                                            </li>
+                                          </ForwardRef(HeaderMenuItem)>
+                                          <ForwardRef(HeaderMenuItem)
+                                            data-autoid="dds--masthead-eco__l1-nav0-item3"
+                                            href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
+                                            key=".$Analytics"
+                                            refs={[Function]}
+                                            role="none"
+                                          >
+                                            <li
+                                              role="none"
+                                            >
+                                              <Link
+                                                className="bx--header__menu-item"
+                                                data-autoid="dds--masthead-eco__l1-nav0-item3"
+                                                element="a"
+                                                href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
+                                                refs={[Function]}
+                                                tabIndex={0}
+                                              >
+                                                <a
+                                                  className="bx--header__menu-item"
+                                                  data-autoid="dds--masthead-eco__l1-nav0-item3"
+                                                  href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
+                                                  refs={[Function]}
+                                                  tabIndex={0}
+                                                >
+                                                  <span
+                                                    className="bx--text-truncate--end"
+                                                  >
+                                                    Analytics
+                                                  </span>
+                                                </a>
+                                              </Link>
+                                            </li>
+                                          </ForwardRef(HeaderMenuItem)>
+                                        </ul>
+                                      </li>
+                                    </HeaderMenu>
+                                  </ForwardRef>
+                                  <ForwardRef(HeaderMenuItem)
+                                    aria-selected="false"
+                                    data-autoid="dds--masthead-eco__l1-nav4"
+                                    href="https://www.ibm.com/support/home/?lnk=msu_usen"
+                                    key=".$4"
+                                  >
+                                    <li>
+                                      <Link
+                                        aria-selected="false"
+                                        className="bx--header__menu-item"
+                                        data-autoid="dds--masthead-eco__l1-nav4"
+                                        element="a"
+                                        href="https://www.ibm.com/support/home/?lnk=msu_usen"
+                                        tabIndex={0}
+                                      >
+                                        <a
                                           aria-selected="false"
                                           className="bx--header__menu-item"
-                                          data-autoid="dds--masthead-default__l0-nav2"
-                                          element="a"
-                                          href="https://www.ibm.com/industries?lnk=min"
+                                          data-autoid="dds--masthead-eco__l1-nav4"
+                                          href="https://www.ibm.com/support/home/?lnk=msu_usen"
                                           tabIndex={0}
                                         >
-                                          <a
-                                            aria-selected="false"
-                                            className="bx--header__menu-item"
-                                            data-autoid="dds--masthead-default__l0-nav2"
-                                            href="https://www.ibm.com/industries?lnk=min"
-                                            tabIndex={0}
+                                          <span
+                                            className="bx--text-truncate--end"
                                           >
-                                            <span
-                                              className="bx--text-truncate--end"
-                                            >
-                                              Nulla quis sem at nibh elementum imperdiet
-                                            </span>
-                                          </a>
-                                        </Link>
-                                      </li>
-                                    </ForwardRef(HeaderMenuItem)>
-                                    <ForwardRef
-                                      aria-label="Fusce nec tellus sed augue semper porta"
-                                      autoId="dds--masthead-default__l0-nav3"
-                                      className=""
-                                      dataTitle="fusce-nec-tellus-sed-augue-semper-porta"
-                                      disableScroll={false}
-                                      key=".$3"
-                                      menuLinkName="Fusce nec tellus sed augue semper porta"
-                                      selected={false}
-                                      setOverlay={[Function]}
-                                    >
-                                      <HeaderMenu
-                                        aria-label="Fusce nec tellus sed augue semper porta"
-                                        autoId="dds--masthead-default__l0-nav3"
-                                        className=""
-                                        dataTitle="fusce-nec-tellus-sed-augue-semper-porta"
-                                        disableScroll={false}
-                                        focusRef={[Function]}
-                                        menuLinkName="Fusce nec tellus sed augue semper porta"
-                                        renderMenuContent={[Function]}
-                                        selected={false}
-                                        setOverlay={[Function]}
-                                      >
-                                        <li
-                                          className="bx--header__submenu"
-                                          data-autoid="dds--masthead-default__l0-nav3"
-                                          onBlur={[Function]}
-                                          onKeyDown={[Function]}
+                                            Sed cursus ante dapibus diam
+                                          </span>
+                                        </a>
+                                      </Link>
+                                    </li>
+                                  </ForwardRef(HeaderMenuItem)>
+                                </ul>
+                              </nav>
+                            </HeaderNavigation>
+                          </div>
+                          <div
+                            className="bx--header__nav-caret-left-container"
+                            hidden={true}
+                          >
+                            <button
+                              aria-hidden="true"
+                              aria-label="Masthead left caret"
+                              className="bx--header__nav-caret-left"
+                              onClick={[Function]}
+                              tabIndex="-1"
+                            >
+                              <ForwardRef(CaretLeft20)>
+                                <Icon
+                                  fill="currentColor"
+                                  height={20}
+                                  preserveAspectRatio="xMidYMid meet"
+                                  viewBox="0 0 32 32"
+                                  width={20}
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    fill="currentColor"
+                                    focusable="false"
+                                    height={20}
+                                    preserveAspectRatio="xMidYMid meet"
+                                    viewBox="0 0 32 32"
+                                    width={20}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20 24L10 16 20 8z"
+                                    />
+                                  </svg>
+                                </Icon>
+                              </ForwardRef(CaretLeft20)>
+                            </button>
+                            <div
+                              className="bx--header__nav-caret-left-gradient"
+                            />
+                          </div>
+                          <div
+                            className="bx--header__nav-caret-right-container"
+                            hidden={true}
+                          >
+                            <div
+                              className="bx--header__nav-caret-right-gradient"
+                            />
+                            <button
+                              aria-hidden="true"
+                              aria-label="Masthead right caret"
+                              className="bx--header__nav-caret-right"
+                              onClick={[Function]}
+                              tabIndex="-1"
+                            >
+                              <ForwardRef(CaretRight20)>
+                                <Icon
+                                  fill="currentColor"
+                                  height={20}
+                                  preserveAspectRatio="xMidYMid meet"
+                                  viewBox="0 0 32 32"
+                                  width={20}
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    fill="currentColor"
+                                    focusable="false"
+                                    height={20}
+                                    preserveAspectRatio="xMidYMid meet"
+                                    viewBox="0 0 32 32"
+                                    width={20}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M12 8L22 16 12 24z"
+                                    />
+                                  </svg>
+                                </Icon>
+                              </ForwardRef(CaretRight20)>
+                            </button>
+                          </div>
+                        </div>
+                      </HeaderNavContainer>
+                    </div>
+                  </div>
+                </MastheadL1>
+              </div>
+            </div>
+          </render>
+        </HeaderContainer>
+      </Masthead>
+    </Default>
+  </div>
+  <input
+    aria-label="input-text-offleft"
+    className="bx--visually-hidden"
+    type="text"
+  />
+</Container>
+`;
+
+exports[`Storyshots Components|Masthead With alternate logo and tooltip 1`] = `
+<Container
+  parameters={
+    Object {
+      "__id": "components-masthead--with-alternate-logo-and-tooltip",
+      "component": undefined,
+      "docs": Object {},
+      "fileName": "./components/Masthead/__stories__/Masthead.stories.js",
+      "framework": "react",
+      "knobs": Object {
+        "Masthead": [Function],
+        "escapeHTML": false,
+      },
+      "options": Object {
+        "name": "Carbon for IBM.com React",
+        "storySort": [Function],
+        "theme": Object {
+          "appBg": "#F6F9FC",
+          "appBorderColor": "rgba(0,0,0,.1)",
+          "appBorderRadius": 4,
+          "appContentBg": "#FFFFFF",
+          "barBg": "#FFFFFF",
+          "barSelectedColor": "#1EA7FD",
+          "barTextColor": "#999999",
+          "base": "light",
+          "brandTitle": "Carbon for IBM.com React v1.24.0-rc.1",
+          "brandUrl": "https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/react",
+          "colorPrimary": "#FF4785",
+          "colorSecondary": "#1EA7FD",
+          "fontBase": "\\"IBM Plex Sans\\", \\"Helvetica Neue\\", Arial, sans-serif",
+          "fontCode": "\\"IBM Plex Mono\\", Menlo, \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace",
+          "inputBg": "#FFFFFF",
+          "inputBorder": "rgba(0,0,0,.1)",
+          "inputBorderRadius": 4,
+          "inputTextColor": "#333333",
+          "textColor": "#333333",
+          "textInverseColor": "#FFFFFF",
+        },
+        "url": "https://github.com/carbon-design-system/carbon-for-ibm-dotcom",
+      },
+      "props": Object {
+        "Masthead": Object {
+          "hasProfile": true,
+          "hasSearch": true,
+          "mastheadLogo": Object {
+            "allowlist": Array [],
+            "denylist": Array [],
+            "end": "May 5, 2021 0:00:01",
+            "path": "/",
+            "svg": "<svg width=\\"81px\\" height=\\"33px\\" viewBox=\\"0 0 81 33\\" xmlns=\\"http://www.w3.org/2000/svg\\" version=\\"1.1\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\">
+      <title>Artboard</title>
+      <defs>
+        <path d=\\"M67.716,0.0192 L66.982,2.1532 L80.733,2.1532 L80.733,0.0192 L67.716,0.0192 Z M44.624,0.0192 L44.625,2.1532 L58.392,2.1532 L57.64,0.0192 L44.624,0.0192 Z M17.011,0.0192 L17.011,2.1532 L39.738,2.1532 C38.216,0.8282 36.189,0.0192 33.961,0.0192 L33.961,0.0192 L17.011,0.0192 Z M0.019,2.1532 L14.887,2.1532 L14.887,0.0192 L0.019,0.0192 L0.019,2.1532 Z M66.246,4.2862 L65.479,6.4192 L80.733,6.4192 L80.733,4.2862 L66.246,4.2862 Z M44.624,4.2862 L44.625,6.4192 L59.87,6.4192 L59.132,4.2862 L44.624,4.2862 Z M17.011,4.2862 L17.011,6.4192 L41.863,6.4192 C41.672,5.6612 41.365,4.9442 40.97,4.2862 L40.97,4.2862 L17.011,4.2862 Z M0.019,6.4192 L14.887,6.4192 L14.887,4.2862 L0.019,4.2862 L0.019,6.4192 Z M64.761,8.5532 L64.009,10.6862 L76.485,10.6862 L76.485,8.5532 L64.761,8.5532 Z M48.872,8.5532 L48.872,10.6862 L61.354,10.6862 L60.602,8.5532 L48.872,8.5532 Z M34.004,8.5532 L34.004,10.6862 L41.565,10.6862 C41.756,10.0052 41.863,9.2912 41.863,8.5532 L41.863,8.5532 L34.004,8.5532 Z M21.259,10.6862 L27.632,10.6862 L27.632,8.5532 L21.259,8.5532 L21.259,10.6862 Z M4.267,10.6862 L10.639,10.6862 L10.639,8.5532 L4.267,8.5532 L4.267,10.6862 Z M63.273,12.8192 L62.679,14.5432 L62.084,12.8192 L48.872,12.8192 L48.872,14.9532 L55.244,14.9532 L55.244,12.9912 L55.945,14.9532 L69.39,14.9532 L70.113,12.9912 L70.113,14.9532 L76.485,14.9532 L76.485,12.8192 L63.273,12.8192 Z M21.259,12.8192 L21.259,14.9532 L38.953,14.9532 C39.685,14.3502 40.316,13.6292 40.801,12.8192 L40.801,12.8192 L21.259,12.8192 Z M4.267,14.9532 L10.639,14.9532 L10.639,12.8192 L4.267,12.8192 L4.267,14.9532 Z M70.113,19.2182 L76.485,19.2182 L76.485,17.0852 L70.113,17.0852 L70.113,19.2182 Z M56.82,17.0862 L57.644,19.2182 L67.691,19.2182 L68.522,17.0862 L56.82,17.0862 Z M48.872,19.2182 L55.244,19.2182 L55.244,17.0852 L48.872,17.0852 L48.872,19.2182 Z M21.259,17.0862 L21.259,19.2182 L40.801,19.2182 C40.316,18.4092 39.685,17.6882 38.953,17.0862 L38.953,17.0862 L21.259,17.0862 Z M4.267,19.2182 L10.639,19.2182 L10.639,17.0852 L4.267,17.0852 L4.267,19.2182 Z M70.113,23.4852 L76.485,23.4852 L76.485,21.3522 L70.113,21.3522 L70.113,23.4852 Z M58.494,21.3522 L59.334,23.4852 L66.023,23.4852 L66.857,21.3522 L58.494,21.3522 Z M48.872,23.4852 L55.244,23.4852 L55.244,21.3522 L48.872,21.3522 L48.872,23.4852 Z M34.004,21.3522 L34.004,23.4852 L41.863,23.4852 C41.863,22.7472 41.756,22.0322 41.565,21.3522 L41.565,21.3522 L34.004,21.3522 Z M21.259,23.4852 L27.632,23.4852 L27.632,21.3522 L21.259,21.3522 L21.259,23.4852 Z M4.267,23.4852 L10.639,23.4852 L10.639,21.3522 L4.267,21.3522 L4.267,23.4852 Z M70.113,27.7522 L80.733,27.7522 L80.733,25.6192 L70.113,25.6192 L70.113,27.7522 Z M60.169,25.6192 L61.001,27.7522 L64.363,27.7522 L65.191,25.6192 L60.169,25.6192 Z M44.624,27.7522 L55.244,27.7522 L55.244,25.6192 L44.624,25.6192 L44.624,27.7522 Z M17.011,25.6192 L17.011,27.7522 L40.97,27.7522 C41.365,27.0932 41.672,26.3772 41.863,25.6192 L41.863,25.6192 L17.011,25.6192 Z M0.019,27.7522 L14.887,27.7522 L14.887,25.6192 L0.019,25.6192 L0.019,27.7522 Z M70.113,32.0192 L80.733,32.0192 L80.733,29.8852 L70.113,29.8852 L70.113,32.0192 Z M61.833,29.8852 L62.676,32.0192 L63.53,29.8852 L61.833,29.8852 Z M44.624,32.0192 L55.244,32.0192 L55.244,29.8852 L44.624,29.8852 L44.624,32.0192 Z M17.011,29.8852 L17.011,32.0192 L33.961,32.0192 C36.205,32.0192 38.216,31.2102 39.738,29.8852 L39.738,29.8852 L17.011,29.8852 Z M0.019,32.0192 L14.887,32.0192 L14.887,29.8852 L0.019,29.8852 L0.019,32.0192 Z\\" id=\\"path-1\\"></path>
+      </defs>
+      <g id=\\"Artboard\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\">
+        <g id=\\"Group-7\\">
+          <mask id=\\"mask-2\\" fill=\\"white\\">
+            <use xlink:href=\\"#path-1\\"></use>
+          </mask>
+          <g id=\\"Clip-2\\"></g>
+          <polygon id=\\"Fill-1\\" fill=\\"#EC1D24\\" mask=\\"url(#mask-2)\\" points=\\"-1 33.0382 86.8 33.0382 86.8 -0.9998 -1 -0.9998\\"></polygon>
+          <polygon id=\\"Fill-3\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 3.3942 86.8 3.3942 86.8 -0.9998 -1 -0.9998\\"></polygon>
+          <polygon id=\\"Fill-4\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 11.8162 86.8 11.8162 86.8 7.4222 -1 7.4222\\"></polygon>
+          <polygon id=\\"Fill-5\\" fill=\\"#00A550\\" mask=\\"url(#mask-2)\\" points=\\"-1 20.3502 86.8 20.3502 86.8 15.9562 -1 15.9562\\"></polygon>
+          <polygon id=\\"Fill-6\\" fill=\\"#FFF100\\" mask=\\"url(#mask-2)\\" points=\\"-1 28.8832 86.8 28.8832 86.8 24.4892 -1 24.4892\\"></polygon>
+        </g>
+      </g>
+      </svg>",
+            "tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+          },
+          "navigation": "default",
+          "placeHolderText": "Search all of IBM",
+          "selectedMenuItem": "Services & Consulting",
+        },
+      },
+      "subcomponents": undefined,
+    }
+  }
+  story={[Function]}
+>
+  <div
+    className=""
+    data-floating-menu-container=""
+    role="main"
+  >
+    <Masthead
+      hasProfile={true}
+      hasSearch={true}
+      initialSearchTerm=""
+      mastheadL1Data={null}
+      mastheadLogo={
+        Object {
+          "allowlist": Array [],
+          "denylist": Array [],
+          "end": "May 5, 2021 0:00:01",
+          "path": "/",
+          "svg": "<svg width=\\"81px\\" height=\\"33px\\" viewBox=\\"0 0 81 33\\" xmlns=\\"http://www.w3.org/2000/svg\\" version=\\"1.1\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\">
+      <title>Artboard</title>
+      <defs>
+        <path d=\\"M67.716,0.0192 L66.982,2.1532 L80.733,2.1532 L80.733,0.0192 L67.716,0.0192 Z M44.624,0.0192 L44.625,2.1532 L58.392,2.1532 L57.64,0.0192 L44.624,0.0192 Z M17.011,0.0192 L17.011,2.1532 L39.738,2.1532 C38.216,0.8282 36.189,0.0192 33.961,0.0192 L33.961,0.0192 L17.011,0.0192 Z M0.019,2.1532 L14.887,2.1532 L14.887,0.0192 L0.019,0.0192 L0.019,2.1532 Z M66.246,4.2862 L65.479,6.4192 L80.733,6.4192 L80.733,4.2862 L66.246,4.2862 Z M44.624,4.2862 L44.625,6.4192 L59.87,6.4192 L59.132,4.2862 L44.624,4.2862 Z M17.011,4.2862 L17.011,6.4192 L41.863,6.4192 C41.672,5.6612 41.365,4.9442 40.97,4.2862 L40.97,4.2862 L17.011,4.2862 Z M0.019,6.4192 L14.887,6.4192 L14.887,4.2862 L0.019,4.2862 L0.019,6.4192 Z M64.761,8.5532 L64.009,10.6862 L76.485,10.6862 L76.485,8.5532 L64.761,8.5532 Z M48.872,8.5532 L48.872,10.6862 L61.354,10.6862 L60.602,8.5532 L48.872,8.5532 Z M34.004,8.5532 L34.004,10.6862 L41.565,10.6862 C41.756,10.0052 41.863,9.2912 41.863,8.5532 L41.863,8.5532 L34.004,8.5532 Z M21.259,10.6862 L27.632,10.6862 L27.632,8.5532 L21.259,8.5532 L21.259,10.6862 Z M4.267,10.6862 L10.639,10.6862 L10.639,8.5532 L4.267,8.5532 L4.267,10.6862 Z M63.273,12.8192 L62.679,14.5432 L62.084,12.8192 L48.872,12.8192 L48.872,14.9532 L55.244,14.9532 L55.244,12.9912 L55.945,14.9532 L69.39,14.9532 L70.113,12.9912 L70.113,14.9532 L76.485,14.9532 L76.485,12.8192 L63.273,12.8192 Z M21.259,12.8192 L21.259,14.9532 L38.953,14.9532 C39.685,14.3502 40.316,13.6292 40.801,12.8192 L40.801,12.8192 L21.259,12.8192 Z M4.267,14.9532 L10.639,14.9532 L10.639,12.8192 L4.267,12.8192 L4.267,14.9532 Z M70.113,19.2182 L76.485,19.2182 L76.485,17.0852 L70.113,17.0852 L70.113,19.2182 Z M56.82,17.0862 L57.644,19.2182 L67.691,19.2182 L68.522,17.0862 L56.82,17.0862 Z M48.872,19.2182 L55.244,19.2182 L55.244,17.0852 L48.872,17.0852 L48.872,19.2182 Z M21.259,17.0862 L21.259,19.2182 L40.801,19.2182 C40.316,18.4092 39.685,17.6882 38.953,17.0862 L38.953,17.0862 L21.259,17.0862 Z M4.267,19.2182 L10.639,19.2182 L10.639,17.0852 L4.267,17.0852 L4.267,19.2182 Z M70.113,23.4852 L76.485,23.4852 L76.485,21.3522 L70.113,21.3522 L70.113,23.4852 Z M58.494,21.3522 L59.334,23.4852 L66.023,23.4852 L66.857,21.3522 L58.494,21.3522 Z M48.872,23.4852 L55.244,23.4852 L55.244,21.3522 L48.872,21.3522 L48.872,23.4852 Z M34.004,21.3522 L34.004,23.4852 L41.863,23.4852 C41.863,22.7472 41.756,22.0322 41.565,21.3522 L41.565,21.3522 L34.004,21.3522 Z M21.259,23.4852 L27.632,23.4852 L27.632,21.3522 L21.259,21.3522 L21.259,23.4852 Z M4.267,23.4852 L10.639,23.4852 L10.639,21.3522 L4.267,21.3522 L4.267,23.4852 Z M70.113,27.7522 L80.733,27.7522 L80.733,25.6192 L70.113,25.6192 L70.113,27.7522 Z M60.169,25.6192 L61.001,27.7522 L64.363,27.7522 L65.191,25.6192 L60.169,25.6192 Z M44.624,27.7522 L55.244,27.7522 L55.244,25.6192 L44.624,25.6192 L44.624,27.7522 Z M17.011,25.6192 L17.011,27.7522 L40.97,27.7522 C41.365,27.0932 41.672,26.3772 41.863,25.6192 L41.863,25.6192 L17.011,25.6192 Z M0.019,27.7522 L14.887,27.7522 L14.887,25.6192 L0.019,25.6192 L0.019,27.7522 Z M70.113,32.0192 L80.733,32.0192 L80.733,29.8852 L70.113,29.8852 L70.113,32.0192 Z M61.833,29.8852 L62.676,32.0192 L63.53,29.8852 L61.833,29.8852 Z M44.624,32.0192 L55.244,32.0192 L55.244,29.8852 L44.624,29.8852 L44.624,32.0192 Z M17.011,29.8852 L17.011,32.0192 L33.961,32.0192 C36.205,32.0192 38.216,31.2102 39.738,29.8852 L39.738,29.8852 L17.011,29.8852 Z M0.019,32.0192 L14.887,32.0192 L14.887,29.8852 L0.019,29.8852 L0.019,32.0192 Z\\" id=\\"path-1\\"></path>
+      </defs>
+      <g id=\\"Artboard\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\">
+        <g id=\\"Group-7\\">
+          <mask id=\\"mask-2\\" fill=\\"white\\">
+            <use xlink:href=\\"#path-1\\"></use>
+          </mask>
+          <g id=\\"Clip-2\\"></g>
+          <polygon id=\\"Fill-1\\" fill=\\"#EC1D24\\" mask=\\"url(#mask-2)\\" points=\\"-1 33.0382 86.8 33.0382 86.8 -0.9998 -1 -0.9998\\"></polygon>
+          <polygon id=\\"Fill-3\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 3.3942 86.8 3.3942 86.8 -0.9998 -1 -0.9998\\"></polygon>
+          <polygon id=\\"Fill-4\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 11.8162 86.8 11.8162 86.8 7.4222 -1 7.4222\\"></polygon>
+          <polygon id=\\"Fill-5\\" fill=\\"#00A550\\" mask=\\"url(#mask-2)\\" points=\\"-1 20.3502 86.8 20.3502 86.8 15.9562 -1 15.9562\\"></polygon>
+          <polygon id=\\"Fill-6\\" fill=\\"#FFF100\\" mask=\\"url(#mask-2)\\" points=\\"-1 28.8832 86.8 28.8832 86.8 24.4892 -1 24.4892\\"></polygon>
+        </g>
+      </g>
+      </svg>",
+          "tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+        }
+      }
+      navigation="default"
+      placeHolderText="Search all of IBM"
+      platform={null}
+      searchOpenOnload={false}
+      selectedMenuItem="Services & Consulting"
+    >
+      <HeaderContainer
+        isSideNavExpanded={false}
+        render={[Function]}
+      >
+        <render
+          isSideNavExpanded={false}
+          onClickSideNavExpand={[Function]}
+        >
+          <div
+            className="bx--masthead "
+          >
+            <div
+              className="bx--masthead__l0"
+            >
+              <Header
+                aria-label="IBM"
+                data-autoid="dds--masthead"
+              >
+                <header
+                  aria-label="IBM"
+                  className="bx--header"
+                  data-autoid="dds--masthead"
+                >
+                  <SkipToContent
+                    href="#main-content"
+                    tabIndex="0"
+                  >
+                    <a
+                      className="bx--skip-to-content"
+                      href="#main-content"
+                      tabIndex="0"
+                    >
+                      Skip to main content
+                    </a>
+                  </SkipToContent>
+                  <HeaderMenuButton
+                    aria-label="Open menu"
+                    className=""
+                    data-autoid="dds--masthead-default-sidenav__l0-menu"
+                    isActive={false}
+                    onClick={[Function]}
+                  >
+                    <button
+                      aria-label="Open menu"
+                      className="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
+                      data-autoid="dds--masthead-default-sidenav__l0-menu"
+                      onClick={[Function]}
+                      title="Open menu"
+                      type="button"
+                    >
+                      <ForwardRef(Menu20)>
+                        <Icon
+                          fill="currentColor"
+                          height={20}
+                          preserveAspectRatio="xMidYMid meet"
+                          viewBox="0 0 20 20"
+                          width={20}
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <svg
+                            aria-hidden={true}
+                            fill="currentColor"
+                            focusable="false"
+                            height={20}
+                            preserveAspectRatio="xMidYMid meet"
+                            viewBox="0 0 20 20"
+                            width={20}
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
+                            />
+                          </svg>
+                        </Icon>
+                      </ForwardRef(Menu20)>
+                    </button>
+                  </HeaderMenuButton>
+                  <MastheadLeftNav
+                    backButtonText="Back"
+                    hasL1Data={false}
+                    isSideNavExpanded={false}
+                    mastheadLogo={
+                      Object {
+                        "allowlist": Array [],
+                        "denylist": Array [],
+                        "end": "May 5, 2021 0:00:01",
+                        "path": "/",
+                        "svg": "<svg width=\\"81px\\" height=\\"33px\\" viewBox=\\"0 0 81 33\\" xmlns=\\"http://www.w3.org/2000/svg\\" version=\\"1.1\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\">
+      <title>Artboard</title>
+      <defs>
+        <path d=\\"M67.716,0.0192 L66.982,2.1532 L80.733,2.1532 L80.733,0.0192 L67.716,0.0192 Z M44.624,0.0192 L44.625,2.1532 L58.392,2.1532 L57.64,0.0192 L44.624,0.0192 Z M17.011,0.0192 L17.011,2.1532 L39.738,2.1532 C38.216,0.8282 36.189,0.0192 33.961,0.0192 L33.961,0.0192 L17.011,0.0192 Z M0.019,2.1532 L14.887,2.1532 L14.887,0.0192 L0.019,0.0192 L0.019,2.1532 Z M66.246,4.2862 L65.479,6.4192 L80.733,6.4192 L80.733,4.2862 L66.246,4.2862 Z M44.624,4.2862 L44.625,6.4192 L59.87,6.4192 L59.132,4.2862 L44.624,4.2862 Z M17.011,4.2862 L17.011,6.4192 L41.863,6.4192 C41.672,5.6612 41.365,4.9442 40.97,4.2862 L40.97,4.2862 L17.011,4.2862 Z M0.019,6.4192 L14.887,6.4192 L14.887,4.2862 L0.019,4.2862 L0.019,6.4192 Z M64.761,8.5532 L64.009,10.6862 L76.485,10.6862 L76.485,8.5532 L64.761,8.5532 Z M48.872,8.5532 L48.872,10.6862 L61.354,10.6862 L60.602,8.5532 L48.872,8.5532 Z M34.004,8.5532 L34.004,10.6862 L41.565,10.6862 C41.756,10.0052 41.863,9.2912 41.863,8.5532 L41.863,8.5532 L34.004,8.5532 Z M21.259,10.6862 L27.632,10.6862 L27.632,8.5532 L21.259,8.5532 L21.259,10.6862 Z M4.267,10.6862 L10.639,10.6862 L10.639,8.5532 L4.267,8.5532 L4.267,10.6862 Z M63.273,12.8192 L62.679,14.5432 L62.084,12.8192 L48.872,12.8192 L48.872,14.9532 L55.244,14.9532 L55.244,12.9912 L55.945,14.9532 L69.39,14.9532 L70.113,12.9912 L70.113,14.9532 L76.485,14.9532 L76.485,12.8192 L63.273,12.8192 Z M21.259,12.8192 L21.259,14.9532 L38.953,14.9532 C39.685,14.3502 40.316,13.6292 40.801,12.8192 L40.801,12.8192 L21.259,12.8192 Z M4.267,14.9532 L10.639,14.9532 L10.639,12.8192 L4.267,12.8192 L4.267,14.9532 Z M70.113,19.2182 L76.485,19.2182 L76.485,17.0852 L70.113,17.0852 L70.113,19.2182 Z M56.82,17.0862 L57.644,19.2182 L67.691,19.2182 L68.522,17.0862 L56.82,17.0862 Z M48.872,19.2182 L55.244,19.2182 L55.244,17.0852 L48.872,17.0852 L48.872,19.2182 Z M21.259,17.0862 L21.259,19.2182 L40.801,19.2182 C40.316,18.4092 39.685,17.6882 38.953,17.0862 L38.953,17.0862 L21.259,17.0862 Z M4.267,19.2182 L10.639,19.2182 L10.639,17.0852 L4.267,17.0852 L4.267,19.2182 Z M70.113,23.4852 L76.485,23.4852 L76.485,21.3522 L70.113,21.3522 L70.113,23.4852 Z M58.494,21.3522 L59.334,23.4852 L66.023,23.4852 L66.857,21.3522 L58.494,21.3522 Z M48.872,23.4852 L55.244,23.4852 L55.244,21.3522 L48.872,21.3522 L48.872,23.4852 Z M34.004,21.3522 L34.004,23.4852 L41.863,23.4852 C41.863,22.7472 41.756,22.0322 41.565,21.3522 L41.565,21.3522 L34.004,21.3522 Z M21.259,23.4852 L27.632,23.4852 L27.632,21.3522 L21.259,21.3522 L21.259,23.4852 Z M4.267,23.4852 L10.639,23.4852 L10.639,21.3522 L4.267,21.3522 L4.267,23.4852 Z M70.113,27.7522 L80.733,27.7522 L80.733,25.6192 L70.113,25.6192 L70.113,27.7522 Z M60.169,25.6192 L61.001,27.7522 L64.363,27.7522 L65.191,25.6192 L60.169,25.6192 Z M44.624,27.7522 L55.244,27.7522 L55.244,25.6192 L44.624,25.6192 L44.624,27.7522 Z M17.011,25.6192 L17.011,27.7522 L40.97,27.7522 C41.365,27.0932 41.672,26.3772 41.863,25.6192 L41.863,25.6192 L17.011,25.6192 Z M0.019,27.7522 L14.887,27.7522 L14.887,25.6192 L0.019,25.6192 L0.019,27.7522 Z M70.113,32.0192 L80.733,32.0192 L80.733,29.8852 L70.113,29.8852 L70.113,32.0192 Z M61.833,29.8852 L62.676,32.0192 L63.53,29.8852 L61.833,29.8852 Z M44.624,32.0192 L55.244,32.0192 L55.244,29.8852 L44.624,29.8852 L44.624,32.0192 Z M17.011,29.8852 L17.011,32.0192 L33.961,32.0192 C36.205,32.0192 38.216,31.2102 39.738,29.8852 L39.738,29.8852 L17.011,29.8852 Z M0.019,32.0192 L14.887,32.0192 L14.887,29.8852 L0.019,29.8852 L0.019,32.0192 Z\\" id=\\"path-1\\"></path>
+      </defs>
+      <g id=\\"Artboard\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\">
+        <g id=\\"Group-7\\">
+          <mask id=\\"mask-2\\" fill=\\"white\\">
+            <use xlink:href=\\"#path-1\\"></use>
+          </mask>
+          <g id=\\"Clip-2\\"></g>
+          <polygon id=\\"Fill-1\\" fill=\\"#EC1D24\\" mask=\\"url(#mask-2)\\" points=\\"-1 33.0382 86.8 33.0382 86.8 -0.9998 -1 -0.9998\\"></polygon>
+          <polygon id=\\"Fill-3\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 3.3942 86.8 3.3942 86.8 -0.9998 -1 -0.9998\\"></polygon>
+          <polygon id=\\"Fill-4\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 11.8162 86.8 11.8162 86.8 7.4222 -1 7.4222\\"></polygon>
+          <polygon id=\\"Fill-5\\" fill=\\"#00A550\\" mask=\\"url(#mask-2)\\" points=\\"-1 20.3502 86.8 20.3502 86.8 15.9562 -1 15.9562\\"></polygon>
+          <polygon id=\\"Fill-6\\" fill=\\"#FFF100\\" mask=\\"url(#mask-2)\\" points=\\"-1 28.8832 86.8 28.8832 86.8 24.4892 -1 24.4892\\"></polygon>
+        </g>
+      </g>
+      </svg>",
+                        "tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+                      }
+                    }
+                    navType="default"
+                    navigation={Array []}
+                    platform={null}
+                    selectedMenuItem="Services & Consulting"
+                  >
+                    <ForwardRef(SideNav)
+                      addFocusListeners={true}
+                      addMouseListeners={true}
+                      aria-label="Side navigation"
+                      defaultExpanded={false}
+                      expanded={false}
+                      isChildOfHeader={true}
+                      isFixedNav={false}
+                      isPersistent={false}
+                    >
+                      <div
+                        className="bx--side-nav__overlay"
+                      />
+                      <nav
+                        aria-hidden={true}
+                        aria-label="Side navigation"
+                        className="bx--side-nav__navigation bx--side-nav bx--side-nav--ux bx--side-nav--hidden"
+                        onBlur={[Function]}
+                        onFocus={[Function]}
+                      >
+                        <nav
+                          data-autoid="dds--masthead-default-sidenav__l0"
+                        >
+                          <SideNavItems>
+                            <ul
+                              className="bx--side-nav__items"
+                            >
+                              <HeaderSideNavItems
+                                hasDivider={false}
+                                key=".0"
+                              >
+                                <div
+                                  className="bx--side-nav__header-navigation"
+                                >
+                                  <div>
+                                    <SideNavMenuSection
+                                      focusNode={
+                                        <button
+                                          aria-label="Open menu"
+                                          class="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
+                                          data-autoid="dds--masthead-default-sidenav__l0-menu"
+                                          title="Open menu"
+                                          type="button"
                                         >
-                                          <a
-                                            aria-expanded={false}
-                                            aria-haspopup="menu"
-                                            aria-label="Fusce nec tellus sed augue semper porta"
-                                            aria-selected="false"
-                                            className="bx--header__menu-item bx--header__menu-title"
-                                            data-title="fusce-nec-tellus-sed-augue-semper-porta"
-                                            href="#"
-                                            onClick={[Function]}
-                                            onKeyDown={[Function]}
-                                            role="menuitem"
-                                            tabIndex={0}
-                                          >
-                                            Fusce nec tellus sed augue semper porta
-                                            <defaultRenderMenuContent>
-                                              <ForwardRef(ChevronDown20)
-                                                className="bx--header__menu-arrow"
-                                              >
-                                                <Icon
-                                                  className="bx--header__menu-arrow"
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 32 32"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="bx--header__menu-arrow"
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 32 32"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ChevronDown20)>
-                                            </defaultRenderMenuContent>
-                                          </a>
-                                          <ul
-                                            aria-label="Fusce nec tellus sed augue semper porta"
-                                            className="bx--header__menu"
+                                          <svg
+                                            aria-hidden="true"
+                                            fill="currentColor"
+                                            focusable="false"
+                                            height="20"
+                                            preserveAspectRatio="xMidYMid meet"
+                                            viewBox="0 0 20 20"
+                                            width="20"
+                                            xmlns="http://www.w3.org/2000/svg"
                                           >
-                                            <ForwardRef(HeaderMenuItem)
-                                              data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item0"
-                                              href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                              key=".$IBM Developer"
-                                              refs={[Function]}
-                                              role="none"
-                                            >
-                                              <li
-                                                role="none"
-                                              >
-                                                <Link
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item0"
-                                                  element="a"
-                                                  href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                                  refs={[Function]}
-                                                  tabIndex={0}
-                                                >
-                                                  <a
-                                                    className="bx--header__menu-item"
-                                                    data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item0"
-                                                    href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                                    refs={[Function]}
-                                                    tabIndex={0}
-                                                  >
-                                                    <span
-                                                      className="bx--text-truncate--end"
-                                                    >
-                                                      IBM Developer
-                                                    </span>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </ForwardRef(HeaderMenuItem)>
-                                            <ForwardRef(HeaderMenuItem)
-                                              data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item1"
-                                              href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                              key=".$Blockchain"
-                                              refs={[Function]}
-                                              role="none"
-                                            >
-                                              <li
-                                                role="none"
-                                              >
-                                                <Link
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item1"
-                                                  element="a"
-                                                  href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                                  refs={[Function]}
-                                                  tabIndex={0}
-                                                >
-                                                  <a
-                                                    className="bx--header__menu-item"
-                                                    data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item1"
-                                                    href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                                    refs={[Function]}
-                                                    tabIndex={0}
-                                                  >
-                                                    <span
-                                                      className="bx--text-truncate--end"
-                                                    >
-                                                      Blockchain
-                                                    </span>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </ForwardRef(HeaderMenuItem)>
-                                            <ForwardRef(HeaderMenuItem)
-                                              data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item2"
-                                              href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                              key=".$Containers"
-                                              refs={[Function]}
-                                              role="none"
-                                            >
-                                              <li
-                                                role="none"
-                                              >
-                                                <Link
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item2"
-                                                  element="a"
-                                                  href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                  refs={[Function]}
-                                                  tabIndex={0}
-                                                >
-                                                  <a
-                                                    className="bx--header__menu-item"
-                                                    data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item2"
-                                                    href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                    refs={[Function]}
-                                                    tabIndex={0}
-                                                  >
-                                                    <span
-                                                      className="bx--text-truncate--end"
-                                                    >
-                                                      Containers
-                                                    </span>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </ForwardRef(HeaderMenuItem)>
-                                            <ForwardRef(HeaderMenuItem)
-                                              data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item3"
-                                              href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                              key=".$Analytics"
-                                              refs={[Function]}
-                                              role="none"
-                                            >
-                                              <li
-                                                role="none"
-                                              >
-                                                <Link
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item3"
-                                                  element="a"
-                                                  href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                  refs={[Function]}
-                                                  tabIndex={0}
-                                                >
-                                                  <a
-                                                    className="bx--header__menu-item"
-                                                    data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item3"
-                                                    href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                    refs={[Function]}
-                                                    tabIndex={0}
-                                                  >
-                                                    <span
-                                                      className="bx--text-truncate--end"
-                                                    >
-                                                      Analytics
-                                                    </span>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </ForwardRef(HeaderMenuItem)>
-                                          </ul>
-                                        </li>
-                                      </HeaderMenu>
-                                    </ForwardRef>
-                                    <ForwardRef(HeaderMenuItem)
-                                      aria-selected="false"
-                                      data-autoid="dds--masthead-default__l0-nav4"
-                                      href="https://www.ibm.com/support/home/?lnk=msu_usen"
-                                      key=".$4"
+                                            <path
+                                              d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
+                                            />
+                                          </svg>
+                                        </button>
+                                      }
+                                      id="panel__(-1,-1)"
+                                      onBackClick={[Function]}
+                                      show={true}
                                     >
-                                      <li>
-                                        <Link
-                                          aria-selected="false"
-                                          className="bx--header__menu-item"
-                                          data-autoid="dds--masthead-default__l0-nav4"
-                                          element="a"
-                                          href="https://www.ibm.com/support/home/?lnk=msu_usen"
-                                          tabIndex={0}
-                                        >
-                                          <a
-                                            aria-selected="false"
-                                            className="bx--header__menu-item"
-                                            data-autoid="dds--masthead-default__l0-nav4"
-                                            href="https://www.ibm.com/support/home/?lnk=msu_usen"
-                                            tabIndex={0}
-                                          >
-                                            <span
-                                              className="bx--text-truncate--end"
-                                            >
-                                              Sed cursus ante dapibus diam
-                                            </span>
-                                          </a>
-                                        </Link>
-                                      </li>
-                                    </ForwardRef(HeaderMenuItem)>
-                                  </ul>
-                                </nav>
-                              </HeaderNavigation>
-                            </div>
+                                      <div
+                                        aria-hidden={false}
+                                        className="bx--side-nav__menu-section bx--side-nav__menu-section--expanded"
+                                        id="panel__(-1,-1)"
+                                      >
+                                        <button
+                                          aria-hidden={true}
+                                          className="bx--masthead__focus"
+                                          onFocus={[Function]}
+                                        />
+                                      </div>
+                                    </SideNavMenuSection>
+                                  </div>
+                                </div>
+                              </HeaderSideNavItems>
+                            </ul>
+                          </SideNavItems>
+                        </nav>
+                      </nav>
+                    </ForwardRef(SideNav)>
+                  </MastheadLeftNav>
+                  <IbmLogo
+                    autoid="dds--masthead-default__l0-logo"
+                    isSearchActive={false}
+                    logoData={
+                      Object {
+                        "allowlist": Array [],
+                        "denylist": Array [],
+                        "end": "May 5, 2021 0:00:01",
+                        "path": "/",
+                        "svg": "<svg width=\\"81px\\" height=\\"33px\\" viewBox=\\"0 0 81 33\\" xmlns=\\"http://www.w3.org/2000/svg\\" version=\\"1.1\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\">
+      <title>Artboard</title>
+      <defs>
+        <path d=\\"M67.716,0.0192 L66.982,2.1532 L80.733,2.1532 L80.733,0.0192 L67.716,0.0192 Z M44.624,0.0192 L44.625,2.1532 L58.392,2.1532 L57.64,0.0192 L44.624,0.0192 Z M17.011,0.0192 L17.011,2.1532 L39.738,2.1532 C38.216,0.8282 36.189,0.0192 33.961,0.0192 L33.961,0.0192 L17.011,0.0192 Z M0.019,2.1532 L14.887,2.1532 L14.887,0.0192 L0.019,0.0192 L0.019,2.1532 Z M66.246,4.2862 L65.479,6.4192 L80.733,6.4192 L80.733,4.2862 L66.246,4.2862 Z M44.624,4.2862 L44.625,6.4192 L59.87,6.4192 L59.132,4.2862 L44.624,4.2862 Z M17.011,4.2862 L17.011,6.4192 L41.863,6.4192 C41.672,5.6612 41.365,4.9442 40.97,4.2862 L40.97,4.2862 L17.011,4.2862 Z M0.019,6.4192 L14.887,6.4192 L14.887,4.2862 L0.019,4.2862 L0.019,6.4192 Z M64.761,8.5532 L64.009,10.6862 L76.485,10.6862 L76.485,8.5532 L64.761,8.5532 Z M48.872,8.5532 L48.872,10.6862 L61.354,10.6862 L60.602,8.5532 L48.872,8.5532 Z M34.004,8.5532 L34.004,10.6862 L41.565,10.6862 C41.756,10.0052 41.863,9.2912 41.863,8.5532 L41.863,8.5532 L34.004,8.5532 Z M21.259,10.6862 L27.632,10.6862 L27.632,8.5532 L21.259,8.5532 L21.259,10.6862 Z M4.267,10.6862 L10.639,10.6862 L10.639,8.5532 L4.267,8.5532 L4.267,10.6862 Z M63.273,12.8192 L62.679,14.5432 L62.084,12.8192 L48.872,12.8192 L48.872,14.9532 L55.244,14.9532 L55.244,12.9912 L55.945,14.9532 L69.39,14.9532 L70.113,12.9912 L70.113,14.9532 L76.485,14.9532 L76.485,12.8192 L63.273,12.8192 Z M21.259,12.8192 L21.259,14.9532 L38.953,14.9532 C39.685,14.3502 40.316,13.6292 40.801,12.8192 L40.801,12.8192 L21.259,12.8192 Z M4.267,14.9532 L10.639,14.9532 L10.639,12.8192 L4.267,12.8192 L4.267,14.9532 Z M70.113,19.2182 L76.485,19.2182 L76.485,17.0852 L70.113,17.0852 L70.113,19.2182 Z M56.82,17.0862 L57.644,19.2182 L67.691,19.2182 L68.522,17.0862 L56.82,17.0862 Z M48.872,19.2182 L55.244,19.2182 L55.244,17.0852 L48.872,17.0852 L48.872,19.2182 Z M21.259,17.0862 L21.259,19.2182 L40.801,19.2182 C40.316,18.4092 39.685,17.6882 38.953,17.0862 L38.953,17.0862 L21.259,17.0862 Z M4.267,19.2182 L10.639,19.2182 L10.639,17.0852 L4.267,17.0852 L4.267,19.2182 Z M70.113,23.4852 L76.485,23.4852 L76.485,21.3522 L70.113,21.3522 L70.113,23.4852 Z M58.494,21.3522 L59.334,23.4852 L66.023,23.4852 L66.857,21.3522 L58.494,21.3522 Z M48.872,23.4852 L55.244,23.4852 L55.244,21.3522 L48.872,21.3522 L48.872,23.4852 Z M34.004,21.3522 L34.004,23.4852 L41.863,23.4852 C41.863,22.7472 41.756,22.0322 41.565,21.3522 L41.565,21.3522 L34.004,21.3522 Z M21.259,23.4852 L27.632,23.4852 L27.632,21.3522 L21.259,21.3522 L21.259,23.4852 Z M4.267,23.4852 L10.639,23.4852 L10.639,21.3522 L4.267,21.3522 L4.267,23.4852 Z M70.113,27.7522 L80.733,27.7522 L80.733,25.6192 L70.113,25.6192 L70.113,27.7522 Z M60.169,25.6192 L61.001,27.7522 L64.363,27.7522 L65.191,25.6192 L60.169,25.6192 Z M44.624,27.7522 L55.244,27.7522 L55.244,25.6192 L44.624,25.6192 L44.624,27.7522 Z M17.011,25.6192 L17.011,27.7522 L40.97,27.7522 C41.365,27.0932 41.672,26.3772 41.863,25.6192 L41.863,25.6192 L17.011,25.6192 Z M0.019,27.7522 L14.887,27.7522 L14.887,25.6192 L0.019,25.6192 L0.019,27.7522 Z M70.113,32.0192 L80.733,32.0192 L80.733,29.8852 L70.113,29.8852 L70.113,32.0192 Z M61.833,29.8852 L62.676,32.0192 L63.53,29.8852 L61.833,29.8852 Z M44.624,32.0192 L55.244,32.0192 L55.244,29.8852 L44.624,29.8852 L44.624,32.0192 Z M17.011,29.8852 L17.011,32.0192 L33.961,32.0192 C36.205,32.0192 38.216,31.2102 39.738,29.8852 L39.738,29.8852 L17.011,29.8852 Z M0.019,32.0192 L14.887,32.0192 L14.887,29.8852 L0.019,29.8852 L0.019,32.0192 Z\\" id=\\"path-1\\"></path>
+      </defs>
+      <g id=\\"Artboard\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\">
+        <g id=\\"Group-7\\">
+          <mask id=\\"mask-2\\" fill=\\"white\\">
+            <use xlink:href=\\"#path-1\\"></use>
+          </mask>
+          <g id=\\"Clip-2\\"></g>
+          <polygon id=\\"Fill-1\\" fill=\\"#EC1D24\\" mask=\\"url(#mask-2)\\" points=\\"-1 33.0382 86.8 33.0382 86.8 -0.9998 -1 -0.9998\\"></polygon>
+          <polygon id=\\"Fill-3\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 3.3942 86.8 3.3942 86.8 -0.9998 -1 -0.9998\\"></polygon>
+          <polygon id=\\"Fill-4\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 11.8162 86.8 11.8162 86.8 7.4222 -1 7.4222\\"></polygon>
+          <polygon id=\\"Fill-5\\" fill=\\"#00A550\\" mask=\\"url(#mask-2)\\" points=\\"-1 20.3502 86.8 20.3502 86.8 15.9562 -1 15.9562\\"></polygon>
+          <polygon id=\\"Fill-6\\" fill=\\"#FFF100\\" mask=\\"url(#mask-2)\\" points=\\"-1 28.8832 86.8 28.8832 86.8 24.4892 -1 24.4892\\"></polygon>
+        </g>
+      </g>
+      </svg>",
+                        "tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+                      }
+                    }
+                  >
+                    <div
+                      className="bx--header__logo"
+                    >
+                      <ConditionalWrapper
+                        condition={true}
+                        wrapper={[Function]}
+                      >
+                        <TooltipDefinition
+                          align="start"
+                          direction="bottom"
+                          tooltipText="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                        >
+                          <span
+                            className="bx--tooltip--definition bx--tooltip--a11y"
+                            onMouseEnter={[Function]}
+                            onMouseLeave={[Function]}
+                          >
+                            <button
+                              aria-describedby="definition-tooltip-2"
+                              className="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--bottom bx--tooltip--align-start"
+                              onBlur={[Function]}
+                              onFocus={[Function]}
+                              type="button"
+                            >
+                              <a
+                                aria-label="IBM®"
+                                data-autoid="dds--masthead-default__l0-logo"
+                                href="http://www.ibm.com"
+                              >
+                                <MastheadLogo
+                                  height="23"
+                                  viewBox="0 0 58 23"
+                                  width="58"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <svg
+                                    height="23"
+                                    viewBox="0 0 58 23"
+                                    width="58"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M58 21.467V23h-7.632v-1.533H58zm-18.316 0V23h-7.631v-1.533h7.631zm5.955 0L45.025 23l-.606-1.533h1.22zm-17.097 0A6.285 6.285 0 0 1 24.391 23H12.21v-1.533zm-17.858 0V23H0v-1.533h10.684zm29-3.067v1.533h-7.631V18.4h7.631zm7.148 0l-.594 1.533H43.82l-.598-1.533h3.609zm-16.764 0a5.719 5.719 0 0 1-.64 1.533H12.21V18.4zm-19.384 0v1.533H0V18.4h10.684zM58 18.4v1.533h-7.632V18.4H58zm-3.053-3.067v1.534h-4.579v-1.534h4.58zm-15.263 0v1.534h-4.579v-1.534h4.58zm8.345 0l-.6 1.534h-4.806l-.604-1.534h6.01zm-18.174 0c.137.49.213 1.003.213 1.534h-5.647v-1.534zm-10.013 0v1.534h-4.579v-1.534h4.58zm-12.21 0v1.534h-4.58v-1.534h4.58zm47.315-3.066V13.8h-4.579v-1.533h4.58zm-15.263 0V13.8h-4.579v-1.533h4.58zm9.541 0l-.597 1.533h-7.22l-.591-1.533h8.408zm-21.248 0c.527.432.98.951 1.328 1.533H15.263v-1.533zm-20.345 0V13.8h-4.58v-1.533h4.58zM44.599 9.2l.427 1.24.428-1.24h9.493v1.533h-4.579V9.324l-.519 1.41h-9.661l-.504-1.41v1.41h-4.579V9.2H44.6zm-36.967 0v1.533h-4.58V9.2h4.58zm21.673 0a5.95 5.95 0 0 1-1.328 1.533H15.263V9.2zm25.642-3.067v1.534h-8.964l.54-1.534h8.424zm-11.413 0l.54 1.534h-8.969V6.133h8.43zm-13.466 0c0 .531-.076 1.045-.213 1.534H24.42V6.133zm-10.226 0v1.534h-4.579V6.133h4.58zm-12.21 0v1.534h-4.58V6.133h4.58zm34.845-3.066l.53 1.533H32.054V3.067h10.424zm15.523 0V4.6H47.04l.55-1.533H58zm-28.573 0c.284.473.504.988.641 1.533H12.211V3.067zm-18.743 0V4.6H0V3.067h10.684zM41.406 0l.54 1.533h-9.893V0h9.353zM58 0v1.533h-9.881L48.647 0H58zM24.39 0c1.601 0 3.057.581 4.152 1.533H12.211V0zM10.685 0v1.533H0V0h10.684z"
+                                      fill="#161616"
+                                      fillRule="evenodd"
+                                    />
+                                  </svg>
+                                </MastheadLogo>
+                              </a>
+                            </button>
+                            <span
+                              className="bx--assistive-text"
+                              id="definition-tooltip-2"
+                              role="tooltip"
+                            >
+                              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                            </span>
+                          </span>
+                        </TooltipDefinition>
+                      </ConditionalWrapper>
+                    </div>
+                  </IbmLogo>
+                  <div
+                    className="bx--header__search "
+                  >
+                    <MastheadTopNav
+                      mastheadLogo={
+                        Object {
+                          "allowlist": Array [],
+                          "denylist": Array [],
+                          "end": "May 5, 2021 0:00:01",
+                          "path": "/",
+                          "svg": "<svg width=\\"81px\\" height=\\"33px\\" viewBox=\\"0 0 81 33\\" xmlns=\\"http://www.w3.org/2000/svg\\" version=\\"1.1\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\">
+      <title>Artboard</title>
+      <defs>
+        <path d=\\"M67.716,0.0192 L66.982,2.1532 L80.733,2.1532 L80.733,0.0192 L67.716,0.0192 Z M44.624,0.0192 L44.625,2.1532 L58.392,2.1532 L57.64,0.0192 L44.624,0.0192 Z M17.011,0.0192 L17.011,2.1532 L39.738,2.1532 C38.216,0.8282 36.189,0.0192 33.961,0.0192 L33.961,0.0192 L17.011,0.0192 Z M0.019,2.1532 L14.887,2.1532 L14.887,0.0192 L0.019,0.0192 L0.019,2.1532 Z M66.246,4.2862 L65.479,6.4192 L80.733,6.4192 L80.733,4.2862 L66.246,4.2862 Z M44.624,4.2862 L44.625,6.4192 L59.87,6.4192 L59.132,4.2862 L44.624,4.2862 Z M17.011,4.2862 L17.011,6.4192 L41.863,6.4192 C41.672,5.6612 41.365,4.9442 40.97,4.2862 L40.97,4.2862 L17.011,4.2862 Z M0.019,6.4192 L14.887,6.4192 L14.887,4.2862 L0.019,4.2862 L0.019,6.4192 Z M64.761,8.5532 L64.009,10.6862 L76.485,10.6862 L76.485,8.5532 L64.761,8.5532 Z M48.872,8.5532 L48.872,10.6862 L61.354,10.6862 L60.602,8.5532 L48.872,8.5532 Z M34.004,8.5532 L34.004,10.6862 L41.565,10.6862 C41.756,10.0052 41.863,9.2912 41.863,8.5532 L41.863,8.5532 L34.004,8.5532 Z M21.259,10.6862 L27.632,10.6862 L27.632,8.5532 L21.259,8.5532 L21.259,10.6862 Z M4.267,10.6862 L10.639,10.6862 L10.639,8.5532 L4.267,8.5532 L4.267,10.6862 Z M63.273,12.8192 L62.679,14.5432 L62.084,12.8192 L48.872,12.8192 L48.872,14.9532 L55.244,14.9532 L55.244,12.9912 L55.945,14.9532 L69.39,14.9532 L70.113,12.9912 L70.113,14.9532 L76.485,14.9532 L76.485,12.8192 L63.273,12.8192 Z M21.259,12.8192 L21.259,14.9532 L38.953,14.9532 C39.685,14.3502 40.316,13.6292 40.801,12.8192 L40.801,12.8192 L21.259,12.8192 Z M4.267,14.9532 L10.639,14.9532 L10.639,12.8192 L4.267,12.8192 L4.267,14.9532 Z M70.113,19.2182 L76.485,19.2182 L76.485,17.0852 L70.113,17.0852 L70.113,19.2182 Z M56.82,17.0862 L57.644,19.2182 L67.691,19.2182 L68.522,17.0862 L56.82,17.0862 Z M48.872,19.2182 L55.244,19.2182 L55.244,17.0852 L48.872,17.0852 L48.872,19.2182 Z M21.259,17.0862 L21.259,19.2182 L40.801,19.2182 C40.316,18.4092 39.685,17.6882 38.953,17.0862 L38.953,17.0862 L21.259,17.0862 Z M4.267,19.2182 L10.639,19.2182 L10.639,17.0852 L4.267,17.0852 L4.267,19.2182 Z M70.113,23.4852 L76.485,23.4852 L76.485,21.3522 L70.113,21.3522 L70.113,23.4852 Z M58.494,21.3522 L59.334,23.4852 L66.023,23.4852 L66.857,21.3522 L58.494,21.3522 Z M48.872,23.4852 L55.244,23.4852 L55.244,21.3522 L48.872,21.3522 L48.872,23.4852 Z M34.004,21.3522 L34.004,23.4852 L41.863,23.4852 C41.863,22.7472 41.756,22.0322 41.565,21.3522 L41.565,21.3522 L34.004,21.3522 Z M21.259,23.4852 L27.632,23.4852 L27.632,21.3522 L21.259,21.3522 L21.259,23.4852 Z M4.267,23.4852 L10.639,23.4852 L10.639,21.3522 L4.267,21.3522 L4.267,23.4852 Z M70.113,27.7522 L80.733,27.7522 L80.733,25.6192 L70.113,25.6192 L70.113,27.7522 Z M60.169,25.6192 L61.001,27.7522 L64.363,27.7522 L65.191,25.6192 L60.169,25.6192 Z M44.624,27.7522 L55.244,27.7522 L55.244,25.6192 L44.624,25.6192 L44.624,27.7522 Z M17.011,25.6192 L17.011,27.7522 L40.97,27.7522 C41.365,27.0932 41.672,26.3772 41.863,25.6192 L41.863,25.6192 L17.011,25.6192 Z M0.019,27.7522 L14.887,27.7522 L14.887,25.6192 L0.019,25.6192 L0.019,27.7522 Z M70.113,32.0192 L80.733,32.0192 L80.733,29.8852 L70.113,29.8852 L70.113,32.0192 Z M61.833,29.8852 L62.676,32.0192 L63.53,29.8852 L61.833,29.8852 Z M44.624,32.0192 L55.244,32.0192 L55.244,29.8852 L44.624,29.8852 L44.624,32.0192 Z M17.011,29.8852 L17.011,32.0192 L33.961,32.0192 C36.205,32.0192 38.216,31.2102 39.738,29.8852 L39.738,29.8852 L17.011,29.8852 Z M0.019,32.0192 L14.887,32.0192 L14.887,29.8852 L0.019,29.8852 L0.019,32.0192 Z\\" id=\\"path-1\\"></path>
+      </defs>
+      <g id=\\"Artboard\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\">
+        <g id=\\"Group-7\\">
+          <mask id=\\"mask-2\\" fill=\\"white\\">
+            <use xlink:href=\\"#path-1\\"></use>
+          </mask>
+          <g id=\\"Clip-2\\"></g>
+          <polygon id=\\"Fill-1\\" fill=\\"#EC1D24\\" mask=\\"url(#mask-2)\\" points=\\"-1 33.0382 86.8 33.0382 86.8 -0.9998 -1 -0.9998\\"></polygon>
+          <polygon id=\\"Fill-3\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 3.3942 86.8 3.3942 86.8 -0.9998 -1 -0.9998\\"></polygon>
+          <polygon id=\\"Fill-4\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 11.8162 86.8 11.8162 86.8 7.4222 -1 7.4222\\"></polygon>
+          <polygon id=\\"Fill-5\\" fill=\\"#00A550\\" mask=\\"url(#mask-2)\\" points=\\"-1 20.3502 86.8 20.3502 86.8 15.9562 -1 15.9562\\"></polygon>
+          <polygon id=\\"Fill-6\\" fill=\\"#FFF100\\" mask=\\"url(#mask-2)\\" points=\\"-1 28.8832 86.8 28.8832 86.8 24.4892 -1 24.4892\\"></polygon>
+        </g>
+      </g>
+      </svg>",
+                          "tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+                        }
+                      }
+                      navType="default"
+                      navigation={Array []}
+                      platform={null}
+                      selectedMenuItem="Services & Consulting"
+                    >
+                      <HeaderNavContainer>
+                        <div
+                          className="bx--header__nav-container"
+                        >
+                          <div
+                            className="bx--header__nav-content"
+                          >
                             <div
-                              className="bx--header__nav-caret-left-container"
-                              hidden={true}
+                              className="bx--sub-content-left"
+                            />
+                            <div
+                              className="bx--sub-content-right"
+                            />
+                            <HeaderNavigation
+                              aria-label="IBM"
+                              data-autoid="dds--masthead__l0-nav"
                             >
-                              <button
-                                aria-hidden="true"
-                                aria-label="Masthead left caret"
-                                className="bx--header__nav-caret-left"
-                                onClick={[Function]}
-                                tabIndex="-1"
+                              <nav
+                                aria-label="IBM"
+                                className="bx--header__nav"
+                                data-autoid="dds--masthead__l0-nav"
                               >
-                                <ForwardRef(CaretLeft20)>
-                                  <Icon
+                                <ul
+                                  aria-label="IBM"
+                                  className="bx--header__menu-bar"
+                                />
+                              </nav>
+                            </HeaderNavigation>
+                          </div>
+                          <div
+                            className="bx--header__nav-caret-left-container"
+                            hidden={true}
+                          >
+                            <button
+                              aria-hidden="true"
+                              aria-label="Masthead left caret"
+                              className="bx--header__nav-caret-left"
+                              onClick={[Function]}
+                              tabIndex="-1"
+                            >
+                              <ForwardRef(CaretLeft20)>
+                                <Icon
+                                  fill="currentColor"
+                                  height={20}
+                                  preserveAspectRatio="xMidYMid meet"
+                                  viewBox="0 0 32 32"
+                                  width={20}
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <svg
+                                    aria-hidden={true}
                                     fill="currentColor"
+                                    focusable="false"
                                     height={20}
                                     preserveAspectRatio="xMidYMid meet"
                                     viewBox="0 0 32 32"
                                     width={20}
                                     xmlns="http://www.w3.org/2000/svg"
                                   >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M20 24L10 16 20 8z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(CaretLeft20)>
-                              </button>
-                              <div
-                                className="bx--header__nav-caret-left-gradient"
-                              />
-                            </div>
+                                    <path
+                                      d="M20 24L10 16 20 8z"
+                                    />
+                                  </svg>
+                                </Icon>
+                              </ForwardRef(CaretLeft20)>
+                            </button>
                             <div
-                              className="bx--header__nav-caret-right-container"
-                              hidden={true}
+                              className="bx--header__nav-caret-left-gradient"
+                            />
+                          </div>
+                          <div
+                            className="bx--header__nav-caret-right-container"
+                            hidden={true}
+                          >
+                            <div
+                              className="bx--header__nav-caret-right-gradient"
+                            />
+                            <button
+                              aria-hidden="true"
+                              aria-label="Masthead right caret"
+                              className="bx--header__nav-caret-right"
+                              onClick={[Function]}
+                              tabIndex="-1"
                             >
-                              <div
-                                className="bx--header__nav-caret-right-gradient"
-                              />
-                              <button
-                                aria-hidden="true"
-                                aria-label="Masthead right caret"
-                                className="bx--header__nav-caret-right"
-                                onClick={[Function]}
-                                tabIndex="-1"
-                              >
-                                <ForwardRef(CaretRight20)>
-                                  <Icon
+                              <ForwardRef(CaretRight20)>
+                                <Icon
+                                  fill="currentColor"
+                                  height={20}
+                                  preserveAspectRatio="xMidYMid meet"
+                                  viewBox="0 0 32 32"
+                                  width={20}
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <svg
+                                    aria-hidden={true}
                                     fill="currentColor"
+                                    focusable="false"
                                     height={20}
                                     preserveAspectRatio="xMidYMid meet"
                                     viewBox="0 0 32 32"
                                     width={20}
                                     xmlns="http://www.w3.org/2000/svg"
                                   >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M12 8L22 16 12 24z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(CaretRight20)>
-                              </button>
-                            </div>
+                                    <path
+                                      d="M12 8L22 16 12 24z"
+                                    />
+                                  </svg>
+                                </Icon>
+                              </ForwardRef(CaretRight20)>
+                            </button>
                           </div>
-                        </HeaderNavContainer>
-                        <div
-                          className="bx--masthead__overlay"
-                        />
-                      </MastheadTopNav>
-                      <MastheadSearch
-                        customProfileLogin={null}
-                        initialSearchTerm=""
-                        isSearchActive={false}
-                        navType="default"
-                        onChangeSearchActive={[Function]}
-                        placeHolderText="Search all of IBM"
-                        renderValue={3}
-                        searchOpenOnload={false}
+                        </div>
+                      </HeaderNavContainer>
+                      <div
+                        className="bx--masthead__overlay"
+                      />
+                    </MastheadTopNav>
+                    <MastheadSearch
+                      initialSearchTerm=""
+                      isSearchActive={false}
+                      mastheadLogo={
+                        Object {
+                          "allowlist": Array [],
+                          "denylist": Array [],
+                          "end": "May 5, 2021 0:00:01",
+                          "path": "/",
+                          "svg": "<svg width=\\"81px\\" height=\\"33px\\" viewBox=\\"0 0 81 33\\" xmlns=\\"http://www.w3.org/2000/svg\\" version=\\"1.1\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\">
+      <title>Artboard</title>
+      <defs>
+        <path d=\\"M67.716,0.0192 L66.982,2.1532 L80.733,2.1532 L80.733,0.0192 L67.716,0.0192 Z M44.624,0.0192 L44.625,2.1532 L58.392,2.1532 L57.64,0.0192 L44.624,0.0192 Z M17.011,0.0192 L17.011,2.1532 L39.738,2.1532 C38.216,0.8282 36.189,0.0192 33.961,0.0192 L33.961,0.0192 L17.011,0.0192 Z M0.019,2.1532 L14.887,2.1532 L14.887,0.0192 L0.019,0.0192 L0.019,2.1532 Z M66.246,4.2862 L65.479,6.4192 L80.733,6.4192 L80.733,4.2862 L66.246,4.2862 Z M44.624,4.2862 L44.625,6.4192 L59.87,6.4192 L59.132,4.2862 L44.624,4.2862 Z M17.011,4.2862 L17.011,6.4192 L41.863,6.4192 C41.672,5.6612 41.365,4.9442 40.97,4.2862 L40.97,4.2862 L17.011,4.2862 Z M0.019,6.4192 L14.887,6.4192 L14.887,4.2862 L0.019,4.2862 L0.019,6.4192 Z M64.761,8.5532 L64.009,10.6862 L76.485,10.6862 L76.485,8.5532 L64.761,8.5532 Z M48.872,8.5532 L48.872,10.6862 L61.354,10.6862 L60.602,8.5532 L48.872,8.5532 Z M34.004,8.5532 L34.004,10.6862 L41.565,10.6862 C41.756,10.0052 41.863,9.2912 41.863,8.5532 L41.863,8.5532 L34.004,8.5532 Z M21.259,10.6862 L27.632,10.6862 L27.632,8.5532 L21.259,8.5532 L21.259,10.6862 Z M4.267,10.6862 L10.639,10.6862 L10.639,8.5532 L4.267,8.5532 L4.267,10.6862 Z M63.273,12.8192 L62.679,14.5432 L62.084,12.8192 L48.872,12.8192 L48.872,14.9532 L55.244,14.9532 L55.244,12.9912 L55.945,14.9532 L69.39,14.9532 L70.113,12.9912 L70.113,14.9532 L76.485,14.9532 L76.485,12.8192 L63.273,12.8192 Z M21.259,12.8192 L21.259,14.9532 L38.953,14.9532 C39.685,14.3502 40.316,13.6292 40.801,12.8192 L40.801,12.8192 L21.259,12.8192 Z M4.267,14.9532 L10.639,14.9532 L10.639,12.8192 L4.267,12.8192 L4.267,14.9532 Z M70.113,19.2182 L76.485,19.2182 L76.485,17.0852 L70.113,17.0852 L70.113,19.2182 Z M56.82,17.0862 L57.644,19.2182 L67.691,19.2182 L68.522,17.0862 L56.82,17.0862 Z M48.872,19.2182 L55.244,19.2182 L55.244,17.0852 L48.872,17.0852 L48.872,19.2182 Z M21.259,17.0862 L21.259,19.2182 L40.801,19.2182 C40.316,18.4092 39.685,17.6882 38.953,17.0862 L38.953,17.0862 L21.259,17.0862 Z M4.267,19.2182 L10.639,19.2182 L10.639,17.0852 L4.267,17.0852 L4.267,19.2182 Z M70.113,23.4852 L76.485,23.4852 L76.485,21.3522 L70.113,21.3522 L70.113,23.4852 Z M58.494,21.3522 L59.334,23.4852 L66.023,23.4852 L66.857,21.3522 L58.494,21.3522 Z M48.872,23.4852 L55.244,23.4852 L55.244,21.3522 L48.872,21.3522 L48.872,23.4852 Z M34.004,21.3522 L34.004,23.4852 L41.863,23.4852 C41.863,22.7472 41.756,22.0322 41.565,21.3522 L41.565,21.3522 L34.004,21.3522 Z M21.259,23.4852 L27.632,23.4852 L27.632,21.3522 L21.259,21.3522 L21.259,23.4852 Z M4.267,23.4852 L10.639,23.4852 L10.639,21.3522 L4.267,21.3522 L4.267,23.4852 Z M70.113,27.7522 L80.733,27.7522 L80.733,25.6192 L70.113,25.6192 L70.113,27.7522 Z M60.169,25.6192 L61.001,27.7522 L64.363,27.7522 L65.191,25.6192 L60.169,25.6192 Z M44.624,27.7522 L55.244,27.7522 L55.244,25.6192 L44.624,25.6192 L44.624,27.7522 Z M17.011,25.6192 L17.011,27.7522 L40.97,27.7522 C41.365,27.0932 41.672,26.3772 41.863,25.6192 L41.863,25.6192 L17.011,25.6192 Z M0.019,27.7522 L14.887,27.7522 L14.887,25.6192 L0.019,25.6192 L0.019,27.7522 Z M70.113,32.0192 L80.733,32.0192 L80.733,29.8852 L70.113,29.8852 L70.113,32.0192 Z M61.833,29.8852 L62.676,32.0192 L63.53,29.8852 L61.833,29.8852 Z M44.624,32.0192 L55.244,32.0192 L55.244,29.8852 L44.624,29.8852 L44.624,32.0192 Z M17.011,29.8852 L17.011,32.0192 L33.961,32.0192 C36.205,32.0192 38.216,31.2102 39.738,29.8852 L39.738,29.8852 L17.011,29.8852 Z M0.019,32.0192 L14.887,32.0192 L14.887,29.8852 L0.019,29.8852 L0.019,32.0192 Z\\" id=\\"path-1\\"></path>
+      </defs>
+      <g id=\\"Artboard\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\">
+        <g id=\\"Group-7\\">
+          <mask id=\\"mask-2\\" fill=\\"white\\">
+            <use xlink:href=\\"#path-1\\"></use>
+          </mask>
+          <g id=\\"Clip-2\\"></g>
+          <polygon id=\\"Fill-1\\" fill=\\"#EC1D24\\" mask=\\"url(#mask-2)\\" points=\\"-1 33.0382 86.8 33.0382 86.8 -0.9998 -1 -0.9998\\"></polygon>
+          <polygon id=\\"Fill-3\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 3.3942 86.8 3.3942 86.8 -0.9998 -1 -0.9998\\"></polygon>
+          <polygon id=\\"Fill-4\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 11.8162 86.8 11.8162 86.8 7.4222 -1 7.4222\\"></polygon>
+          <polygon id=\\"Fill-5\\" fill=\\"#00A550\\" mask=\\"url(#mask-2)\\" points=\\"-1 20.3502 86.8 20.3502 86.8 15.9562 -1 15.9562\\"></polygon>
+          <polygon id=\\"Fill-6\\" fill=\\"#FFF100\\" mask=\\"url(#mask-2)\\" points=\\"-1 28.8832 86.8 28.8832 86.8 24.4892 -1 24.4892\\"></polygon>
+        </g>
+      </g>
+      </svg>",
+                          "tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+                        }
+                      }
+                      navType="default"
+                      onChangeSearchActive={[Function]}
+                      placeHolderText="Search all of IBM"
+                      renderValue={3}
+                      searchOpenOnload={false}
+                    >
+                      <div
+                        className="bx--masthead__search"
+                        data-autoid="dds--masthead__search"
                       >
                         <div
-                          className="bx--masthead__search"
-                          data-autoid="dds--masthead__search"
+                          className="bx--header__search--actions"
                         >
-                          <div
-                            className="bx--header__search--actions"
+                          <HeaderGlobalAction
+                            aria-label="Open IBM search field"
+                            className="bx--header__search--search"
+                            data-autoid="dds--masthead-default__l0-search"
+                            onClick={[Function]}
+                            tabIndex="0"
                           >
-                            <HeaderGlobalAction
+                            <Button
                               aria-label="Open IBM search field"
-                              className="bx--header__search--search"
+                              className="bx--header__search--search bx--header__action"
+                              dangerDescription="danger"
                               data-autoid="dds--masthead-default__l0-search"
+                              disabled={false}
+                              hasIconOnly={true}
+                              iconDescription="Open IBM search field"
+                              isExpressive={false}
+                              kind="primary"
                               onClick={[Function]}
+                              size="default"
                               tabIndex="0"
+                              tooltipAlignment="center"
+                              tooltipPosition="bottom"
+                              type="button"
                             >
-                              <Button
+                              <button
+                                aria-describedby={null}
                                 aria-label="Open IBM search field"
-                                className="bx--header__search--search bx--header__action"
-                                dangerDescription="danger"
+                                aria-pressed={null}
+                                className="bx--header__search--search bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
                                 data-autoid="dds--masthead-default__l0-search"
                                 disabled={false}
-                                hasIconOnly={true}
-                                iconDescription="Open IBM search field"
-                                isExpressive={false}
-                                kind="primary"
+                                onBlur={[Function]}
                                 onClick={[Function]}
-                                size="default"
+                                onFocus={[Function]}
+                                onMouseEnter={[Function]}
+                                onMouseLeave={[Function]}
                                 tabIndex="0"
-                                tooltipAlignment="center"
-                                tooltipPosition="bottom"
                                 type="button"
                               >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Open IBM search field"
-                                  aria-pressed={null}
-                                  className="bx--header__search--search bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-default__l0-search"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
+                                <div
+                                  className="bx--assistive-text"
                                   onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  tabIndex="0"
-                                  type="button"
                                 >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
+                                  Open IBM search field
+                                </div>
+                                <ForwardRef(Search20)>
+                                  <Icon
+                                    fill="currentColor"
+                                    height={20}
+                                    preserveAspectRatio="xMidYMid meet"
+                                    viewBox="0 0 32 32"
+                                    width={20}
+                                    xmlns="http://www.w3.org/2000/svg"
                                   >
-                                    Open IBM search field
-                                  </div>
-                                  <ForwardRef(Search20)>
-                                    <Icon
+                                    <svg
+                                      aria-hidden={true}
                                       fill="currentColor"
+                                      focusable="false"
                                       height={20}
                                       preserveAspectRatio="xMidYMid meet"
                                       viewBox="0 0 32 32"
                                       width={20}
                                       xmlns="http://www.w3.org/2000/svg"
                                     >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Search20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                            <HeaderGlobalAction
+                                      <path
+                                        d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
+                                      />
+                                    </svg>
+                                  </Icon>
+                                </ForwardRef(Search20)>
+                              </button>
+                            </Button>
+                          </HeaderGlobalAction>
+                          <HeaderGlobalAction
+                            aria-label="Close"
+                            className="bx--header__search--close"
+                            data-autoid="dds--masthead-default__l0-search--close"
+                            onClick={[Function]}
+                          >
+                            <Button
                               aria-label="Close"
-                              className="bx--header__search--close"
+                              className="bx--header__search--close bx--header__action"
+                              dangerDescription="danger"
                               data-autoid="dds--masthead-default__l0-search--close"
+                              disabled={false}
+                              hasIconOnly={true}
+                              iconDescription="Close"
+                              isExpressive={false}
+                              kind="primary"
                               onClick={[Function]}
+                              size="default"
+                              tabIndex={0}
+                              tooltipAlignment="center"
+                              tooltipPosition="bottom"
+                              type="button"
                             >
-                              <Button
+                              <button
+                                aria-describedby={null}
                                 aria-label="Close"
-                                className="bx--header__search--close bx--header__action"
-                                dangerDescription="danger"
+                                aria-pressed={null}
+                                className="bx--header__search--close bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
                                 data-autoid="dds--masthead-default__l0-search--close"
                                 disabled={false}
-                                hasIconOnly={true}
-                                iconDescription="Close"
-                                isExpressive={false}
-                                kind="primary"
+                                onBlur={[Function]}
                                 onClick={[Function]}
-                                size="default"
+                                onFocus={[Function]}
+                                onMouseEnter={[Function]}
+                                onMouseLeave={[Function]}
                                 tabIndex={0}
-                                tooltipAlignment="center"
-                                tooltipPosition="bottom"
                                 type="button"
                               >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Close"
-                                  aria-pressed={null}
-                                  className="bx--header__search--close bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-default__l0-search--close"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
+                                <div
+                                  className="bx--assistive-text"
                                   onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  tabIndex={0}
-                                  type="button"
                                 >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
+                                  Close
+                                </div>
+                                <ForwardRef(Close20)>
+                                  <Icon
+                                    fill="currentColor"
+                                    height={20}
+                                    preserveAspectRatio="xMidYMid meet"
+                                    viewBox="0 0 32 32"
+                                    width={20}
+                                    xmlns="http://www.w3.org/2000/svg"
                                   >
-                                    Close
-                                  </div>
-                                  <ForwardRef(Close20)>
-                                    <Icon
+                                    <svg
+                                      aria-hidden={true}
                                       fill="currentColor"
+                                      focusable="false"
                                       height={20}
                                       preserveAspectRatio="xMidYMid meet"
                                       viewBox="0 0 32 32"
                                       width={20}
                                       xmlns="http://www.w3.org/2000/svg"
                                     >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Close20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                          </div>
+                                      <path
+                                        d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
+                                      />
+                                    </svg>
+                                  </Icon>
+                                </ForwardRef(Close20)>
+                              </button>
+                            </Button>
+                          </HeaderGlobalAction>
                         </div>
-                      </MastheadSearch>
-                    </div>
-                    <HeaderGlobalBar
-                      className="bx--header__profile"
+                      </div>
+                    </MastheadSearch>
+                  </div>
+                  <HeaderGlobalBar
+                    className="bx--header__profile"
+                  >
+                    <div
+                      className="bx--header__global bx--header__profile"
                     >
-                      <div
-                        className="bx--header__global bx--header__profile"
-                      >
-                        <MastheadProfile
-                          navType="default"
-                          overflowMenuItemProps={
-                            Object {
-                              "wrapperClassName": "bx--masthead__profile-item",
-                            }
+                      <MastheadProfile
+                        navType="default"
+                        overflowMenuItemProps={
+                          Object {
+                            "wrapperClassName": "bx--masthead__profile-item",
                           }
-                          overflowMenuProps={
+                        }
+                        overflowMenuProps={
+                          Object {
+                            "ariaLabel": "User Profile",
+                            "data-autoid": "dds--masthead-default__l0-account",
+                            "flipped": true,
+                            "onOpen": [Function],
+                            "renderIcon": [Function],
+                            "style": Object {
+                              "width": "3rem",
+                            },
+                          }
+                        }
+                        profileMenu={Array []}
+                      >
+                        <ForwardRef(OverflowMenu)
+                          ariaLabel="User Profile"
+                          className="bx--header__action"
+                          data-autoid="dds--masthead-default__l0-account"
+                          flipped={true}
+                          onOpen={[Function]}
+                          renderIcon={[Function]}
+                          style={
                             Object {
-                              "ariaLabel": "User Profile",
-                              "data-autoid": "dds--masthead-default__l0-account",
-                              "flipped": true,
-                              "onOpen": [Function],
-                              "renderIcon": [Function],
-                              "style": Object {
-                                "width": "3rem",
-                              },
+                              "width": "3rem",
                             }
                           }
-                          profileMenu={Array []}
                         >
-                          <ForwardRef(OverflowMenu)
+                          <OverflowMenu
                             ariaLabel="User Profile"
                             className="bx--header__action"
                             data-autoid="dds--masthead-default__l0-account"
+                            direction="bottom"
                             flipped={true}
+                            iconDescription="open and close list of options"
+                            innerRef={null}
+                            light={false}
+                            menuOffset={[Function]}
+                            menuOffsetFlip={[Function]}
+                            onClick={[Function]}
+                            onClose={[Function]}
+                            onKeyDown={[Function]}
                             onOpen={[Function]}
+                            open={false}
                             renderIcon={[Function]}
+                            selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
                             style={
                               Object {
                                 "width": "3rem",
                               }
                             }
                           >
-                            <OverflowMenu
-                              ariaLabel="User Profile"
-                              className="bx--header__action"
-                              data-autoid="dds--masthead-default__l0-account"
-                              direction="bottom"
-                              flipped={true}
-                              iconDescription="open and close list of options"
-                              innerRef={null}
-                              light={false}
-                              menuOffset={[Function]}
-                              menuOffsetFlip={[Function]}
-                              onClick={[Function]}
-                              onClose={[Function]}
-                              onKeyDown={[Function]}
-                              onOpen={[Function]}
-                              open={false}
-                              renderIcon={[Function]}
-                              selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
-                              style={
-                                Object {
-                                  "width": "3rem",
-                                }
-                              }
+                            <ClickListener
+                              onClickOutside={[Function]}
                             >
-                              <ClickListener
-                                onClickOutside={[Function]}
+                              <button
+                                aria-expanded={false}
+                                aria-haspopup={true}
+                                aria-label="User Profile"
+                                className="bx--header__action bx--overflow-menu"
+                                data-autoid="dds--masthead-default__l0-account"
+                                onClick={[Function]}
+                                onClose={[Function]}
+                                onKeyDown={[Function]}
+                                open={false}
+                                style={
+                                  Object {
+                                    "width": "3rem",
+                                  }
+                                }
+                                type="button"
                               >
-                                <button
-                                  aria-expanded={false}
-                                  aria-haspopup={true}
-                                  aria-label="User Profile"
-                                  className="bx--header__action bx--overflow-menu"
-                                  data-autoid="dds--masthead-default__l0-account"
+                                <renderIcon
+                                  aria-label="open and close list of options"
+                                  className="bx--overflow-menu__icon"
                                   onClick={[Function]}
-                                  onClose={[Function]}
                                   onKeyDown={[Function]}
-                                  open={false}
-                                  style={
-                                    Object {
-                                      "width": "3rem",
-                                    }
-                                  }
-                                  type="button"
                                 >
-                                  <renderIcon
-                                    aria-label="open and close list of options"
-                                    className="bx--overflow-menu__icon"
-                                    onClick={[Function]}
-                                    onKeyDown={[Function]}
-                                  >
-                                    <ForwardRef(User20)>
-                                      <Icon
+                                  <ForwardRef(User20)>
+                                    <Icon
+                                      fill="currentColor"
+                                      height={20}
+                                      preserveAspectRatio="xMidYMid meet"
+                                      viewBox="0 0 32 32"
+                                      width={20}
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <svg
+                                        aria-hidden={true}
                                         fill="currentColor"
+                                        focusable="false"
                                         height={20}
                                         preserveAspectRatio="xMidYMid meet"
                                         viewBox="0 0 32 32"
                                         width={20}
                                         xmlns="http://www.w3.org/2000/svg"
                                       >
-                                        <svg
-                                          aria-hidden={true}
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M16 4a5 5 0 11-5 5 5 5 0 015-5m0-2a7 7 0 107 7A7 7 0 0016 2zM26 30H24V25a5 5 0 00-5-5H13a5 5 0 00-5 5v5H6V25a7 7 0 017-7h6a7 7 0 017 7z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(User20)>
-                                  </renderIcon>
-                                </button>
-                              </ClickListener>
-                            </OverflowMenu>
-                          </ForwardRef(OverflowMenu)>
-                        </MastheadProfile>
-                      </div>
-                    </HeaderGlobalBar>
-                  </header>
-                </Header>
-              </div>
+                                        <path
+                                          d="M16 4a5 5 0 11-5 5 5 5 0 015-5m0-2a7 7 0 107 7A7 7 0 0016 2zM26 30H24V25a5 5 0 00-5-5H13a5 5 0 00-5 5v5H6V25a7 7 0 017-7h6a7 7 0 017 7z"
+                                        />
+                                      </svg>
+                                    </Icon>
+                                  </ForwardRef(User20)>
+                                </renderIcon>
+                              </button>
+                            </ClickListener>
+                          </OverflowMenu>
+                        </ForwardRef(OverflowMenu)>
+                      </MastheadProfile>
+                    </div>
+                  </HeaderGlobalBar>
+                </header>
+              </Header>
             </div>
-          </render>
-        </HeaderContainer>
-      </Masthead>
-    </Default>
+          </div>
+        </render>
+      </HeaderContainer>
+    </Masthead>
   </div>
   <input
     aria-label="input-text-offleft"
@@ -126626,11 +126660,11 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
 </Container>
 `;
 
-exports[`Storyshots Components|Masthead With L 1 1`] = `
+exports[`Storyshots Components|Masthead With custom navigation 1`] = `
 <Container
   parameters={
     Object {
-      "__id": "components-masthead--with-l-1",
+      "__id": "components-masthead--with-custom-navigation",
       "component": undefined,
       "docs": Object {},
       "fileName": "./components/Masthead/__stories__/Masthead.stories.js",
@@ -126668,326 +126702,322 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
       },
       "props": Object {
         "Masthead": Object {
+          "customProfileLogin": null,
           "hasProfile": true,
           "hasSearch": true,
-          "mastheadL1Data": Object {
-            "navigationL1": Array [
-              Object {
-                "hasMegapanel": false,
-                "hasMenu": true,
-                "menuSections": Array [
-                  Object {
-                    "heading": "Explore",
-                    "menuItems": Array [
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "",
-                            "imageUrl": "",
-                            "linkTitle": "",
-                            "linkUrl": "",
-                          },
-                          "headingTitle": "",
-                          "headingUrl": "",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Title",
-                          },
+          "navigation": Array [
+            Object {
+              "hasMegapanel": false,
+              "hasMenu": true,
+              "menuSections": Array [
+                Object {
+                  "heading": "Explore",
+                  "menuItems": Array [
+                    Object {
+                      "megapanelContent": Object {
+                        "description": "",
+                        "feature": Object {
+                          "heading": "",
+                          "imageUrl": "",
+                          "linkTitle": "",
+                          "linkUrl": "",
+                        },
+                        "headingTitle": "",
+                        "headingUrl": "",
+                        "quickLinks": Object {
+                          "links": Array [
+                            Object {
+                              "title": "Subnav 1",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 2",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 3",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 4",
+                              "url": "",
+                            },
+                          ],
+                          "title": "Title",
                         },
-                        "title": "Link 1",
-                        "url": "",
-                      },
-                      Object {
-                        "title": "Menu dropdown item with extra long text",
-                        "url": "",
                       },
-                    ],
-                  },
-                ],
-                "title": "Lorem ipsum dolor sit amet",
-                "titleEnglish": "Lorem ipsum dolor sit amet",
-                "url": "",
-              },
-              Object {
-                "hasMenu": true,
-                "menuSections": Array [
-                  Object {
-                    "heading": "",
-                    "menuItems": Array [
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "Reimagine your business, designing and building the platforms necessary for growth",
-                          "feature": Object {
-                            "heading": "IBM Services, your Digital Reinvention â„¢ partner",
-                            "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
-                            "linkTitle": "Explore all our business consulting and technology services",
-                            "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                          },
-                          "headingTitle": "Services",
-                          "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
+                      "title": "Link 1",
+                      "url": "",
+                    },
+                    Object {
+                      "title": "Menu dropdown item with extra long text",
+                      "url": "",
+                    },
+                  ],
+                },
+              ],
+              "title": "Lorem ipsum dolor sit amet",
+              "titleEnglish": "Lorem ipsum dolor sit amet",
+              "url": "",
+            },
+            Object {
+              "hasMenu": true,
+              "menuSections": Array [
+                Object {
+                  "heading": "",
+                  "menuItems": Array [
+                    Object {
+                      "megapanelContent": Object {
+                        "description": "Reimagine your business, designing and building the platforms necessary for growth",
+                        "feature": Object {
+                          "heading": "IBM Services, your Digital Reinvention â„¢ partner",
+                          "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
+                          "linkTitle": "Explore all our business consulting and technology services",
+                          "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
+                        },
+                        "headingTitle": "Services",
+                        "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
+                        "quickLinks": Object {
+                          "links": Array [
+                            Object {
+                              "title": "Subnav 1",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 2",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 3",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 4",
+                              "url": "",
+                            },
+                          ],
+                          "title": "Quicklinks",
                         },
-                        "title": "Link 2",
-                        "url": "",
                       },
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "Funding options that fit your business",
-                          "feature": Object {
-                            "heading": "Cloud financing strategies that work for your business",
-                            "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
-                            "linkTitle": "Committed to cloud? Make the most of your cash flow.",
-                            "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
-                          },
-                          "headingTitle": "Financing",
-                          "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
+                      "title": "Link 2",
+                      "url": "",
+                    },
+                    Object {
+                      "megapanelContent": Object {
+                        "description": "Funding options that fit your business",
+                        "feature": Object {
+                          "heading": "Cloud financing strategies that work for your business",
+                          "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
+                          "linkTitle": "Committed to cloud? Make the most of your cash flow.",
+                          "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
+                        },
+                        "headingTitle": "Financing",
+                        "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
+                        "quickLinks": Object {
+                          "links": Array [
+                            Object {
+                              "title": "Subnav 1",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 2",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 3",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 4",
+                              "url": "",
+                            },
+                          ],
+                          "title": "Quicklinks",
                         },
-                        "title": "Financing",
-                        "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
                       },
-                    ],
-                  },
-                ],
-                "title": "Consectetur adipiscing elit",
-                "titleEnglish": "Consectetur adipiscing elit",
-                "url": "",
-              },
-              Object {
-                "hasMegapanel": false,
-                "hasMenu": false,
-                "menuSections": Array [],
-                "title": "Nulla quis sem at nibh elementum imperdiet",
-                "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
-                "url": "https://www.ibm.com/industries?lnk=min",
-              },
-              Object {
-                "hasMegapanel": false,
-                "hasMenu": true,
-                "menuSections": Array [
-                  Object {
-                    "heading": "",
-                    "menuItems": Array [
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "IBM Developer newsletters",
-                            "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
-                            "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
-                            "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          "headingTitle": "IBM Developer",
-                          "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
+                      "title": "Financing",
+                      "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
+                    },
+                  ],
+                },
+              ],
+              "title": "Consectetur adipiscing elit",
+              "titleEnglish": "Consectetur adipiscing elit",
+              "url": "",
+            },
+            Object {
+              "hasMegapanel": false,
+              "hasMenu": false,
+              "menuSections": Array [],
+              "title": "Nulla quis sem at nibh elementum imperdiet",
+              "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
+              "url": "https://www.ibm.com/industries?lnk=min",
+            },
+            Object {
+              "hasMegapanel": false,
+              "hasMenu": true,
+              "menuSections": Array [
+                Object {
+                  "heading": "",
+                  "menuItems": Array [
+                    Object {
+                      "megapanelContent": Object {
+                        "description": "",
+                        "feature": Object {
+                          "heading": "IBM Developer newsletters",
+                          "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
+                          "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
+                          "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
+                        },
+                        "headingTitle": "IBM Developer",
+                        "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
+                        "quickLinks": Object {
+                          "links": Array [
+                            Object {
+                              "title": "Subnav 1",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 2",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 3",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 4",
+                              "url": "",
+                            },
+                          ],
+                          "title": "Quicklinks",
                         },
-                        "title": "IBM Developer",
-                        "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
                       },
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "Blockchain 101",
-                            "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
-                            "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
-                            "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          "headingTitle": "Blockchain",
-                          "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
+                      "title": "IBM Developer",
+                      "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
+                    },
+                    Object {
+                      "megapanelContent": Object {
+                        "description": "",
+                        "feature": Object {
+                          "heading": "Blockchain 101",
+                          "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
+                          "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
+                          "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
+                        },
+                        "headingTitle": "Blockchain",
+                        "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
+                        "quickLinks": Object {
+                          "links": Array [
+                            Object {
+                              "title": "Subnav 1",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 2",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 3",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 4",
+                              "url": "",
+                            },
+                          ],
+                          "title": "Quicklinks",
                         },
-                        "title": "Blockchain",
-                        "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
                       },
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "Make sense of Kubernetes",
-                            "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
-                            "linkTitle": "Deploy a simple Python application with Kubernetes",
-                            "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          "headingTitle": "Containers",
-                          "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Code patterns",
-                                "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Tutorials",
-                                "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Events",
-                                "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
+                      "title": "Blockchain",
+                      "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
+                    },
+                    Object {
+                      "megapanelContent": Object {
+                        "description": "",
+                        "feature": Object {
+                          "heading": "Make sense of Kubernetes",
+                          "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
+                          "linkTitle": "Deploy a simple Python application with Kubernetes",
+                          "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
+                        },
+                        "headingTitle": "Containers",
+                        "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
+                        "quickLinks": Object {
+                          "links": Array [
+                            Object {
+                              "title": "Code patterns",
+                              "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                            },
+                            Object {
+                              "title": "Tutorials",
+                              "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                            },
+                            Object {
+                              "title": "Events",
+                              "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                            },
+                          ],
+                          "title": "Quicklinks",
                         },
-                        "title": "Containers",
-                        "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
                       },
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "Train your data no matter where it lives",
-                            "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
-                            "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
-                            "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          "headingTitle": "Analytics",
-                          "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Code patterns",
-                                "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Tutorials",
-                                "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Events",
-                                "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Developer community",
-                                "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
+                      "title": "Containers",
+                      "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
+                    },
+                    Object {
+                      "megapanelContent": Object {
+                        "description": "",
+                        "feature": Object {
+                          "heading": "Train your data no matter where it lives",
+                          "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
+                          "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
+                          "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
+                        },
+                        "headingTitle": "Analytics",
+                        "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                        "quickLinks": Object {
+                          "links": Array [
+                            Object {
+                              "title": "Code patterns",
+                              "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                            },
+                            Object {
+                              "title": "Tutorials",
+                              "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                            },
+                            Object {
+                              "title": "Events",
+                              "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                            },
+                            Object {
+                              "title": "Developer community",
+                              "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
+                            },
+                          ],
+                          "title": "Quicklinks",
                         },
-                        "title": "Analytics",
-                        "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
                       },
-                    ],
-                  },
-                ],
-                "title": "Fusce nec tellus sed augue semper porta",
-                "titleEnglish": "Fusce nec tellus sed augue semper porta",
-                "url": "",
-              },
-              Object {
-                "hasMegapanel": false,
-                "hasMenu": false,
-                "menuSections": Array [],
-                "title": "Sed cursus ante dapibus diam",
-                "titleEnglish": "Sed cursus ante dapibus diam",
-                "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
-              },
-            ],
-          },
+                      "title": "Analytics",
+                      "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                    },
+                  ],
+                },
+              ],
+              "title": "Fusce nec tellus sed augue semper porta",
+              "titleEnglish": "Fusce nec tellus sed augue semper porta",
+              "url": "",
+            },
+            Object {
+              "hasMegapanel": false,
+              "hasMenu": false,
+              "menuSections": Array [],
+              "title": "Sed cursus ante dapibus diam",
+              "titleEnglish": "Sed cursus ante dapibus diam",
+              "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
+            },
+          ],
           "placeHolderText": "Search all of IBM",
-          "platform": Object {
-            "name": "Stock Charts",
-            "url": "https://www.example.com",
-          },
+          "platform": null,
           "selectedMenuItem": "Lorem ipsum dolor sit amet",
         },
       },
@@ -127004,7 +127034,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
     <Default
       parameters={
         Object {
-          "__id": "components-masthead--with-l-1",
+          "__id": "components-masthead--with-custom-navigation",
           "component": undefined,
           "docs": Object {},
           "fileName": "./components/Masthead/__stories__/Masthead.stories.js",
@@ -127042,326 +127072,322 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
           },
           "props": Object {
             "Masthead": Object {
+              "customProfileLogin": null,
               "hasProfile": true,
               "hasSearch": true,
-              "mastheadL1Data": Object {
-                "navigationL1": Array [
-                  Object {
-                    "hasMegapanel": false,
-                    "hasMenu": true,
-                    "menuSections": Array [
-                      Object {
-                        "heading": "Explore",
-                        "menuItems": Array [
-                          Object {
-                            "megapanelContent": Object {
-                              "description": "",
-                              "feature": Object {
-                                "heading": "",
-                                "imageUrl": "",
-                                "linkTitle": "",
-                                "linkUrl": "",
-                              },
-                              "headingTitle": "",
-                              "headingUrl": "",
-                              "quickLinks": Object {
-                                "links": Array [
-                                  Object {
-                                    "title": "Subnav 1",
-                                    "url": "",
-                                  },
-                                  Object {
-                                    "title": "Subnav 2",
-                                    "url": "",
-                                  },
-                                  Object {
-                                    "title": "Subnav 3",
-                                    "url": "",
-                                  },
-                                  Object {
-                                    "title": "Subnav 4",
-                                    "url": "",
-                                  },
-                                ],
-                                "title": "Title",
-                              },
+              "navigation": Array [
+                Object {
+                  "hasMegapanel": false,
+                  "hasMenu": true,
+                  "menuSections": Array [
+                    Object {
+                      "heading": "Explore",
+                      "menuItems": Array [
+                        Object {
+                          "megapanelContent": Object {
+                            "description": "",
+                            "feature": Object {
+                              "heading": "",
+                              "imageUrl": "",
+                              "linkTitle": "",
+                              "linkUrl": "",
+                            },
+                            "headingTitle": "",
+                            "headingUrl": "",
+                            "quickLinks": Object {
+                              "links": Array [
+                                Object {
+                                  "title": "Subnav 1",
+                                  "url": "",
+                                },
+                                Object {
+                                  "title": "Subnav 2",
+                                  "url": "",
+                                },
+                                Object {
+                                  "title": "Subnav 3",
+                                  "url": "",
+                                },
+                                Object {
+                                  "title": "Subnav 4",
+                                  "url": "",
+                                },
+                              ],
+                              "title": "Title",
                             },
-                            "title": "Link 1",
-                            "url": "",
-                          },
-                          Object {
-                            "title": "Menu dropdown item with extra long text",
-                            "url": "",
                           },
-                        ],
-                      },
-                    ],
-                    "title": "Lorem ipsum dolor sit amet",
-                    "titleEnglish": "Lorem ipsum dolor sit amet",
-                    "url": "",
-                  },
-                  Object {
-                    "hasMenu": true,
-                    "menuSections": Array [
-                      Object {
-                        "heading": "",
-                        "menuItems": Array [
-                          Object {
-                            "megapanelContent": Object {
-                              "description": "Reimagine your business, designing and building the platforms necessary for growth",
-                              "feature": Object {
-                                "heading": "IBM Services, your Digital Reinvention â„¢ partner",
-                                "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
-                                "linkTitle": "Explore all our business consulting and technology services",
-                                "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                              },
-                              "headingTitle": "Services",
-                              "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                              "quickLinks": Object {
-                                "links": Array [
-                                  Object {
-                                    "title": "Subnav 1",
-                                    "url": "",
-                                  },
-                                  Object {
-                                    "title": "Subnav 2",
-                                    "url": "",
-                                  },
-                                  Object {
-                                    "title": "Subnav 3",
-                                    "url": "",
-                                  },
-                                  Object {
-                                    "title": "Subnav 4",
-                                    "url": "",
-                                  },
-                                ],
-                                "title": "Quicklinks",
-                              },
+                          "title": "Link 1",
+                          "url": "",
+                        },
+                        Object {
+                          "title": "Menu dropdown item with extra long text",
+                          "url": "",
+                        },
+                      ],
+                    },
+                  ],
+                  "title": "Lorem ipsum dolor sit amet",
+                  "titleEnglish": "Lorem ipsum dolor sit amet",
+                  "url": "",
+                },
+                Object {
+                  "hasMenu": true,
+                  "menuSections": Array [
+                    Object {
+                      "heading": "",
+                      "menuItems": Array [
+                        Object {
+                          "megapanelContent": Object {
+                            "description": "Reimagine your business, designing and building the platforms necessary for growth",
+                            "feature": Object {
+                              "heading": "IBM Services, your Digital Reinvention â„¢ partner",
+                              "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
+                              "linkTitle": "Explore all our business consulting and technology services",
+                              "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
+                            },
+                            "headingTitle": "Services",
+                            "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
+                            "quickLinks": Object {
+                              "links": Array [
+                                Object {
+                                  "title": "Subnav 1",
+                                  "url": "",
+                                },
+                                Object {
+                                  "title": "Subnav 2",
+                                  "url": "",
+                                },
+                                Object {
+                                  "title": "Subnav 3",
+                                  "url": "",
+                                },
+                                Object {
+                                  "title": "Subnav 4",
+                                  "url": "",
+                                },
+                              ],
+                              "title": "Quicklinks",
                             },
-                            "title": "Link 2",
-                            "url": "",
                           },
-                          Object {
-                            "megapanelContent": Object {
-                              "description": "Funding options that fit your business",
-                              "feature": Object {
-                                "heading": "Cloud financing strategies that work for your business",
-                                "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
-                                "linkTitle": "Committed to cloud? Make the most of your cash flow.",
-                                "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
-                              },
-                              "headingTitle": "Financing",
-                              "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                              "quickLinks": Object {
-                                "links": Array [
-                                  Object {
-                                    "title": "Subnav 1",
-                                    "url": "",
-                                  },
-                                  Object {
-                                    "title": "Subnav 2",
-                                    "url": "",
-                                  },
-                                  Object {
-                                    "title": "Subnav 3",
-                                    "url": "",
-                                  },
-                                  Object {
-                                    "title": "Subnav 4",
-                                    "url": "",
-                                  },
-                                ],
-                                "title": "Quicklinks",
-                              },
+                          "title": "Link 2",
+                          "url": "",
+                        },
+                        Object {
+                          "megapanelContent": Object {
+                            "description": "Funding options that fit your business",
+                            "feature": Object {
+                              "heading": "Cloud financing strategies that work for your business",
+                              "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
+                              "linkTitle": "Committed to cloud? Make the most of your cash flow.",
+                              "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
+                            },
+                            "headingTitle": "Financing",
+                            "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
+                            "quickLinks": Object {
+                              "links": Array [
+                                Object {
+                                  "title": "Subnav 1",
+                                  "url": "",
+                                },
+                                Object {
+                                  "title": "Subnav 2",
+                                  "url": "",
+                                },
+                                Object {
+                                  "title": "Subnav 3",
+                                  "url": "",
+                                },
+                                Object {
+                                  "title": "Subnav 4",
+                                  "url": "",
+                                },
+                              ],
+                              "title": "Quicklinks",
                             },
-                            "title": "Financing",
-                            "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
                           },
-                        ],
-                      },
-                    ],
-                    "title": "Consectetur adipiscing elit",
-                    "titleEnglish": "Consectetur adipiscing elit",
-                    "url": "",
-                  },
-                  Object {
-                    "hasMegapanel": false,
-                    "hasMenu": false,
-                    "menuSections": Array [],
-                    "title": "Nulla quis sem at nibh elementum imperdiet",
-                    "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
-                    "url": "https://www.ibm.com/industries?lnk=min",
-                  },
-                  Object {
-                    "hasMegapanel": false,
-                    "hasMenu": true,
-                    "menuSections": Array [
-                      Object {
-                        "heading": "",
-                        "menuItems": Array [
-                          Object {
-                            "megapanelContent": Object {
-                              "description": "",
-                              "feature": Object {
-                                "heading": "IBM Developer newsletters",
-                                "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
-                                "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
-                                "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              "headingTitle": "IBM Developer",
-                              "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                              "quickLinks": Object {
-                                "links": Array [
-                                  Object {
-                                    "title": "Subnav 1",
-                                    "url": "",
-                                  },
-                                  Object {
-                                    "title": "Subnav 2",
-                                    "url": "",
-                                  },
-                                  Object {
-                                    "title": "Subnav 3",
-                                    "url": "",
-                                  },
-                                  Object {
-                                    "title": "Subnav 4",
-                                    "url": "",
-                                  },
-                                ],
-                                "title": "Quicklinks",
-                              },
+                          "title": "Financing",
+                          "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
+                        },
+                      ],
+                    },
+                  ],
+                  "title": "Consectetur adipiscing elit",
+                  "titleEnglish": "Consectetur adipiscing elit",
+                  "url": "",
+                },
+                Object {
+                  "hasMegapanel": false,
+                  "hasMenu": false,
+                  "menuSections": Array [],
+                  "title": "Nulla quis sem at nibh elementum imperdiet",
+                  "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
+                  "url": "https://www.ibm.com/industries?lnk=min",
+                },
+                Object {
+                  "hasMegapanel": false,
+                  "hasMenu": true,
+                  "menuSections": Array [
+                    Object {
+                      "heading": "",
+                      "menuItems": Array [
+                        Object {
+                          "megapanelContent": Object {
+                            "description": "",
+                            "feature": Object {
+                              "heading": "IBM Developer newsletters",
+                              "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
+                              "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
+                              "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
+                            },
+                            "headingTitle": "IBM Developer",
+                            "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
+                            "quickLinks": Object {
+                              "links": Array [
+                                Object {
+                                  "title": "Subnav 1",
+                                  "url": "",
+                                },
+                                Object {
+                                  "title": "Subnav 2",
+                                  "url": "",
+                                },
+                                Object {
+                                  "title": "Subnav 3",
+                                  "url": "",
+                                },
+                                Object {
+                                  "title": "Subnav 4",
+                                  "url": "",
+                                },
+                              ],
+                              "title": "Quicklinks",
                             },
-                            "title": "IBM Developer",
-                            "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
                           },
-                          Object {
-                            "megapanelContent": Object {
-                              "description": "",
-                              "feature": Object {
-                                "heading": "Blockchain 101",
-                                "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
-                                "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
-                                "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              "headingTitle": "Blockchain",
-                              "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                              "quickLinks": Object {
-                                "links": Array [
-                                  Object {
-                                    "title": "Subnav 1",
-                                    "url": "",
-                                  },
-                                  Object {
-                                    "title": "Subnav 2",
-                                    "url": "",
-                                  },
-                                  Object {
-                                    "title": "Subnav 3",
-                                    "url": "",
-                                  },
-                                  Object {
-                                    "title": "Subnav 4",
-                                    "url": "",
-                                  },
-                                ],
-                                "title": "Quicklinks",
-                              },
+                          "title": "IBM Developer",
+                          "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
+                        },
+                        Object {
+                          "megapanelContent": Object {
+                            "description": "",
+                            "feature": Object {
+                              "heading": "Blockchain 101",
+                              "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
+                              "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
+                              "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
+                            },
+                            "headingTitle": "Blockchain",
+                            "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
+                            "quickLinks": Object {
+                              "links": Array [
+                                Object {
+                                  "title": "Subnav 1",
+                                  "url": "",
+                                },
+                                Object {
+                                  "title": "Subnav 2",
+                                  "url": "",
+                                },
+                                Object {
+                                  "title": "Subnav 3",
+                                  "url": "",
+                                },
+                                Object {
+                                  "title": "Subnav 4",
+                                  "url": "",
+                                },
+                              ],
+                              "title": "Quicklinks",
                             },
-                            "title": "Blockchain",
-                            "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
                           },
-                          Object {
-                            "megapanelContent": Object {
-                              "description": "",
-                              "feature": Object {
-                                "heading": "Make sense of Kubernetes",
-                                "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
-                                "linkTitle": "Deploy a simple Python application with Kubernetes",
-                                "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              "headingTitle": "Containers",
-                              "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                              "quickLinks": Object {
-                                "links": Array [
-                                  Object {
-                                    "title": "Code patterns",
-                                    "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  Object {
-                                    "title": "Tutorials",
-                                    "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  Object {
-                                    "title": "Events",
-                                    "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                ],
-                                "title": "Quicklinks",
-                              },
+                          "title": "Blockchain",
+                          "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
+                        },
+                        Object {
+                          "megapanelContent": Object {
+                            "description": "",
+                            "feature": Object {
+                              "heading": "Make sense of Kubernetes",
+                              "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
+                              "linkTitle": "Deploy a simple Python application with Kubernetes",
+                              "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
+                            },
+                            "headingTitle": "Containers",
+                            "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
+                            "quickLinks": Object {
+                              "links": Array [
+                                Object {
+                                  "title": "Code patterns",
+                                  "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                                },
+                                Object {
+                                  "title": "Tutorials",
+                                  "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                                },
+                                Object {
+                                  "title": "Events",
+                                  "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                                },
+                              ],
+                              "title": "Quicklinks",
                             },
-                            "title": "Containers",
-                            "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
                           },
-                          Object {
-                            "megapanelContent": Object {
-                              "description": "",
-                              "feature": Object {
-                                "heading": "Train your data no matter where it lives",
-                                "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
-                                "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
-                                "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              "headingTitle": "Analytics",
-                              "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                              "quickLinks": Object {
-                                "links": Array [
-                                  Object {
-                                    "title": "Code patterns",
-                                    "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  Object {
-                                    "title": "Tutorials",
-                                    "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  Object {
-                                    "title": "Events",
-                                    "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  Object {
-                                    "title": "Developer community",
-                                    "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                ],
-                                "title": "Quicklinks",
-                              },
+                          "title": "Containers",
+                          "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
+                        },
+                        Object {
+                          "megapanelContent": Object {
+                            "description": "",
+                            "feature": Object {
+                              "heading": "Train your data no matter where it lives",
+                              "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
+                              "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
+                              "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
+                            },
+                            "headingTitle": "Analytics",
+                            "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                            "quickLinks": Object {
+                              "links": Array [
+                                Object {
+                                  "title": "Code patterns",
+                                  "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                                },
+                                Object {
+                                  "title": "Tutorials",
+                                  "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                                },
+                                Object {
+                                  "title": "Events",
+                                  "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                                },
+                                Object {
+                                  "title": "Developer community",
+                                  "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
+                                },
+                              ],
+                              "title": "Quicklinks",
                             },
-                            "title": "Analytics",
-                            "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
                           },
-                        ],
-                      },
-                    ],
-                    "title": "Fusce nec tellus sed augue semper porta",
-                    "titleEnglish": "Fusce nec tellus sed augue semper porta",
-                    "url": "",
-                  },
-                  Object {
-                    "hasMegapanel": false,
-                    "hasMenu": false,
-                    "menuSections": Array [],
-                    "title": "Sed cursus ante dapibus diam",
-                    "titleEnglish": "Sed cursus ante dapibus diam",
-                    "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
-                  },
-                ],
-              },
+                          "title": "Analytics",
+                          "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                        },
+                      ],
+                    },
+                  ],
+                  "title": "Fusce nec tellus sed augue semper porta",
+                  "titleEnglish": "Fusce nec tellus sed augue semper porta",
+                  "url": "",
+                },
+                Object {
+                  "hasMegapanel": false,
+                  "hasMenu": false,
+                  "menuSections": Array [],
+                  "title": "Sed cursus ante dapibus diam",
+                  "titleEnglish": "Sed cursus ante dapibus diam",
+                  "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
+                },
+              ],
               "placeHolderText": "Search all of IBM",
-              "platform": Object {
-                "name": "Stock Charts",
-                "url": "https://www.example.com",
-              },
+              "platform": null,
               "selectedMenuItem": "Lorem ipsum dolor sit amet",
             },
           },
@@ -127370,331 +127396,326 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
       }
     >
       <Masthead
+        customProfileLogin={null}
         hasProfile={true}
         hasSearch={true}
         initialSearchTerm=""
-        mastheadL1Data={
-          Object {
-            "navigationL1": Array [
-              Object {
-                "hasMegapanel": false,
-                "hasMenu": true,
-                "menuSections": Array [
-                  Object {
-                    "heading": "Explore",
-                    "menuItems": Array [
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "",
-                            "imageUrl": "",
-                            "linkTitle": "",
-                            "linkUrl": "",
-                          },
-                          "headingTitle": "",
-                          "headingUrl": "",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Title",
-                          },
+        mastheadL1Data={null}
+        navigation={
+          Array [
+            Object {
+              "hasMegapanel": false,
+              "hasMenu": true,
+              "menuSections": Array [
+                Object {
+                  "heading": "Explore",
+                  "menuItems": Array [
+                    Object {
+                      "megapanelContent": Object {
+                        "description": "",
+                        "feature": Object {
+                          "heading": "",
+                          "imageUrl": "",
+                          "linkTitle": "",
+                          "linkUrl": "",
+                        },
+                        "headingTitle": "",
+                        "headingUrl": "",
+                        "quickLinks": Object {
+                          "links": Array [
+                            Object {
+                              "title": "Subnav 1",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 2",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 3",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 4",
+                              "url": "",
+                            },
+                          ],
+                          "title": "Title",
                         },
-                        "title": "Link 1",
-                        "url": "",
-                      },
-                      Object {
-                        "title": "Menu dropdown item with extra long text",
-                        "url": "",
                       },
-                    ],
-                  },
-                ],
-                "title": "Lorem ipsum dolor sit amet",
-                "titleEnglish": "Lorem ipsum dolor sit amet",
-                "url": "",
-              },
-              Object {
-                "hasMenu": true,
-                "menuSections": Array [
-                  Object {
-                    "heading": "",
-                    "menuItems": Array [
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "Reimagine your business, designing and building the platforms necessary for growth",
-                          "feature": Object {
-                            "heading": "IBM Services, your Digital Reinvention â„¢ partner",
-                            "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
-                            "linkTitle": "Explore all our business consulting and technology services",
-                            "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                          },
-                          "headingTitle": "Services",
-                          "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
+                      "title": "Link 1",
+                      "url": "",
+                    },
+                    Object {
+                      "title": "Menu dropdown item with extra long text",
+                      "url": "",
+                    },
+                  ],
+                },
+              ],
+              "title": "Lorem ipsum dolor sit amet",
+              "titleEnglish": "Lorem ipsum dolor sit amet",
+              "url": "",
+            },
+            Object {
+              "hasMenu": true,
+              "menuSections": Array [
+                Object {
+                  "heading": "",
+                  "menuItems": Array [
+                    Object {
+                      "megapanelContent": Object {
+                        "description": "Reimagine your business, designing and building the platforms necessary for growth",
+                        "feature": Object {
+                          "heading": "IBM Services, your Digital Reinvention â„¢ partner",
+                          "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
+                          "linkTitle": "Explore all our business consulting and technology services",
+                          "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
+                        },
+                        "headingTitle": "Services",
+                        "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
+                        "quickLinks": Object {
+                          "links": Array [
+                            Object {
+                              "title": "Subnav 1",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 2",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 3",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 4",
+                              "url": "",
+                            },
+                          ],
+                          "title": "Quicklinks",
                         },
-                        "title": "Link 2",
-                        "url": "",
                       },
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "Funding options that fit your business",
-                          "feature": Object {
-                            "heading": "Cloud financing strategies that work for your business",
-                            "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
-                            "linkTitle": "Committed to cloud? Make the most of your cash flow.",
-                            "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
-                          },
-                          "headingTitle": "Financing",
-                          "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
+                      "title": "Link 2",
+                      "url": "",
+                    },
+                    Object {
+                      "megapanelContent": Object {
+                        "description": "Funding options that fit your business",
+                        "feature": Object {
+                          "heading": "Cloud financing strategies that work for your business",
+                          "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
+                          "linkTitle": "Committed to cloud? Make the most of your cash flow.",
+                          "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
+                        },
+                        "headingTitle": "Financing",
+                        "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
+                        "quickLinks": Object {
+                          "links": Array [
+                            Object {
+                              "title": "Subnav 1",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 2",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 3",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 4",
+                              "url": "",
+                            },
+                          ],
+                          "title": "Quicklinks",
                         },
-                        "title": "Financing",
-                        "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
                       },
-                    ],
-                  },
-                ],
-                "title": "Consectetur adipiscing elit",
-                "titleEnglish": "Consectetur adipiscing elit",
-                "url": "",
-              },
-              Object {
-                "hasMegapanel": false,
-                "hasMenu": false,
-                "menuSections": Array [],
-                "title": "Nulla quis sem at nibh elementum imperdiet",
-                "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
-                "url": "https://www.ibm.com/industries?lnk=min",
-              },
-              Object {
-                "hasMegapanel": false,
-                "hasMenu": true,
-                "menuSections": Array [
-                  Object {
-                    "heading": "",
-                    "menuItems": Array [
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "IBM Developer newsletters",
-                            "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
-                            "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
-                            "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          "headingTitle": "IBM Developer",
-                          "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
+                      "title": "Financing",
+                      "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
+                    },
+                  ],
+                },
+              ],
+              "title": "Consectetur adipiscing elit",
+              "titleEnglish": "Consectetur adipiscing elit",
+              "url": "",
+            },
+            Object {
+              "hasMegapanel": false,
+              "hasMenu": false,
+              "menuSections": Array [],
+              "title": "Nulla quis sem at nibh elementum imperdiet",
+              "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
+              "url": "https://www.ibm.com/industries?lnk=min",
+            },
+            Object {
+              "hasMegapanel": false,
+              "hasMenu": true,
+              "menuSections": Array [
+                Object {
+                  "heading": "",
+                  "menuItems": Array [
+                    Object {
+                      "megapanelContent": Object {
+                        "description": "",
+                        "feature": Object {
+                          "heading": "IBM Developer newsletters",
+                          "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
+                          "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
+                          "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
+                        },
+                        "headingTitle": "IBM Developer",
+                        "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
+                        "quickLinks": Object {
+                          "links": Array [
+                            Object {
+                              "title": "Subnav 1",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 2",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 3",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 4",
+                              "url": "",
+                            },
+                          ],
+                          "title": "Quicklinks",
                         },
-                        "title": "IBM Developer",
-                        "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
                       },
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "Blockchain 101",
-                            "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
-                            "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
-                            "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          "headingTitle": "Blockchain",
-                          "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
+                      "title": "IBM Developer",
+                      "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
+                    },
+                    Object {
+                      "megapanelContent": Object {
+                        "description": "",
+                        "feature": Object {
+                          "heading": "Blockchain 101",
+                          "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
+                          "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
+                          "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
+                        },
+                        "headingTitle": "Blockchain",
+                        "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
+                        "quickLinks": Object {
+                          "links": Array [
+                            Object {
+                              "title": "Subnav 1",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 2",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 3",
+                              "url": "",
+                            },
+                            Object {
+                              "title": "Subnav 4",
+                              "url": "",
+                            },
+                          ],
+                          "title": "Quicklinks",
                         },
-                        "title": "Blockchain",
-                        "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
                       },
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "Make sense of Kubernetes",
-                            "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
-                            "linkTitle": "Deploy a simple Python application with Kubernetes",
-                            "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          "headingTitle": "Containers",
-                          "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Code patterns",
-                                "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Tutorials",
-                                "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Events",
-                                "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
+                      "title": "Blockchain",
+                      "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
+                    },
+                    Object {
+                      "megapanelContent": Object {
+                        "description": "",
+                        "feature": Object {
+                          "heading": "Make sense of Kubernetes",
+                          "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
+                          "linkTitle": "Deploy a simple Python application with Kubernetes",
+                          "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
+                        },
+                        "headingTitle": "Containers",
+                        "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
+                        "quickLinks": Object {
+                          "links": Array [
+                            Object {
+                              "title": "Code patterns",
+                              "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                            },
+                            Object {
+                              "title": "Tutorials",
+                              "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                            },
+                            Object {
+                              "title": "Events",
+                              "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                            },
+                          ],
+                          "title": "Quicklinks",
                         },
-                        "title": "Containers",
-                        "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
                       },
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "Train your data no matter where it lives",
-                            "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
-                            "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
-                            "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          "headingTitle": "Analytics",
-                          "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Code patterns",
-                                "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Tutorials",
-                                "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Events",
-                                "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Developer community",
-                                "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
+                      "title": "Containers",
+                      "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
+                    },
+                    Object {
+                      "megapanelContent": Object {
+                        "description": "",
+                        "feature": Object {
+                          "heading": "Train your data no matter where it lives",
+                          "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
+                          "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
+                          "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
+                        },
+                        "headingTitle": "Analytics",
+                        "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                        "quickLinks": Object {
+                          "links": Array [
+                            Object {
+                              "title": "Code patterns",
+                              "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                            },
+                            Object {
+                              "title": "Tutorials",
+                              "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                            },
+                            Object {
+                              "title": "Events",
+                              "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                            },
+                            Object {
+                              "title": "Developer community",
+                              "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
+                            },
+                          ],
+                          "title": "Quicklinks",
                         },
-                        "title": "Analytics",
-                        "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
                       },
-                    ],
-                  },
-                ],
-                "title": "Fusce nec tellus sed augue semper porta",
-                "titleEnglish": "Fusce nec tellus sed augue semper porta",
-                "url": "",
-              },
-              Object {
-                "hasMegapanel": false,
-                "hasMenu": false,
-                "menuSections": Array [],
-                "title": "Sed cursus ante dapibus diam",
-                "titleEnglish": "Sed cursus ante dapibus diam",
-                "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
-              },
-            ],
-          }
+                      "title": "Analytics",
+                      "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                    },
+                  ],
+                },
+              ],
+              "title": "Fusce nec tellus sed augue semper porta",
+              "titleEnglish": "Fusce nec tellus sed augue semper porta",
+              "url": "",
+            },
+            Object {
+              "hasMegapanel": false,
+              "hasMenu": false,
+              "menuSections": Array [],
+              "title": "Sed cursus ante dapibus diam",
+              "titleEnglish": "Sed cursus ante dapibus diam",
+              "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
+            },
+          ]
         }
         placeHolderText="Search all of IBM"
-        platform={
-          Object {
-            "name": "Stock Charts",
-            "url": "https://www.example.com",
-          }
-        }
+        platform={null}
         searchOpenOnload={false}
         selectedMenuItem="Lorem ipsum dolor sit amet"
       >
@@ -127735,15 +127756,15 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                     </SkipToContent>
                     <HeaderMenuButton
                       aria-label="Open menu"
-                      className="bx--masthead__platform"
-                      data-autoid="dds--masthead-eco-sidenav__l0-menu"
+                      className=""
+                      data-autoid="dds--masthead-default-sidenav__l0-menu"
                       isActive={false}
                       onClick={[Function]}
                     >
                       <button
                         aria-label="Open menu"
-                        className="bx--masthead__platform bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                        data-autoid="dds--masthead-eco-sidenav__l0-menu"
+                        className="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
+                        data-autoid="dds--masthead-default-sidenav__l0-menu"
                         onClick={[Function]}
                         title="Open menu"
                         type="button"
@@ -127777,9 +127798,10 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                     </HeaderMenuButton>
                     <MastheadLeftNav
                       backButtonText="Back"
-                      hasL1Data={true}
+                      customProfileLogin={null}
+                      hasL1Data={false}
                       isSideNavExpanded={false}
-                      navType="eco"
+                      navType="default"
                       navigation={
                         Array [
                           Object {
@@ -128093,12 +128115,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                           },
                         ]
                       }
-                      platform={
-                        Object {
-                          "name": "Stock Charts",
-                          "url": "https://www.example.com",
-                        }
-                      }
+                      platform={null}
                       selectedMenuItem="Lorem ipsum dolor sit amet"
                     >
                       <ForwardRef(SideNav)
@@ -128122,16 +128139,8 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                           onFocus={[Function]}
                         >
                           <nav
-                            data-autoid="dds--masthead-eco-sidenav__l0"
+                            data-autoid="dds--masthead-default-sidenav__l0"
                           >
-                            <a
-                              aria-haspopup="true"
-                              className="bx--side-nav__submenu bx--side-nav__submenu-platform"
-                              data-autoid="dds--masthead-eco-sidenav__l0-productname"
-                              href="https://www.example.com"
-                            >
-                              Stock Charts
-                            </a>
                             <SideNavItems>
                               <ul
                                 className="bx--side-nav__items"
@@ -128148,8 +128157,8 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                         focusNode={
                                           <button
                                             aria-label="Open menu"
-                                            class="bx--masthead__platform bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                                            data-autoid="dds--masthead-eco-sidenav__l0-menu"
+                                            class="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
+                                            data-autoid="dds--masthead-default-sidenav__l0-menu"
                                             title="Open menu"
                                             type="button"
                                           >
@@ -128179,7 +128188,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                           id="panel__(-1,-1)"
                                         >
                                           <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav0"
+                                            autoid="dds--masthead-default-sidenav__l0-nav0"
                                             dataTitle="lorem-ipsum-dolor-sit-amet"
                                             isSideNavExpanded={false}
                                             onToggle={[Function]}
@@ -128187,7 +128196,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             title="Lorem ipsum dolor sit amet"
                                           >
                                             <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav0"
+                                              autoid="dds--masthead-default-sidenav__l0-nav0"
                                               buttonRef={null}
                                               dataTitle="lorem-ipsum-dolor-sit-amet"
                                               defaultExpanded={false}
@@ -128215,7 +128224,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                                   >
                                                     <span
                                                       className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav0"
+                                                      data-autoid="dds--masthead-default-sidenav__l0-nav0"
                                                     >
                                                       Lorem ipsum dolor sit amet
                                                     </span>
@@ -128259,7 +128268,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </SideNavMenu>
                                           </ForwardRef>
                                           <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav1"
+                                            autoid="dds--masthead-default-sidenav__l0-nav1"
                                             dataTitle="consectetur-adipiscing-elit"
                                             isSideNavExpanded={false}
                                             onToggle={[Function]}
@@ -128267,7 +128276,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             title="Consectetur adipiscing elit"
                                           >
                                             <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav1"
+                                              autoid="dds--masthead-default-sidenav__l0-nav1"
                                               buttonRef={null}
                                               dataTitle="consectetur-adipiscing-elit"
                                               defaultExpanded={false}
@@ -128295,7 +128304,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                                   >
                                                     <span
                                                       className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav1"
+                                                      data-autoid="dds--masthead-default-sidenav__l0-nav1"
                                                     >
                                                       Consectetur adipiscing elit
                                                     </span>
@@ -128340,7 +128349,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                           </ForwardRef>
                                           <ForwardRef(SideNavMenuItem)
                                             className={false}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav2"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav2"
                                             href="https://www.ibm.com/industries?lnk=min"
                                             key="Nulla quis sem at nibh elementum imperdiet"
                                           >
@@ -128349,13 +128358,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav2"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav2"
                                                 element="a"
                                                 href="https://www.ibm.com/industries?lnk=min"
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav2"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav2"
                                                   href="https://www.ibm.com/industries?lnk=min"
                                                 >
                                                   <SideNavLinkText>
@@ -128370,7 +128379,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav3"
+                                            autoid="dds--masthead-default-sidenav__l0-nav3"
                                             dataTitle="fusce-nec-tellus-sed-augue-semper-porta"
                                             isSideNavExpanded={false}
                                             onToggle={[Function]}
@@ -128378,7 +128387,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             title="Fusce nec tellus sed augue semper porta"
                                           >
                                             <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav3"
+                                              autoid="dds--masthead-default-sidenav__l0-nav3"
                                               buttonRef={null}
                                               dataTitle="fusce-nec-tellus-sed-augue-semper-porta"
                                               defaultExpanded={false}
@@ -128406,7 +128415,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                                   >
                                                     <span
                                                       className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav3"
+                                                      data-autoid="dds--masthead-default-sidenav__l0-nav3"
                                                     >
                                                       Fusce nec tellus sed augue semper porta
                                                     </span>
@@ -128451,7 +128460,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                           </ForwardRef>
                                           <ForwardRef(SideNavMenuItem)
                                             className={false}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav4"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav4"
                                             href="https://www.ibm.com/support/home/?lnk=msu_usen"
                                             key="Sed cursus ante dapibus diam"
                                           >
@@ -128460,13 +128469,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav4"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav4"
                                                 element="a"
                                                 href="https://www.ibm.com/support/home/?lnk=msu_usen"
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav4"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav4"
                                                   href="https://www.ibm.com/support/home/?lnk=msu_usen"
                                                 >
                                                   <SideNavLinkText>
@@ -128493,7 +128502,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                         heading="Explore"
                                         id="panel__(0,-1)"
                                         isSubmenu={true}
-                                        navType="eco"
+                                        navType="default"
                                         onBackClick={[Function]}
                                         show={false}
                                         title="Lorem ipsum dolor sit amet"
@@ -128510,7 +128519,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                           />
                                           <ForwardRef(SideNavMenuBackButton)
                                             backButtonText="Back"
-                                            navType="eco"
+                                            navType="default"
                                             onBackClick={[Function]}
                                           >
                                             <li
@@ -128518,7 +128527,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <button
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
+                                                data-autoid="dds--masthead-default-sidenav__l0-back"
                                                 isbackbutton="true"
                                                 onClick={[Function]}
                                                 onKeyPress={[Function]}
@@ -128567,14 +128576,14 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             Explore
                                           </p>
                                           <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav0-list0"
+                                            autoid="dds--masthead-default-sidenav__l0-nav0-list0"
                                             className={false}
                                             isSideNavExpanded={false}
                                             onToggle={[Function]}
                                             title="Link 1"
                                           >
                                             <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav0-list0"
+                                              autoid="dds--masthead-default-sidenav__l0-nav0-list0"
                                               buttonRef={null}
                                               className={false}
                                               defaultExpanded={false}
@@ -128600,7 +128609,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                                   >
                                                     <span
                                                       className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0"
+                                                      data-autoid="dds--masthead-default-sidenav__l0-nav0-list0"
                                                     >
                                                       Link 1
                                                     </span>
@@ -128645,7 +128654,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                           </ForwardRef>
                                           <ForwardRef(SideNavMenuItem)
                                             className={false}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav0-list1"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav0-list1"
                                             href=""
                                             key="Menu dropdown item with extra long text"
                                           >
@@ -128654,13 +128663,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav0-list1"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav0-list1"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav0-list1"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav0-list1"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -128687,7 +128696,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                         heading=""
                                         id="panel__(1,-1)"
                                         isSubmenu={true}
-                                        navType="eco"
+                                        navType="default"
                                         onBackClick={[Function]}
                                         show={false}
                                         title="Consectetur adipiscing elit"
@@ -128704,7 +128713,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                           />
                                           <ForwardRef(SideNavMenuBackButton)
                                             backButtonText="Back"
-                                            navType="eco"
+                                            navType="default"
                                             onBackClick={[Function]}
                                           >
                                             <li
@@ -128712,7 +128721,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <button
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
+                                                data-autoid="dds--masthead-default-sidenav__l0-back"
                                                 isbackbutton="true"
                                                 onClick={[Function]}
                                                 onKeyPress={[Function]}
@@ -128756,14 +128765,14 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             Consectetur adipiscing elit
                                           </li>
                                           <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav1-list0"
+                                            autoid="dds--masthead-default-sidenav__l0-nav1-list0"
                                             className={false}
                                             isSideNavExpanded={false}
                                             onToggle={[Function]}
                                             title="Link 2"
                                           >
                                             <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav1-list0"
+                                              autoid="dds--masthead-default-sidenav__l0-nav1-list0"
                                               buttonRef={null}
                                               className={false}
                                               defaultExpanded={false}
@@ -128789,7 +128798,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                                   >
                                                     <span
                                                       className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0"
+                                                      data-autoid="dds--masthead-default-sidenav__l0-nav1-list0"
                                                     >
                                                       Link 2
                                                     </span>
@@ -128833,14 +128842,14 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </SideNavMenu>
                                           </ForwardRef>
                                           <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav1-list1"
+                                            autoid="dds--masthead-default-sidenav__l0-nav1-list1"
                                             className={false}
                                             isSideNavExpanded={false}
                                             onToggle={[Function]}
                                             title="Financing"
                                           >
                                             <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav1-list1"
+                                              autoid="dds--masthead-default-sidenav__l0-nav1-list1"
                                               buttonRef={null}
                                               className={false}
                                               defaultExpanded={false}
@@ -128866,7 +128875,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                                   >
                                                     <span
                                                       className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1"
+                                                      data-autoid="dds--masthead-default-sidenav__l0-nav1-list1"
                                                     >
                                                       Financing
                                                     </span>
@@ -128922,7 +128931,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                         heading=""
                                         id="panel__(3,-1)"
                                         isSubmenu={true}
-                                        navType="eco"
+                                        navType="default"
                                         onBackClick={[Function]}
                                         show={false}
                                         title="Fusce nec tellus sed augue semper porta"
@@ -128939,7 +128948,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                           />
                                           <ForwardRef(SideNavMenuBackButton)
                                             backButtonText="Back"
-                                            navType="eco"
+                                            navType="default"
                                             onBackClick={[Function]}
                                           >
                                             <li
@@ -128947,7 +128956,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <button
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
+                                                data-autoid="dds--masthead-default-sidenav__l0-back"
                                                 isbackbutton="true"
                                                 onClick={[Function]}
                                                 onKeyPress={[Function]}
@@ -128991,14 +129000,14 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             Fusce nec tellus sed augue semper porta
                                           </li>
                                           <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav3-list0"
+                                            autoid="dds--masthead-default-sidenav__l0-nav3-list0"
                                             className={false}
                                             isSideNavExpanded={false}
                                             onToggle={[Function]}
                                             title="IBM Developer"
                                           >
                                             <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav3-list0"
+                                              autoid="dds--masthead-default-sidenav__l0-nav3-list0"
                                               buttonRef={null}
                                               className={false}
                                               defaultExpanded={false}
@@ -129024,7 +129033,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                                   >
                                                     <span
                                                       className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0"
+                                                      data-autoid="dds--masthead-default-sidenav__l0-nav3-list0"
                                                     >
                                                       IBM Developer
                                                     </span>
@@ -129068,14 +129077,14 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </SideNavMenu>
                                           </ForwardRef>
                                           <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav3-list1"
+                                            autoid="dds--masthead-default-sidenav__l0-nav3-list1"
                                             className={false}
                                             isSideNavExpanded={false}
                                             onToggle={[Function]}
                                             title="Blockchain"
                                           >
                                             <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav3-list1"
+                                              autoid="dds--masthead-default-sidenav__l0-nav3-list1"
                                               buttonRef={null}
                                               className={false}
                                               defaultExpanded={false}
@@ -129101,7 +129110,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                                   >
                                                     <span
                                                       className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1"
+                                                      data-autoid="dds--masthead-default-sidenav__l0-nav3-list1"
                                                     >
                                                       Blockchain
                                                     </span>
@@ -129145,14 +129154,14 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </SideNavMenu>
                                           </ForwardRef>
                                           <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav3-list2"
+                                            autoid="dds--masthead-default-sidenav__l0-nav3-list2"
                                             className={false}
                                             isSideNavExpanded={false}
                                             onToggle={[Function]}
                                             title="Containers"
                                           >
                                             <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav3-list2"
+                                              autoid="dds--masthead-default-sidenav__l0-nav3-list2"
                                               buttonRef={null}
                                               className={false}
                                               defaultExpanded={false}
@@ -129178,7 +129187,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                                   >
                                                     <span
                                                       className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2"
+                                                      data-autoid="dds--masthead-default-sidenav__l0-nav3-list2"
                                                     >
                                                       Containers
                                                     </span>
@@ -129222,14 +129231,14 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </SideNavMenu>
                                           </ForwardRef>
                                           <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav3-list3"
+                                            autoid="dds--masthead-default-sidenav__l0-nav3-list3"
                                             className={false}
                                             isSideNavExpanded={false}
                                             onToggle={[Function]}
                                             title="Analytics"
                                           >
                                             <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav3-list3"
+                                              autoid="dds--masthead-default-sidenav__l0-nav3-list3"
                                               buttonRef={null}
                                               className={false}
                                               defaultExpanded={false}
@@ -129255,7 +129264,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                                   >
                                                     <span
                                                       className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3"
+                                                      data-autoid="dds--masthead-default-sidenav__l0-nav3-list3"
                                                     >
                                                       Analytics
                                                     </span>
@@ -129310,7 +129319,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                         className="bx--side-nav__menu-section-submenu"
                                         id="panel__(0,0)"
                                         isSubmenu={true}
-                                        navType="eco"
+                                        navType="default"
                                         onBackClick={[Function]}
                                         show={false}
                                         title="Link 1"
@@ -129328,7 +129337,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                           />
                                           <ForwardRef(SideNavMenuBackButton)
                                             backButtonText="Back"
-                                            navType="eco"
+                                            navType="default"
                                             onBackClick={[Function]}
                                           >
                                             <li
@@ -129336,7 +129345,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <button
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
+                                                data-autoid="dds--masthead-default-sidenav__l0-back"
                                                 isbackbutton="true"
                                                 onClick={[Function]}
                                                 onKeyPress={[Function]}
@@ -129380,7 +129389,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             Link 1
                                           </li>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item0"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item0"
                                             href=""
                                             key="Subnav 1"
                                           >
@@ -129389,13 +129398,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item0"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item0"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item0"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item0"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -129410,7 +129419,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item1"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item1"
                                             href=""
                                             key="Subnav 2"
                                           >
@@ -129419,13 +129428,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item1"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item1"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item1"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item1"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -129440,7 +129449,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item2"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item2"
                                             href=""
                                             key="Subnav 3"
                                           >
@@ -129449,13 +129458,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item2"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item2"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item2"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item2"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -129470,7 +129479,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item3"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item3"
                                             href=""
                                             key="Subnav 4"
                                           >
@@ -129479,13 +129488,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item3"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item3"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item3"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item3"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -129511,7 +129520,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                         className="bx--side-nav__menu-section-submenu"
                                         id="panel__(0,1)"
                                         isSubmenu={true}
-                                        navType="eco"
+                                        navType="default"
                                         onBackClick={[Function]}
                                         show={false}
                                         title="Menu dropdown item with extra long text"
@@ -129529,7 +129538,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                           />
                                           <ForwardRef(SideNavMenuBackButton)
                                             backButtonText="Back"
-                                            navType="eco"
+                                            navType="default"
                                             onBackClick={[Function]}
                                           >
                                             <li
@@ -129537,7 +129546,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <button
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
+                                                data-autoid="dds--masthead-default-sidenav__l0-back"
                                                 isbackbutton="true"
                                                 onClick={[Function]}
                                                 onKeyPress={[Function]}
@@ -129592,7 +129601,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                         className="bx--side-nav__menu-section-submenu"
                                         id="panel__(1,0)"
                                         isSubmenu={true}
-                                        navType="eco"
+                                        navType="default"
                                         onBackClick={[Function]}
                                         show={false}
                                         title="Link 2"
@@ -129610,7 +129619,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                           />
                                           <ForwardRef(SideNavMenuBackButton)
                                             backButtonText="Back"
-                                            navType="eco"
+                                            navType="default"
                                             onBackClick={[Function]}
                                           >
                                             <li
@@ -129618,7 +129627,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <button
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
+                                                data-autoid="dds--masthead-default-sidenav__l0-back"
                                                 isbackbutton="true"
                                                 onClick={[Function]}
                                                 onKeyPress={[Function]}
@@ -129662,7 +129671,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             Link 2
                                           </li>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item0"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item0"
                                             href=""
                                             key="Subnav 1"
                                           >
@@ -129671,13 +129680,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item0"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item0"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item0"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item0"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -129692,7 +129701,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item1"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item1"
                                             href=""
                                             key="Subnav 2"
                                           >
@@ -129701,13 +129710,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item1"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item1"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item1"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item1"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -129722,7 +129731,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item2"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item2"
                                             href=""
                                             key="Subnav 3"
                                           >
@@ -129731,13 +129740,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item2"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item2"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item2"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item2"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -129752,7 +129761,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item3"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item3"
                                             href=""
                                             key="Subnav 4"
                                           >
@@ -129761,13 +129770,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item3"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item3"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item3"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item3"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -129793,7 +129802,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                         className="bx--side-nav__menu-section-submenu"
                                         id="panel__(1,1)"
                                         isSubmenu={true}
-                                        navType="eco"
+                                        navType="default"
                                         onBackClick={[Function]}
                                         show={false}
                                         title="Financing"
@@ -129811,7 +129820,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                           />
                                           <ForwardRef(SideNavMenuBackButton)
                                             backButtonText="Back"
-                                            navType="eco"
+                                            navType="default"
                                             onBackClick={[Function]}
                                           >
                                             <li
@@ -129819,7 +129828,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <button
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
+                                                data-autoid="dds--masthead-default-sidenav__l0-back"
                                                 isbackbutton="true"
                                                 onClick={[Function]}
                                                 onKeyPress={[Function]}
@@ -129920,7 +129929,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </SideNavItem>
                                           </ForwardRef(SideNavLink)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item0"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item0"
                                             href=""
                                             key="Subnav 1"
                                           >
@@ -129929,13 +129938,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item0"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item0"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item0"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item0"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -129950,7 +129959,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item1"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item1"
                                             href=""
                                             key="Subnav 2"
                                           >
@@ -129959,13 +129968,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item1"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item1"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item1"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item1"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -129980,7 +129989,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item2"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item2"
                                             href=""
                                             key="Subnav 3"
                                           >
@@ -129989,13 +129998,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item2"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item2"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item2"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item2"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -130010,7 +130019,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item3"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item3"
                                             href=""
                                             key="Subnav 4"
                                           >
@@ -130019,13 +130028,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item3"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item3"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item3"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item3"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -130051,7 +130060,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                         className="bx--side-nav__menu-section-submenu"
                                         id="panel__(3,0)"
                                         isSubmenu={true}
-                                        navType="eco"
+                                        navType="default"
                                         onBackClick={[Function]}
                                         show={false}
                                         title="IBM Developer"
@@ -130069,7 +130078,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                           />
                                           <ForwardRef(SideNavMenuBackButton)
                                             backButtonText="Back"
-                                            navType="eco"
+                                            navType="default"
                                             onBackClick={[Function]}
                                           >
                                             <li
@@ -130077,7 +130086,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <button
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
+                                                data-autoid="dds--masthead-default-sidenav__l0-back"
                                                 isbackbutton="true"
                                                 onClick={[Function]}
                                                 onKeyPress={[Function]}
@@ -130178,7 +130187,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </SideNavItem>
                                           </ForwardRef(SideNavLink)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item0"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item0"
                                             href=""
                                             key="Subnav 1"
                                           >
@@ -130187,13 +130196,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item0"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item0"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item0"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item0"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -130208,7 +130217,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item1"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item1"
                                             href=""
                                             key="Subnav 2"
                                           >
@@ -130217,13 +130226,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item1"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item1"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item1"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item1"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -130238,7 +130247,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item2"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item2"
                                             href=""
                                             key="Subnav 3"
                                           >
@@ -130247,13 +130256,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item2"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item2"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item2"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item2"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -130268,7 +130277,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item3"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item3"
                                             href=""
                                             key="Subnav 4"
                                           >
@@ -130277,13 +130286,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item3"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item3"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item3"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item3"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -130309,7 +130318,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                         className="bx--side-nav__menu-section-submenu"
                                         id="panel__(3,1)"
                                         isSubmenu={true}
-                                        navType="eco"
+                                        navType="default"
                                         onBackClick={[Function]}
                                         show={false}
                                         title="Blockchain"
@@ -130327,7 +130336,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                           />
                                           <ForwardRef(SideNavMenuBackButton)
                                             backButtonText="Back"
-                                            navType="eco"
+                                            navType="default"
                                             onBackClick={[Function]}
                                           >
                                             <li
@@ -130335,7 +130344,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <button
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
+                                                data-autoid="dds--masthead-default-sidenav__l0-back"
                                                 isbackbutton="true"
                                                 onClick={[Function]}
                                                 onKeyPress={[Function]}
@@ -130436,7 +130445,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </SideNavItem>
                                           </ForwardRef(SideNavLink)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item0"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item0"
                                             href=""
                                             key="Subnav 1"
                                           >
@@ -130445,13 +130454,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item0"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item0"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item0"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item0"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -130466,7 +130475,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item1"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item1"
                                             href=""
                                             key="Subnav 2"
                                           >
@@ -130475,13 +130484,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item1"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item1"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item1"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item1"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -130496,7 +130505,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item2"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item2"
                                             href=""
                                             key="Subnav 3"
                                           >
@@ -130505,13 +130514,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item2"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item2"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item2"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item2"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -130526,7 +130535,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item3"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item3"
                                             href=""
                                             key="Subnav 4"
                                           >
@@ -130535,13 +130544,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item3"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item3"
                                                 element="a"
                                                 href=""
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item3"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item3"
                                                   href=""
                                                 >
                                                   <SideNavLinkText>
@@ -130567,7 +130576,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                         className="bx--side-nav__menu-section-submenu"
                                         id="panel__(3,2)"
                                         isSubmenu={true}
-                                        navType="eco"
+                                        navType="default"
                                         onBackClick={[Function]}
                                         show={false}
                                         title="Containers"
@@ -130585,7 +130594,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                           />
                                           <ForwardRef(SideNavMenuBackButton)
                                             backButtonText="Back"
-                                            navType="eco"
+                                            navType="default"
                                             onBackClick={[Function]}
                                           >
                                             <li
@@ -130593,7 +130602,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <button
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
+                                                data-autoid="dds--masthead-default-sidenav__l0-back"
                                                 isbackbutton="true"
                                                 onClick={[Function]}
                                                 onKeyPress={[Function]}
@@ -130694,7 +130703,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </SideNavItem>
                                           </ForwardRef(SideNavLink)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item0"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item0"
                                             href="https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn"
                                             key="Code patterns"
                                           >
@@ -130703,13 +130712,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item0"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item0"
                                                 element="a"
                                                 href="https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn"
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item0"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item0"
                                                   href="https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn"
                                                 >
                                                   <SideNavLinkText>
@@ -130724,7 +130733,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item1"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item1"
                                             href="https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn"
                                             key="Tutorials"
                                           >
@@ -130733,13 +130742,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item1"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item1"
                                                 element="a"
                                                 href="https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn"
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item1"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item1"
                                                   href="https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn"
                                                 >
                                                   <SideNavLinkText>
@@ -130754,7 +130763,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item2"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item2"
                                             href="https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn"
                                             key="Events"
                                           >
@@ -130763,13 +130772,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item2"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item2"
                                                 element="a"
                                                 href="https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn"
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item2"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item2"
                                                   href="https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn"
                                                 >
                                                   <SideNavLinkText>
@@ -130795,7 +130804,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                         className="bx--side-nav__menu-section-submenu"
                                         id="panel__(3,3)"
                                         isSubmenu={true}
-                                        navType="eco"
+                                        navType="default"
                                         onBackClick={[Function]}
                                         show={false}
                                         title="Analytics"
@@ -130813,7 +130822,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                           />
                                           <ForwardRef(SideNavMenuBackButton)
                                             backButtonText="Back"
-                                            navType="eco"
+                                            navType="default"
                                             onBackClick={[Function]}
                                           >
                                             <li
@@ -130821,7 +130830,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <button
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
+                                                data-autoid="dds--masthead-default-sidenav__l0-back"
                                                 isbackbutton="true"
                                                 onClick={[Function]}
                                                 onKeyPress={[Function]}
@@ -130922,7 +130931,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </SideNavItem>
                                           </ForwardRef(SideNavLink)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item0"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item0"
                                             href="https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
                                             key="Code patterns"
                                           >
@@ -130931,13 +130940,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item0"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item0"
                                                 element="a"
                                                 href="https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item0"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item0"
                                                   href="https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
                                                 >
                                                   <SideNavLinkText>
@@ -130952,7 +130961,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item1"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item1"
                                             href="https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
                                             key="Tutorials"
                                           >
@@ -130961,13 +130970,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item1"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item1"
                                                 element="a"
                                                 href="https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item1"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item1"
                                                   href="https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
                                                 >
                                                   <SideNavLinkText>
@@ -130982,7 +130991,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item2"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item2"
                                             href="https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
                                             key="Events"
                                           >
@@ -130991,13 +131000,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item2"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item2"
                                                 element="a"
                                                 href="https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item2"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item2"
                                                   href="https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
                                                 >
                                                   <SideNavLinkText>
@@ -131012,7 +131021,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             </li>
                                           </ForwardRef(SideNavMenuItem)>
                                           <ForwardRef(SideNavMenuItem)
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item3"
+                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item3"
                                             href="https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn"
                                             key="Developer community"
                                           >
@@ -131021,13 +131030,13 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                             >
                                               <Link
                                                 className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item3"
+                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item3"
                                                 element="a"
                                                 href="https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn"
                                               >
                                                 <a
                                                   className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item3"
+                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item3"
                                                   href="https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn"
                                                 >
                                                   <SideNavLinkText>
@@ -131037,1385 +131046,1376 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                                                       Developer community
                                                     </span>
                                                   </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </ForwardRef(SideNavMenuItem)>
-                                          <button
-                                            aria-hidden={true}
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          />
-                                        </div>
-                                      </SideNavMenuSection>
-                                    </div>
-                                  </div>
-                                </HeaderSideNavItems>
-                              </ul>
-                            </SideNavItems>
-                          </nav>
-                        </nav>
-                      </ForwardRef(SideNav)>
-                    </MastheadLeftNav>
-                    <IbmLogo
-                      autoid="dds--masthead-eco__l0-logo"
-                      isSearchActive={false}
-                    >
-                      <div
-                        className="bx--header__logo"
-                      >
-                        <ConditionalWrapper
-                          wrapper={[Function]}
-                        >
-                          <a
-                            aria-label="IBM®"
-                            data-autoid="dds--masthead-eco__l0-logo"
-                            href="http://www.ibm.com"
-                          >
-                            <MastheadLogo
-                              height="23"
-                              viewBox="0 0 58 23"
-                              width="58"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                height="23"
-                                viewBox="0 0 58 23"
-                                width="58"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M58 21.467V23h-7.632v-1.533H58zm-18.316 0V23h-7.631v-1.533h7.631zm5.955 0L45.025 23l-.606-1.533h1.22zm-17.097 0A6.285 6.285 0 0 1 24.391 23H12.21v-1.533zm-17.858 0V23H0v-1.533h10.684zm29-3.067v1.533h-7.631V18.4h7.631zm7.148 0l-.594 1.533H43.82l-.598-1.533h3.609zm-16.764 0a5.719 5.719 0 0 1-.64 1.533H12.21V18.4zm-19.384 0v1.533H0V18.4h10.684zM58 18.4v1.533h-7.632V18.4H58zm-3.053-3.067v1.534h-4.579v-1.534h4.58zm-15.263 0v1.534h-4.579v-1.534h4.58zm8.345 0l-.6 1.534h-4.806l-.604-1.534h6.01zm-18.174 0c.137.49.213 1.003.213 1.534h-5.647v-1.534zm-10.013 0v1.534h-4.579v-1.534h4.58zm-12.21 0v1.534h-4.58v-1.534h4.58zm47.315-3.066V13.8h-4.579v-1.533h4.58zm-15.263 0V13.8h-4.579v-1.533h4.58zm9.541 0l-.597 1.533h-7.22l-.591-1.533h8.408zm-21.248 0c.527.432.98.951 1.328 1.533H15.263v-1.533zm-20.345 0V13.8h-4.58v-1.533h4.58zM44.599 9.2l.427 1.24.428-1.24h9.493v1.533h-4.579V9.324l-.519 1.41h-9.661l-.504-1.41v1.41h-4.579V9.2H44.6zm-36.967 0v1.533h-4.58V9.2h4.58zm21.673 0a5.95 5.95 0 0 1-1.328 1.533H15.263V9.2zm25.642-3.067v1.534h-8.964l.54-1.534h8.424zm-11.413 0l.54 1.534h-8.969V6.133h8.43zm-13.466 0c0 .531-.076 1.045-.213 1.534H24.42V6.133zm-10.226 0v1.534h-4.579V6.133h4.58zm-12.21 0v1.534h-4.58V6.133h4.58zm34.845-3.066l.53 1.533H32.054V3.067h10.424zm15.523 0V4.6H47.04l.55-1.533H58zm-28.573 0c.284.473.504.988.641 1.533H12.211V3.067zm-18.743 0V4.6H0V3.067h10.684zM41.406 0l.54 1.533h-9.893V0h9.353zM58 0v1.533h-9.881L48.647 0H58zM24.39 0c1.601 0 3.057.581 4.152 1.533H12.211V0zM10.685 0v1.533H0V0h10.684z"
-                                  fill="#161616"
-                                  fillRule="evenodd"
-                                />
-                              </svg>
-                            </MastheadLogo>
-                          </a>
-                        </ConditionalWrapper>
-                      </div>
-                    </IbmLogo>
-                    <div
-                      className="bx--header__search bx--masthead__platform"
-                    >
-                      <MastheadSearch
-                        initialSearchTerm=""
-                        isSearchActive={false}
-                        navType="eco"
-                        onChangeSearchActive={[Function]}
-                        placeHolderText="Search all of IBM"
-                        renderValue={3}
-                        searchOpenOnload={false}
-                      >
-                        <div
-                          className="bx--masthead__search"
-                          data-autoid="dds--masthead__search"
-                        >
-                          <div
-                            className="bx--header__search--actions"
-                          >
-                            <HeaderGlobalAction
-                              aria-label="Open IBM search field"
-                              className="bx--header__search--search"
-                              data-autoid="dds--masthead-eco__l0-search"
-                              onClick={[Function]}
-                              tabIndex="0"
-                            >
-                              <Button
-                                aria-label="Open IBM search field"
-                                className="bx--header__search--search bx--header__action"
-                                dangerDescription="danger"
-                                data-autoid="dds--masthead-eco__l0-search"
-                                disabled={false}
-                                hasIconOnly={true}
-                                iconDescription="Open IBM search field"
-                                isExpressive={false}
-                                kind="primary"
-                                onClick={[Function]}
-                                size="default"
-                                tabIndex="0"
-                                tooltipAlignment="center"
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Open IBM search field"
-                                  aria-pressed={null}
-                                  className="bx--header__search--search bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-eco__l0-search"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  tabIndex="0"
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Open IBM search field
-                                  </div>
-                                  <ForwardRef(Search20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Search20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                            <HeaderGlobalAction
-                              aria-label="Close"
-                              className="bx--header__search--close"
-                              data-autoid="dds--masthead-eco__l0-search--close"
-                              onClick={[Function]}
-                            >
-                              <Button
-                                aria-label="Close"
-                                className="bx--header__search--close bx--header__action"
-                                dangerDescription="danger"
-                                data-autoid="dds--masthead-eco__l0-search--close"
-                                disabled={false}
-                                hasIconOnly={true}
-                                iconDescription="Close"
-                                isExpressive={false}
-                                kind="primary"
-                                onClick={[Function]}
-                                size="default"
-                                tabIndex={0}
-                                tooltipAlignment="center"
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Close"
-                                  aria-pressed={null}
-                                  className="bx--header__search--close bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-eco__l0-search--close"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Close
-                                  </div>
-                                  <ForwardRef(Close20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Close20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                          </div>
-                        </div>
-                      </MastheadSearch>
-                    </div>
-                    <HeaderGlobalBar
-                      className="bx--header__profile"
-                    >
-                      <div
-                        className="bx--header__global bx--header__profile"
-                      >
-                        <MastheadProfile
-                          navType="eco"
-                          overflowMenuItemProps={
-                            Object {
-                              "wrapperClassName": "bx--masthead__profile-item",
-                            }
-                          }
-                          overflowMenuProps={
-                            Object {
-                              "ariaLabel": "User Profile",
-                              "data-autoid": "dds--masthead-eco__l0-account",
-                              "flipped": true,
-                              "onOpen": [Function],
-                              "renderIcon": [Function],
-                              "style": Object {
-                                "width": "3rem",
-                              },
-                            }
-                          }
-                          profileMenu={Array []}
-                        >
-                          <ForwardRef(OverflowMenu)
-                            ariaLabel="User Profile"
-                            className="bx--header__action"
-                            data-autoid="dds--masthead-eco__l0-account"
-                            flipped={true}
-                            onOpen={[Function]}
-                            renderIcon={[Function]}
-                            style={
-                              Object {
-                                "width": "3rem",
-                              }
-                            }
-                          >
-                            <OverflowMenu
-                              ariaLabel="User Profile"
-                              className="bx--header__action"
-                              data-autoid="dds--masthead-eco__l0-account"
-                              direction="bottom"
-                              flipped={true}
-                              iconDescription="open and close list of options"
-                              innerRef={null}
-                              light={false}
-                              menuOffset={[Function]}
-                              menuOffsetFlip={[Function]}
-                              onClick={[Function]}
-                              onClose={[Function]}
-                              onKeyDown={[Function]}
-                              onOpen={[Function]}
-                              open={false}
-                              renderIcon={[Function]}
-                              selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
-                              style={
-                                Object {
-                                  "width": "3rem",
-                                }
-                              }
-                            >
-                              <ClickListener
-                                onClickOutside={[Function]}
-                              >
-                                <button
-                                  aria-expanded={false}
-                                  aria-haspopup={true}
-                                  aria-label="User Profile"
-                                  className="bx--header__action bx--overflow-menu"
-                                  data-autoid="dds--masthead-eco__l0-account"
-                                  onClick={[Function]}
-                                  onClose={[Function]}
-                                  onKeyDown={[Function]}
-                                  open={false}
-                                  style={
-                                    Object {
-                                      "width": "3rem",
-                                    }
-                                  }
-                                  type="button"
-                                >
-                                  <renderIcon
-                                    aria-label="open and close list of options"
-                                    className="bx--overflow-menu__icon"
-                                    onClick={[Function]}
-                                    onKeyDown={[Function]}
-                                  >
-                                    <ForwardRef(User20)>
-                                      <Icon
-                                        fill="currentColor"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M16 4a5 5 0 11-5 5 5 5 0 015-5m0-2a7 7 0 107 7A7 7 0 0016 2zM26 30H24V25a5 5 0 00-5-5H13a5 5 0 00-5 5v5H6V25a7 7 0 017-7h6a7 7 0 017 7z"
+                                                </a>
+                                              </Link>
+                                            </li>
+                                          </ForwardRef(SideNavMenuItem)>
+                                          <button
+                                            aria-hidden={true}
+                                            className="bx--masthead__focus"
+                                            onFocus={[Function]}
                                           />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(User20)>
-                                  </renderIcon>
-                                </button>
-                              </ClickListener>
-                            </OverflowMenu>
-                          </ForwardRef(OverflowMenu)>
-                        </MastheadProfile>
+                                        </div>
+                                      </SideNavMenuSection>
+                                    </div>
+                                  </div>
+                                </HeaderSideNavItems>
+                              </ul>
+                            </SideNavItems>
+                          </nav>
+                        </nav>
+                      </ForwardRef(SideNav)>
+                    </MastheadLeftNav>
+                    <IbmLogo
+                      autoid="dds--masthead-default__l0-logo"
+                      isSearchActive={false}
+                    >
+                      <div
+                        className="bx--header__logo"
+                      >
+                        <ConditionalWrapper
+                          wrapper={[Function]}
+                        >
+                          <a
+                            aria-label="IBM®"
+                            data-autoid="dds--masthead-default__l0-logo"
+                            href="http://www.ibm.com"
+                          >
+                            <MastheadLogo
+                              height="23"
+                              viewBox="0 0 58 23"
+                              width="58"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <svg
+                                height="23"
+                                viewBox="0 0 58 23"
+                                width="58"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M58 21.467V23h-7.632v-1.533H58zm-18.316 0V23h-7.631v-1.533h7.631zm5.955 0L45.025 23l-.606-1.533h1.22zm-17.097 0A6.285 6.285 0 0 1 24.391 23H12.21v-1.533zm-17.858 0V23H0v-1.533h10.684zm29-3.067v1.533h-7.631V18.4h7.631zm7.148 0l-.594 1.533H43.82l-.598-1.533h3.609zm-16.764 0a5.719 5.719 0 0 1-.64 1.533H12.21V18.4zm-19.384 0v1.533H0V18.4h10.684zM58 18.4v1.533h-7.632V18.4H58zm-3.053-3.067v1.534h-4.579v-1.534h4.58zm-15.263 0v1.534h-4.579v-1.534h4.58zm8.345 0l-.6 1.534h-4.806l-.604-1.534h6.01zm-18.174 0c.137.49.213 1.003.213 1.534h-5.647v-1.534zm-10.013 0v1.534h-4.579v-1.534h4.58zm-12.21 0v1.534h-4.58v-1.534h4.58zm47.315-3.066V13.8h-4.579v-1.533h4.58zm-15.263 0V13.8h-4.579v-1.533h4.58zm9.541 0l-.597 1.533h-7.22l-.591-1.533h8.408zm-21.248 0c.527.432.98.951 1.328 1.533H15.263v-1.533zm-20.345 0V13.8h-4.58v-1.533h4.58zM44.599 9.2l.427 1.24.428-1.24h9.493v1.533h-4.579V9.324l-.519 1.41h-9.661l-.504-1.41v1.41h-4.579V9.2H44.6zm-36.967 0v1.533h-4.58V9.2h4.58zm21.673 0a5.95 5.95 0 0 1-1.328 1.533H15.263V9.2zm25.642-3.067v1.534h-8.964l.54-1.534h8.424zm-11.413 0l.54 1.534h-8.969V6.133h8.43zm-13.466 0c0 .531-.076 1.045-.213 1.534H24.42V6.133zm-10.226 0v1.534h-4.579V6.133h4.58zm-12.21 0v1.534h-4.58V6.133h4.58zm34.845-3.066l.53 1.533H32.054V3.067h10.424zm15.523 0V4.6H47.04l.55-1.533H58zm-28.573 0c.284.473.504.988.641 1.533H12.211V3.067zm-18.743 0V4.6H0V3.067h10.684zM41.406 0l.54 1.533h-9.893V0h9.353zM58 0v1.533h-9.881L48.647 0H58zM24.39 0c1.601 0 3.057.581 4.152 1.533H12.211V0zM10.685 0v1.533H0V0h10.684z"
+                                  fill="#161616"
+                                  fillRule="evenodd"
+                                />
+                              </svg>
+                            </MastheadLogo>
+                          </a>
+                        </ConditionalWrapper>
                       </div>
-                    </HeaderGlobalBar>
-                  </header>
-                </Header>
-              </div>
-              <div>
-                <MastheadL1
-                  isShort={false}
-                  navType="eco"
-                  navigationL1={
-                    Array [
-                      Object {
-                        "hasMegapanel": false,
-                        "hasMenu": true,
-                        "menuSections": Array [
-                          Object {
-                            "heading": "Explore",
-                            "menuItems": Array [
-                              Object {
-                                "megapanelContent": Object {
-                                  "description": "",
-                                  "feature": Object {
-                                    "heading": "",
-                                    "imageUrl": "",
-                                    "linkTitle": "",
-                                    "linkUrl": "",
-                                  },
-                                  "headingTitle": "",
-                                  "headingUrl": "",
-                                  "quickLinks": Object {
-                                    "links": Array [
-                                      Object {
-                                        "title": "Subnav 1",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 2",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 3",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 4",
-                                        "url": "",
-                                      },
-                                    ],
-                                    "title": "Title",
-                                  },
-                                },
-                                "title": "Link 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Menu dropdown item with extra long text",
-                                "url": "",
-                              },
-                            ],
-                          },
-                        ],
-                        "title": "Lorem ipsum dolor sit amet",
-                        "titleEnglish": "Lorem ipsum dolor sit amet",
-                        "url": "",
-                      },
-                      Object {
-                        "hasMenu": true,
-                        "menuSections": Array [
-                          Object {
-                            "heading": "",
-                            "menuItems": Array [
-                              Object {
-                                "megapanelContent": Object {
-                                  "description": "Reimagine your business, designing and building the platforms necessary for growth",
-                                  "feature": Object {
-                                    "heading": "IBM Services, your Digital Reinvention â„¢ partner",
-                                    "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
-                                    "linkTitle": "Explore all our business consulting and technology services",
-                                    "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                                  },
-                                  "headingTitle": "Services",
-                                  "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                                  "quickLinks": Object {
-                                    "links": Array [
-                                      Object {
-                                        "title": "Subnav 1",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 2",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 3",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 4",
-                                        "url": "",
-                                      },
-                                    ],
-                                    "title": "Quicklinks",
-                                  },
-                                },
-                                "title": "Link 2",
-                                "url": "",
-                              },
-                              Object {
-                                "megapanelContent": Object {
-                                  "description": "Funding options that fit your business",
-                                  "feature": Object {
-                                    "heading": "Cloud financing strategies that work for your business",
-                                    "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
-                                    "linkTitle": "Committed to cloud? Make the most of your cash flow.",
-                                    "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
-                                  },
-                                  "headingTitle": "Financing",
-                                  "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                                  "quickLinks": Object {
-                                    "links": Array [
-                                      Object {
-                                        "title": "Subnav 1",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 2",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 3",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 4",
-                                        "url": "",
-                                      },
-                                    ],
-                                    "title": "Quicklinks",
-                                  },
-                                },
-                                "title": "Financing",
-                                "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                              },
-                            ],
-                          },
-                        ],
-                        "title": "Consectetur adipiscing elit",
-                        "titleEnglish": "Consectetur adipiscing elit",
-                        "url": "",
-                      },
-                      Object {
-                        "hasMegapanel": false,
-                        "hasMenu": false,
-                        "menuSections": Array [],
-                        "title": "Nulla quis sem at nibh elementum imperdiet",
-                        "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
-                        "url": "https://www.ibm.com/industries?lnk=min",
-                      },
-                      Object {
-                        "hasMegapanel": false,
-                        "hasMenu": true,
-                        "menuSections": Array [
-                          Object {
-                            "heading": "",
-                            "menuItems": Array [
-                              Object {
-                                "megapanelContent": Object {
-                                  "description": "",
-                                  "feature": Object {
-                                    "heading": "IBM Developer newsletters",
-                                    "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
-                                    "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
-                                    "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  "headingTitle": "IBM Developer",
-                                  "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                                  "quickLinks": Object {
-                                    "links": Array [
-                                      Object {
-                                        "title": "Subnav 1",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 2",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 3",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 4",
-                                        "url": "",
-                                      },
-                                    ],
-                                    "title": "Quicklinks",
-                                  },
-                                },
-                                "title": "IBM Developer",
-                                "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "megapanelContent": Object {
-                                  "description": "",
-                                  "feature": Object {
-                                    "heading": "Blockchain 101",
-                                    "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
-                                    "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
-                                    "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  "headingTitle": "Blockchain",
-                                  "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                                  "quickLinks": Object {
-                                    "links": Array [
-                                      Object {
-                                        "title": "Subnav 1",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 2",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 3",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 4",
-                                        "url": "",
+                    </IbmLogo>
+                    <div
+                      className="bx--header__search "
+                    >
+                      <MastheadTopNav
+                        customProfileLogin={null}
+                        navType="default"
+                        navigation={
+                          Array [
+                            Object {
+                              "hasMegapanel": false,
+                              "hasMenu": true,
+                              "menuSections": Array [
+                                Object {
+                                  "heading": "Explore",
+                                  "menuItems": Array [
+                                    Object {
+                                      "megapanelContent": Object {
+                                        "description": "",
+                                        "feature": Object {
+                                          "heading": "",
+                                          "imageUrl": "",
+                                          "linkTitle": "",
+                                          "linkUrl": "",
+                                        },
+                                        "headingTitle": "",
+                                        "headingUrl": "",
+                                        "quickLinks": Object {
+                                          "links": Array [
+                                            Object {
+                                              "title": "Subnav 1",
+                                              "url": "",
+                                            },
+                                            Object {
+                                              "title": "Subnav 2",
+                                              "url": "",
+                                            },
+                                            Object {
+                                              "title": "Subnav 3",
+                                              "url": "",
+                                            },
+                                            Object {
+                                              "title": "Subnav 4",
+                                              "url": "",
+                                            },
+                                          ],
+                                          "title": "Title",
+                                        },
                                       },
-                                    ],
-                                    "title": "Quicklinks",
-                                  },
+                                      "title": "Link 1",
+                                      "url": "",
+                                    },
+                                    Object {
+                                      "title": "Menu dropdown item with extra long text",
+                                      "url": "",
+                                    },
+                                  ],
                                 },
-                                "title": "Blockchain",
-                                "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "megapanelContent": Object {
-                                  "description": "",
-                                  "feature": Object {
-                                    "heading": "Make sense of Kubernetes",
-                                    "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
-                                    "linkTitle": "Deploy a simple Python application with Kubernetes",
-                                    "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  "headingTitle": "Containers",
-                                  "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                  "quickLinks": Object {
-                                    "links": Array [
-                                      Object {
-                                        "title": "Code patterns",
-                                        "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                      Object {
-                                        "title": "Tutorials",
-                                        "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                              ],
+                              "title": "Lorem ipsum dolor sit amet",
+                              "titleEnglish": "Lorem ipsum dolor sit amet",
+                              "url": "",
+                            },
+                            Object {
+                              "hasMenu": true,
+                              "menuSections": Array [
+                                Object {
+                                  "heading": "",
+                                  "menuItems": Array [
+                                    Object {
+                                      "megapanelContent": Object {
+                                        "description": "Reimagine your business, designing and building the platforms necessary for growth",
+                                        "feature": Object {
+                                          "heading": "IBM Services, your Digital Reinvention â„¢ partner",
+                                          "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
+                                          "linkTitle": "Explore all our business consulting and technology services",
+                                          "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
+                                        },
+                                        "headingTitle": "Services",
+                                        "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
+                                        "quickLinks": Object {
+                                          "links": Array [
+                                            Object {
+                                              "title": "Subnav 1",
+                                              "url": "",
+                                            },
+                                            Object {
+                                              "title": "Subnav 2",
+                                              "url": "",
+                                            },
+                                            Object {
+                                              "title": "Subnav 3",
+                                              "url": "",
+                                            },
+                                            Object {
+                                              "title": "Subnav 4",
+                                              "url": "",
+                                            },
+                                          ],
+                                          "title": "Quicklinks",
+                                        },
                                       },
-                                      Object {
-                                        "title": "Events",
-                                        "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                                      "title": "Link 2",
+                                      "url": "",
+                                    },
+                                    Object {
+                                      "megapanelContent": Object {
+                                        "description": "Funding options that fit your business",
+                                        "feature": Object {
+                                          "heading": "Cloud financing strategies that work for your business",
+                                          "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
+                                          "linkTitle": "Committed to cloud? Make the most of your cash flow.",
+                                          "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
+                                        },
+                                        "headingTitle": "Financing",
+                                        "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
+                                        "quickLinks": Object {
+                                          "links": Array [
+                                            Object {
+                                              "title": "Subnav 1",
+                                              "url": "",
+                                            },
+                                            Object {
+                                              "title": "Subnav 2",
+                                              "url": "",
+                                            },
+                                            Object {
+                                              "title": "Subnav 3",
+                                              "url": "",
+                                            },
+                                            Object {
+                                              "title": "Subnav 4",
+                                              "url": "",
+                                            },
+                                          ],
+                                          "title": "Quicklinks",
+                                        },
                                       },
-                                    ],
-                                    "title": "Quicklinks",
-                                  },
+                                      "title": "Financing",
+                                      "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
+                                    },
+                                  ],
                                 },
-                                "title": "Containers",
-                                "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "megapanelContent": Object {
-                                  "description": "",
-                                  "feature": Object {
-                                    "heading": "Train your data no matter where it lives",
-                                    "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
-                                    "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
-                                    "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  "headingTitle": "Analytics",
-                                  "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                  "quickLinks": Object {
-                                    "links": Array [
-                                      Object {
-                                        "title": "Code patterns",
-                                        "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                              ],
+                              "title": "Consectetur adipiscing elit",
+                              "titleEnglish": "Consectetur adipiscing elit",
+                              "url": "",
+                            },
+                            Object {
+                              "hasMegapanel": false,
+                              "hasMenu": false,
+                              "menuSections": Array [],
+                              "title": "Nulla quis sem at nibh elementum imperdiet",
+                              "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
+                              "url": "https://www.ibm.com/industries?lnk=min",
+                            },
+                            Object {
+                              "hasMegapanel": false,
+                              "hasMenu": true,
+                              "menuSections": Array [
+                                Object {
+                                  "heading": "",
+                                  "menuItems": Array [
+                                    Object {
+                                      "megapanelContent": Object {
+                                        "description": "",
+                                        "feature": Object {
+                                          "heading": "IBM Developer newsletters",
+                                          "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
+                                          "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
+                                          "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
+                                        },
+                                        "headingTitle": "IBM Developer",
+                                        "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
+                                        "quickLinks": Object {
+                                          "links": Array [
+                                            Object {
+                                              "title": "Subnav 1",
+                                              "url": "",
+                                            },
+                                            Object {
+                                              "title": "Subnav 2",
+                                              "url": "",
+                                            },
+                                            Object {
+                                              "title": "Subnav 3",
+                                              "url": "",
+                                            },
+                                            Object {
+                                              "title": "Subnav 4",
+                                              "url": "",
+                                            },
+                                          ],
+                                          "title": "Quicklinks",
+                                        },
                                       },
-                                      Object {
-                                        "title": "Tutorials",
-                                        "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                                      "title": "IBM Developer",
+                                      "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
+                                    },
+                                    Object {
+                                      "megapanelContent": Object {
+                                        "description": "",
+                                        "feature": Object {
+                                          "heading": "Blockchain 101",
+                                          "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
+                                          "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
+                                          "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
+                                        },
+                                        "headingTitle": "Blockchain",
+                                        "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
+                                        "quickLinks": Object {
+                                          "links": Array [
+                                            Object {
+                                              "title": "Subnav 1",
+                                              "url": "",
+                                            },
+                                            Object {
+                                              "title": "Subnav 2",
+                                              "url": "",
+                                            },
+                                            Object {
+                                              "title": "Subnav 3",
+                                              "url": "",
+                                            },
+                                            Object {
+                                              "title": "Subnav 4",
+                                              "url": "",
+                                            },
+                                          ],
+                                          "title": "Quicklinks",
+                                        },
                                       },
-                                      Object {
-                                        "title": "Events",
-                                        "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                                      "title": "Blockchain",
+                                      "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
+                                    },
+                                    Object {
+                                      "megapanelContent": Object {
+                                        "description": "",
+                                        "feature": Object {
+                                          "heading": "Make sense of Kubernetes",
+                                          "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
+                                          "linkTitle": "Deploy a simple Python application with Kubernetes",
+                                          "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
+                                        },
+                                        "headingTitle": "Containers",
+                                        "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
+                                        "quickLinks": Object {
+                                          "links": Array [
+                                            Object {
+                                              "title": "Code patterns",
+                                              "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                                            },
+                                            Object {
+                                              "title": "Tutorials",
+                                              "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                                            },
+                                            Object {
+                                              "title": "Events",
+                                              "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
+                                            },
+                                          ],
+                                          "title": "Quicklinks",
+                                        },
                                       },
-                                      Object {
-                                        "title": "Developer community",
-                                        "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
+                                      "title": "Containers",
+                                      "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
+                                    },
+                                    Object {
+                                      "megapanelContent": Object {
+                                        "description": "",
+                                        "feature": Object {
+                                          "heading": "Train your data no matter where it lives",
+                                          "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
+                                          "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
+                                          "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
+                                        },
+                                        "headingTitle": "Analytics",
+                                        "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                                        "quickLinks": Object {
+                                          "links": Array [
+                                            Object {
+                                              "title": "Code patterns",
+                                              "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                                            },
+                                            Object {
+                                              "title": "Tutorials",
+                                              "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                                            },
+                                            Object {
+                                              "title": "Events",
+                                              "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                                            },
+                                            Object {
+                                              "title": "Developer community",
+                                              "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
+                                            },
+                                          ],
+                                          "title": "Quicklinks",
+                                        },
                                       },
-                                    ],
-                                    "title": "Quicklinks",
-                                  },
+                                      "title": "Analytics",
+                                      "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
+                                    },
+                                  ],
                                 },
-                                "title": "Analytics",
-                                "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                            ],
-                          },
-                        ],
-                        "title": "Fusce nec tellus sed augue semper porta",
-                        "titleEnglish": "Fusce nec tellus sed augue semper porta",
-                        "url": "",
-                      },
-                      Object {
-                        "hasMegapanel": false,
-                        "hasMenu": false,
-                        "menuSections": Array [],
-                        "title": "Sed cursus ante dapibus diam",
-                        "titleEnglish": "Sed cursus ante dapibus diam",
-                        "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
-                      },
-                    ]
-                  }
-                  platform={
-                    Object {
-                      "name": "Stock Charts",
-                      "url": "https://www.example.com",
-                    }
-                  }
-                  selectedMenuItem="Lorem ipsum dolor sit amet"
-                  titleLink={null}
-                >
-                  <div
-                    className="bx--masthead__l1"
-                  >
-                    <div
-                      className="bx--masthead__l1-inner-container"
-                    >
-                      <div
-                        aria-selected={false}
-                        className="bx--masthead__l1-name"
+                              ],
+                              "title": "Fusce nec tellus sed augue semper porta",
+                              "titleEnglish": "Fusce nec tellus sed augue semper porta",
+                              "url": "",
+                            },
+                            Object {
+                              "hasMegapanel": false,
+                              "hasMenu": false,
+                              "menuSections": Array [],
+                              "title": "Sed cursus ante dapibus diam",
+                              "titleEnglish": "Sed cursus ante dapibus diam",
+                              "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
+                            },
+                          ]
+                        }
+                        platform={null}
+                        selectedMenuItem="Lorem ipsum dolor sit amet"
                       >
-                        <span
-                          className="bx--masthead__l1-name-title"
-                        >
-                          <a
-                            href="https://www.example.com"
-                          >
-                            Stock Charts
-                          </a>
-                        </span>
-                      </div>
-                      <HeaderNavContainer>
-                        <div
-                          className="bx--header__nav-container"
-                        >
+                        <HeaderNavContainer>
                           <div
-                            className="bx--header__nav-content"
+                            className="bx--header__nav-container"
                           >
                             <div
-                              className="bx--sub-content-left"
-                            />
-                            <div
-                              className="bx--sub-content-right"
-                            />
-                            <HeaderNavigation
-                              aria-label=""
-                              className="bx--masthead__l1-nav"
+                              className="bx--header__nav-content"
                             >
-                              <nav
-                                aria-label=""
-                                className="bx--header__nav bx--masthead__l1-nav"
+                              <div
+                                className="bx--sub-content-left"
+                              />
+                              <div
+                                className="bx--sub-content-right"
+                              />
+                              <HeaderNavigation
+                                aria-label="IBM"
+                                data-autoid="dds--masthead__l0-nav"
                               >
-                                <ul
-                                  aria-label=""
-                                  className="bx--header__menu-bar"
+                                <nav
+                                  aria-label="IBM"
+                                  className="bx--header__nav"
+                                  data-autoid="dds--masthead__l0-nav"
                                 >
-                                  <ForwardRef
-                                    aria-label="Lorem ipsum dolor sit amet"
-                                    autoId="dds--masthead-eco__l1-nav0"
-                                    className=""
-                                    key=".$0"
-                                    menuLinkName="Lorem ipsum dolor sit amet"
-                                    selected={true}
+                                  <ul
+                                    aria-label="IBM"
+                                    className="bx--header__menu-bar"
                                   >
-                                    <HeaderMenu
+                                    <ForwardRef
                                       aria-label="Lorem ipsum dolor sit amet"
-                                      autoId="dds--masthead-eco__l1-nav0"
+                                      autoId="dds--masthead-default__l0-nav0"
                                       className=""
-                                      focusRef={[Function]}
+                                      dataTitle="lorem-ipsum-dolor-sit-amet"
+                                      disableScroll={false}
+                                      key=".$0"
                                       menuLinkName="Lorem ipsum dolor sit amet"
-                                      renderMenuContent={[Function]}
                                       selected={true}
                                       setOverlay={[Function]}
                                     >
-                                      <li
-                                        className="bx--header__submenu"
-                                        data-autoid="dds--masthead-eco__l1-nav0"
-                                        onBlur={[Function]}
-                                        onKeyDown={[Function]}
+                                      <HeaderMenu
+                                        aria-label="Lorem ipsum dolor sit amet"
+                                        autoId="dds--masthead-default__l0-nav0"
+                                        className=""
+                                        dataTitle="lorem-ipsum-dolor-sit-amet"
+                                        disableScroll={false}
+                                        focusRef={[Function]}
+                                        menuLinkName="Lorem ipsum dolor sit amet"
+                                        renderMenuContent={[Function]}
+                                        selected={true}
+                                        setOverlay={[Function]}
                                       >
-                                        <a
-                                          aria-expanded={false}
-                                          aria-haspopup="menu"
-                                          aria-label="Lorem ipsum dolor sit amet"
-                                          aria-selected="true"
-                                          className="bx--header__menu-item bx--header__menu-title"
-                                          href="#"
-                                          onClick={[Function]}
+                                        <li
+                                          className="bx--header__submenu"
+                                          data-autoid="dds--masthead-default__l0-nav0"
+                                          onBlur={[Function]}
                                           onKeyDown={[Function]}
-                                          role="menuitem"
-                                          tabIndex={0}
                                         >
-                                          Lorem ipsum dolor sit amet
-                                          <defaultRenderMenuContent>
-                                            <ForwardRef(ChevronDown20)
-                                              className="bx--header__menu-arrow"
-                                            >
-                                              <Icon
+                                          <a
+                                            aria-expanded={false}
+                                            aria-haspopup="menu"
+                                            aria-label="Lorem ipsum dolor sit amet"
+                                            aria-selected="true"
+                                            className="bx--header__menu-item bx--header__menu-title"
+                                            data-title="lorem-ipsum-dolor-sit-amet"
+                                            href="#"
+                                            onClick={[Function]}
+                                            onKeyDown={[Function]}
+                                            role="menuitem"
+                                            tabIndex={0}
+                                          >
+                                            Lorem ipsum dolor sit amet
+                                            <defaultRenderMenuContent>
+                                              <ForwardRef(ChevronDown20)
                                                 className="bx--header__menu-arrow"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                viewBox="0 0 32 32"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <svg
-                                                  aria-hidden={true}
+                                                <Icon
                                                   className="bx--header__menu-arrow"
                                                   fill="currentColor"
-                                                  focusable="false"
                                                   height={20}
                                                   preserveAspectRatio="xMidYMid meet"
                                                   viewBox="0 0 32 32"
                                                   width={20}
                                                   xmlns="http://www.w3.org/2000/svg"
                                                 >
-                                                  <path
-                                                    d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ChevronDown20)>
-                                          </defaultRenderMenuContent>
-                                        </a>
-                                        <ul
-                                          aria-label="Lorem ipsum dolor sit amet"
-                                          className="bx--header__menu"
-                                        >
-                                          <ForwardRef(HeaderMenuItem)
-                                            data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                            href=""
-                                            key=".$Link 1"
-                                            refs={[Function]}
-                                            role="none"
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="bx--header__menu-arrow"
+                                                    fill="currentColor"
+                                                    focusable="false"
+                                                    height={20}
+                                                    preserveAspectRatio="xMidYMid meet"
+                                                    viewBox="0 0 32 32"
+                                                    width={20}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  >
+                                                    <path
+                                                      d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
+                                                    />
+                                                  </svg>
+                                                </Icon>
+                                              </ForwardRef(ChevronDown20)>
+                                            </defaultRenderMenuContent>
+                                          </a>
+                                          <ul
+                                            aria-label="Lorem ipsum dolor sit amet"
+                                            className="bx--header__menu"
                                           >
-                                            <li
+                                            <ForwardRef(HeaderMenuItem)
+                                              data-autoid="dds--masthead-default__l0-nav0--subnav-col0-item0"
+                                              href=""
+                                              key=".$Link 1"
+                                              refs={[Function]}
                                               role="none"
                                             >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                                element="a"
-                                                href=""
-                                                refs={[Function]}
-                                                tabIndex={0}
+                                              <li
+                                                role="none"
                                               >
-                                                <a
+                                                <Link
                                                   className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item0"
+                                                  data-autoid="dds--masthead-default__l0-nav0--subnav-col0-item0"
+                                                  element="a"
                                                   href=""
                                                   refs={[Function]}
                                                   tabIndex={0}
                                                 >
-                                                  <span
-                                                    className="bx--text-truncate--end"
+                                                  <a
+                                                    className="bx--header__menu-item"
+                                                    data-autoid="dds--masthead-default__l0-nav0--subnav-col0-item0"
+                                                    href=""
+                                                    refs={[Function]}
+                                                    tabIndex={0}
                                                   >
-                                                    Link 1
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </ForwardRef(HeaderMenuItem)>
-                                          <ForwardRef(HeaderMenuItem)
-                                            data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                            href=""
-                                            key=".$Menu dropdown item with extra long text"
-                                            refs={[Function]}
-                                            role="none"
-                                          >
-                                            <li
+                                                    <span
+                                                      className="bx--text-truncate--end"
+                                                    >
+                                                      Link 1
+                                                    </span>
+                                                  </a>
+                                                </Link>
+                                              </li>
+                                            </ForwardRef(HeaderMenuItem)>
+                                            <ForwardRef(HeaderMenuItem)
+                                              data-autoid="dds--masthead-default__l0-nav0--subnav-col0-item1"
+                                              href=""
+                                              key=".$Menu dropdown item with extra long text"
+                                              refs={[Function]}
                                               role="none"
                                             >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                                element="a"
-                                                href=""
-                                                refs={[Function]}
-                                                tabIndex={0}
+                                              <li
+                                                role="none"
                                               >
-                                                <a
+                                                <Link
                                                   className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item1"
+                                                  data-autoid="dds--masthead-default__l0-nav0--subnav-col0-item1"
+                                                  element="a"
                                                   href=""
                                                   refs={[Function]}
                                                   tabIndex={0}
                                                 >
-                                                  <span
-                                                    className="bx--text-truncate--end"
+                                                  <a
+                                                    className="bx--header__menu-item"
+                                                    data-autoid="dds--masthead-default__l0-nav0--subnav-col0-item1"
+                                                    href=""
+                                                    refs={[Function]}
+                                                    tabIndex={0}
                                                   >
-                                                    Menu dropdown item with extra long text
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </ForwardRef(HeaderMenuItem)>
-                                        </ul>
-                                      </li>
-                                    </HeaderMenu>
-                                  </ForwardRef>
-                                  <ForwardRef
-                                    aria-label="Consectetur adipiscing elit"
-                                    autoId="dds--masthead-eco__l1-nav1"
-                                    className=""
-                                    key=".$1"
-                                    menuLinkName="Consectetur adipiscing elit"
-                                    selected={false}
-                                  >
-                                    <HeaderMenu
+                                                    <span
+                                                      className="bx--text-truncate--end"
+                                                    >
+                                                      Menu dropdown item with extra long text
+                                                    </span>
+                                                  </a>
+                                                </Link>
+                                              </li>
+                                            </ForwardRef(HeaderMenuItem)>
+                                          </ul>
+                                        </li>
+                                      </HeaderMenu>
+                                    </ForwardRef>
+                                    <ForwardRef
                                       aria-label="Consectetur adipiscing elit"
-                                      autoId="dds--masthead-eco__l1-nav1"
+                                      autoId="dds--masthead-default__l0-nav1"
                                       className=""
-                                      focusRef={[Function]}
+                                      dataTitle="consectetur-adipiscing-elit"
+                                      key=".$1"
                                       menuLinkName="Consectetur adipiscing elit"
-                                      renderMenuContent={[Function]}
                                       selected={false}
                                       setOverlay={[Function]}
                                     >
-                                      <li
-                                        className="bx--header__submenu"
-                                        data-autoid="dds--masthead-eco__l1-nav1"
-                                        onBlur={[Function]}
-                                        onKeyDown={[Function]}
+                                      <HeaderMenu
+                                        aria-label="Consectetur adipiscing elit"
+                                        autoId="dds--masthead-default__l0-nav1"
+                                        className=""
+                                        dataTitle="consectetur-adipiscing-elit"
+                                        focusRef={[Function]}
+                                        menuLinkName="Consectetur adipiscing elit"
+                                        renderMenuContent={[Function]}
+                                        selected={false}
+                                        setOverlay={[Function]}
                                       >
-                                        <a
-                                          aria-expanded={false}
-                                          aria-haspopup="menu"
-                                          aria-label="Consectetur adipiscing elit"
-                                          aria-selected="false"
-                                          className="bx--header__menu-item bx--header__menu-title"
-                                          href="#"
-                                          onClick={[Function]}
-                                          onKeyDown={[Function]}
-                                          role="menuitem"
-                                          tabIndex={0}
-                                        >
-                                          Consectetur adipiscing elit
-                                          <defaultRenderMenuContent>
-                                            <ForwardRef(ChevronDown20)
-                                              className="bx--header__menu-arrow"
-                                            >
-                                              <Icon
+                                        <li
+                                          className="bx--header__submenu"
+                                          data-autoid="dds--masthead-default__l0-nav1"
+                                          onBlur={[Function]}
+                                          onKeyDown={[Function]}
+                                        >
+                                          <a
+                                            aria-expanded={false}
+                                            aria-haspopup="menu"
+                                            aria-label="Consectetur adipiscing elit"
+                                            aria-selected="false"
+                                            className="bx--header__menu-item bx--header__menu-title"
+                                            data-title="consectetur-adipiscing-elit"
+                                            href="#"
+                                            onClick={[Function]}
+                                            onKeyDown={[Function]}
+                                            role="menuitem"
+                                            tabIndex={0}
+                                          >
+                                            Consectetur adipiscing elit
+                                            <defaultRenderMenuContent>
+                                              <ForwardRef(ChevronDown20)
                                                 className="bx--header__menu-arrow"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                viewBox="0 0 32 32"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <svg
-                                                  aria-hidden={true}
+                                                <Icon
                                                   className="bx--header__menu-arrow"
                                                   fill="currentColor"
-                                                  focusable="false"
                                                   height={20}
                                                   preserveAspectRatio="xMidYMid meet"
                                                   viewBox="0 0 32 32"
                                                   width={20}
                                                   xmlns="http://www.w3.org/2000/svg"
                                                 >
-                                                  <path
-                                                    d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ChevronDown20)>
-                                          </defaultRenderMenuContent>
-                                        </a>
-                                        <ul
-                                          aria-label="Consectetur adipiscing elit"
-                                          className="bx--header__menu"
-                                        >
-                                          <ForwardRef(HeaderMenuItem)
-                                            data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                            href=""
-                                            key=".$Link 2"
-                                            refs={[Function]}
-                                            role="none"
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="bx--header__menu-arrow"
+                                                    fill="currentColor"
+                                                    focusable="false"
+                                                    height={20}
+                                                    preserveAspectRatio="xMidYMid meet"
+                                                    viewBox="0 0 32 32"
+                                                    width={20}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  >
+                                                    <path
+                                                      d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
+                                                    />
+                                                  </svg>
+                                                </Icon>
+                                              </ForwardRef(ChevronDown20)>
+                                            </defaultRenderMenuContent>
+                                          </a>
+                                          <ul
+                                            aria-label="Consectetur adipiscing elit"
+                                            className="bx--header__menu"
                                           >
-                                            <li
+                                            <ForwardRef(HeaderMenuItem)
+                                              data-autoid="dds--masthead-default__l0-nav1--subnav-col0-item0"
+                                              href=""
+                                              key=".$Link 2"
+                                              refs={[Function]}
                                               role="none"
                                             >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                                element="a"
-                                                href=""
-                                                refs={[Function]}
-                                                tabIndex={0}
+                                              <li
+                                                role="none"
                                               >
-                                                <a
+                                                <Link
                                                   className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item0"
+                                                  data-autoid="dds--masthead-default__l0-nav1--subnav-col0-item0"
+                                                  element="a"
                                                   href=""
                                                   refs={[Function]}
                                                   tabIndex={0}
                                                 >
-                                                  <span
-                                                    className="bx--text-truncate--end"
+                                                  <a
+                                                    className="bx--header__menu-item"
+                                                    data-autoid="dds--masthead-default__l0-nav1--subnav-col0-item0"
+                                                    href=""
+                                                    refs={[Function]}
+                                                    tabIndex={0}
                                                   >
-                                                    Link 2
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </ForwardRef(HeaderMenuItem)>
-                                          <ForwardRef(HeaderMenuItem)
-                                            data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                            href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                            key=".$Financing"
-                                            refs={[Function]}
-                                            role="none"
-                                          >
-                                            <li
+                                                    <span
+                                                      className="bx--text-truncate--end"
+                                                    >
+                                                      Link 2
+                                                    </span>
+                                                  </a>
+                                                </Link>
+                                              </li>
+                                            </ForwardRef(HeaderMenuItem)>
+                                            <ForwardRef(HeaderMenuItem)
+                                              data-autoid="dds--masthead-default__l0-nav1--subnav-col0-item1"
+                                              href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
+                                              key=".$Financing"
+                                              refs={[Function]}
                                               role="none"
                                             >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                                element="a"
-                                                href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                                refs={[Function]}
-                                                tabIndex={0}
+                                              <li
+                                                role="none"
                                               >
-                                                <a
+                                                <Link
                                                   className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item1"
+                                                  data-autoid="dds--masthead-default__l0-nav1--subnav-col0-item1"
+                                                  element="a"
                                                   href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
                                                   refs={[Function]}
                                                   tabIndex={0}
                                                 >
-                                                  <span
-                                                    className="bx--text-truncate--end"
+                                                  <a
+                                                    className="bx--header__menu-item"
+                                                    data-autoid="dds--masthead-default__l0-nav1--subnav-col0-item1"
+                                                    href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
+                                                    refs={[Function]}
+                                                    tabIndex={0}
                                                   >
-                                                    Financing
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </ForwardRef(HeaderMenuItem)>
-                                        </ul>
-                                      </li>
-                                    </HeaderMenu>
-                                  </ForwardRef>
-                                  <ForwardRef(HeaderMenuItem)
-                                    aria-selected="false"
-                                    data-autoid="dds--masthead-eco__l1-nav2"
-                                    href="https://www.ibm.com/industries?lnk=min"
-                                    key=".$2"
-                                  >
-                                    <li>
-                                      <Link
-                                        aria-selected="false"
-                                        className="bx--header__menu-item"
-                                        data-autoid="dds--masthead-eco__l1-nav2"
-                                        element="a"
-                                        href="https://www.ibm.com/industries?lnk=min"
-                                        tabIndex={0}
-                                      >
-                                        <a
+                                                    <span
+                                                      className="bx--text-truncate--end"
+                                                    >
+                                                      Financing
+                                                    </span>
+                                                  </a>
+                                                </Link>
+                                              </li>
+                                            </ForwardRef(HeaderMenuItem)>
+                                          </ul>
+                                        </li>
+                                      </HeaderMenu>
+                                    </ForwardRef>
+                                    <ForwardRef(HeaderMenuItem)
+                                      aria-selected="false"
+                                      data-autoid="dds--masthead-default__l0-nav2"
+                                      href="https://www.ibm.com/industries?lnk=min"
+                                      key=".$2"
+                                    >
+                                      <li>
+                                        <Link
                                           aria-selected="false"
                                           className="bx--header__menu-item"
-                                          data-autoid="dds--masthead-eco__l1-nav2"
+                                          data-autoid="dds--masthead-default__l0-nav2"
+                                          element="a"
                                           href="https://www.ibm.com/industries?lnk=min"
                                           tabIndex={0}
                                         >
-                                          <span
-                                            className="bx--text-truncate--end"
+                                          <a
+                                            aria-selected="false"
+                                            className="bx--header__menu-item"
+                                            data-autoid="dds--masthead-default__l0-nav2"
+                                            href="https://www.ibm.com/industries?lnk=min"
+                                            tabIndex={0}
                                           >
-                                            Nulla quis sem at nibh elementum imperdiet
-                                          </span>
-                                        </a>
-                                      </Link>
-                                    </li>
-                                  </ForwardRef(HeaderMenuItem)>
-                                  <ForwardRef
-                                    aria-label="Fusce nec tellus sed augue semper porta"
-                                    autoId="dds--masthead-eco__l1-nav3"
-                                    className=""
-                                    key=".$3"
-                                    menuLinkName="Fusce nec tellus sed augue semper porta"
-                                    selected={false}
-                                  >
-                                    <HeaderMenu
+                                            <span
+                                              className="bx--text-truncate--end"
+                                            >
+                                              Nulla quis sem at nibh elementum imperdiet
+                                            </span>
+                                          </a>
+                                        </Link>
+                                      </li>
+                                    </ForwardRef(HeaderMenuItem)>
+                                    <ForwardRef
                                       aria-label="Fusce nec tellus sed augue semper porta"
-                                      autoId="dds--masthead-eco__l1-nav3"
+                                      autoId="dds--masthead-default__l0-nav3"
                                       className=""
-                                      focusRef={[Function]}
+                                      dataTitle="fusce-nec-tellus-sed-augue-semper-porta"
+                                      disableScroll={false}
+                                      key=".$3"
                                       menuLinkName="Fusce nec tellus sed augue semper porta"
-                                      renderMenuContent={[Function]}
                                       selected={false}
                                       setOverlay={[Function]}
                                     >
-                                      <li
-                                        className="bx--header__submenu"
-                                        data-autoid="dds--masthead-eco__l1-nav3"
-                                        onBlur={[Function]}
-                                        onKeyDown={[Function]}
+                                      <HeaderMenu
+                                        aria-label="Fusce nec tellus sed augue semper porta"
+                                        autoId="dds--masthead-default__l0-nav3"
+                                        className=""
+                                        dataTitle="fusce-nec-tellus-sed-augue-semper-porta"
+                                        disableScroll={false}
+                                        focusRef={[Function]}
+                                        menuLinkName="Fusce nec tellus sed augue semper porta"
+                                        renderMenuContent={[Function]}
+                                        selected={false}
+                                        setOverlay={[Function]}
                                       >
-                                        <a
-                                          aria-expanded={false}
-                                          aria-haspopup="menu"
-                                          aria-label="Fusce nec tellus sed augue semper porta"
-                                          aria-selected="false"
-                                          className="bx--header__menu-item bx--header__menu-title"
-                                          href="#"
-                                          onClick={[Function]}
+                                        <li
+                                          className="bx--header__submenu"
+                                          data-autoid="dds--masthead-default__l0-nav3"
+                                          onBlur={[Function]}
                                           onKeyDown={[Function]}
-                                          role="menuitem"
-                                          tabIndex={0}
                                         >
-                                          Fusce nec tellus sed augue semper porta
-                                          <defaultRenderMenuContent>
-                                            <ForwardRef(ChevronDown20)
-                                              className="bx--header__menu-arrow"
-                                            >
-                                              <Icon
+                                          <a
+                                            aria-expanded={false}
+                                            aria-haspopup="menu"
+                                            aria-label="Fusce nec tellus sed augue semper porta"
+                                            aria-selected="false"
+                                            className="bx--header__menu-item bx--header__menu-title"
+                                            data-title="fusce-nec-tellus-sed-augue-semper-porta"
+                                            href="#"
+                                            onClick={[Function]}
+                                            onKeyDown={[Function]}
+                                            role="menuitem"
+                                            tabIndex={0}
+                                          >
+                                            Fusce nec tellus sed augue semper porta
+                                            <defaultRenderMenuContent>
+                                              <ForwardRef(ChevronDown20)
                                                 className="bx--header__menu-arrow"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                viewBox="0 0 32 32"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <svg
-                                                  aria-hidden={true}
+                                                <Icon
                                                   className="bx--header__menu-arrow"
                                                   fill="currentColor"
-                                                  focusable="false"
                                                   height={20}
                                                   preserveAspectRatio="xMidYMid meet"
                                                   viewBox="0 0 32 32"
                                                   width={20}
                                                   xmlns="http://www.w3.org/2000/svg"
                                                 >
-                                                  <path
-                                                    d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ChevronDown20)>
-                                          </defaultRenderMenuContent>
-                                        </a>
-                                        <ul
-                                          aria-label="Fusce nec tellus sed augue semper porta"
-                                          className="bx--header__menu"
-                                        >
-                                          <ForwardRef(HeaderMenuItem)
-                                            data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                            href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                            key=".$IBM Developer"
-                                            refs={[Function]}
-                                            role="none"
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="bx--header__menu-arrow"
+                                                    fill="currentColor"
+                                                    focusable="false"
+                                                    height={20}
+                                                    preserveAspectRatio="xMidYMid meet"
+                                                    viewBox="0 0 32 32"
+                                                    width={20}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  >
+                                                    <path
+                                                      d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
+                                                    />
+                                                  </svg>
+                                                </Icon>
+                                              </ForwardRef(ChevronDown20)>
+                                            </defaultRenderMenuContent>
+                                          </a>
+                                          <ul
+                                            aria-label="Fusce nec tellus sed augue semper porta"
+                                            className="bx--header__menu"
                                           >
-                                            <li
+                                            <ForwardRef(HeaderMenuItem)
+                                              data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item0"
+                                              href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
+                                              key=".$IBM Developer"
+                                              refs={[Function]}
                                               role="none"
                                             >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                                element="a"
-                                                href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                                refs={[Function]}
-                                                tabIndex={0}
+                                              <li
+                                                role="none"
                                               >
-                                                <a
+                                                <Link
                                                   className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item0"
+                                                  data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item0"
+                                                  element="a"
                                                   href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
                                                   refs={[Function]}
                                                   tabIndex={0}
                                                 >
-                                                  <span
-                                                    className="bx--text-truncate--end"
+                                                  <a
+                                                    className="bx--header__menu-item"
+                                                    data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item0"
+                                                    href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
+                                                    refs={[Function]}
+                                                    tabIndex={0}
                                                   >
-                                                    IBM Developer
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </ForwardRef(HeaderMenuItem)>
-                                          <ForwardRef(HeaderMenuItem)
-                                            data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                            href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                            key=".$Blockchain"
-                                            refs={[Function]}
-                                            role="none"
-                                          >
-                                            <li
+                                                    <span
+                                                      className="bx--text-truncate--end"
+                                                    >
+                                                      IBM Developer
+                                                    </span>
+                                                  </a>
+                                                </Link>
+                                              </li>
+                                            </ForwardRef(HeaderMenuItem)>
+                                            <ForwardRef(HeaderMenuItem)
+                                              data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item1"
+                                              href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
+                                              key=".$Blockchain"
+                                              refs={[Function]}
                                               role="none"
                                             >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                                element="a"
-                                                href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                                refs={[Function]}
-                                                tabIndex={0}
+                                              <li
+                                                role="none"
                                               >
-                                                <a
+                                                <Link
                                                   className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item1"
+                                                  data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item1"
+                                                  element="a"
                                                   href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
                                                   refs={[Function]}
                                                   tabIndex={0}
                                                 >
-                                                  <span
-                                                    className="bx--text-truncate--end"
+                                                  <a
+                                                    className="bx--header__menu-item"
+                                                    data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item1"
+                                                    href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
+                                                    refs={[Function]}
+                                                    tabIndex={0}
                                                   >
-                                                    Blockchain
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </ForwardRef(HeaderMenuItem)>
-                                          <ForwardRef(HeaderMenuItem)
-                                            data-autoid="dds--masthead-eco__l1-nav0-item2"
-                                            href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                            key=".$Containers"
-                                            refs={[Function]}
-                                            role="none"
-                                          >
-                                            <li
+                                                    <span
+                                                      className="bx--text-truncate--end"
+                                                    >
+                                                      Blockchain
+                                                    </span>
+                                                  </a>
+                                                </Link>
+                                              </li>
+                                            </ForwardRef(HeaderMenuItem)>
+                                            <ForwardRef(HeaderMenuItem)
+                                              data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item2"
+                                              href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
+                                              key=".$Containers"
+                                              refs={[Function]}
                                               role="none"
                                             >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item2"
-                                                element="a"
-                                                href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                refs={[Function]}
-                                                tabIndex={0}
+                                              <li
+                                                role="none"
                                               >
-                                                <a
+                                                <Link
                                                   className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item2"
+                                                  data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item2"
+                                                  element="a"
                                                   href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
                                                   refs={[Function]}
                                                   tabIndex={0}
                                                 >
-                                                  <span
-                                                    className="bx--text-truncate--end"
+                                                  <a
+                                                    className="bx--header__menu-item"
+                                                    data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item2"
+                                                    href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
+                                                    refs={[Function]}
+                                                    tabIndex={0}
                                                   >
-                                                    Containers
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </ForwardRef(HeaderMenuItem)>
-                                          <ForwardRef(HeaderMenuItem)
-                                            data-autoid="dds--masthead-eco__l1-nav0-item3"
-                                            href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                            key=".$Analytics"
-                                            refs={[Function]}
-                                            role="none"
-                                          >
-                                            <li
+                                                    <span
+                                                      className="bx--text-truncate--end"
+                                                    >
+                                                      Containers
+                                                    </span>
+                                                  </a>
+                                                </Link>
+                                              </li>
+                                            </ForwardRef(HeaderMenuItem)>
+                                            <ForwardRef(HeaderMenuItem)
+                                              data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item3"
+                                              href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
+                                              key=".$Analytics"
+                                              refs={[Function]}
                                               role="none"
                                             >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item3"
-                                                element="a"
-                                                href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                refs={[Function]}
-                                                tabIndex={0}
+                                              <li
+                                                role="none"
                                               >
-                                                <a
+                                                <Link
                                                   className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item3"
+                                                  data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item3"
+                                                  element="a"
                                                   href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
                                                   refs={[Function]}
                                                   tabIndex={0}
                                                 >
-                                                  <span
-                                                    className="bx--text-truncate--end"
+                                                  <a
+                                                    className="bx--header__menu-item"
+                                                    data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item3"
+                                                    href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
+                                                    refs={[Function]}
+                                                    tabIndex={0}
                                                   >
-                                                    Analytics
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </ForwardRef(HeaderMenuItem)>
-                                        </ul>
-                                      </li>
-                                    </HeaderMenu>
-                                  </ForwardRef>
-                                  <ForwardRef(HeaderMenuItem)
-                                    aria-selected="false"
-                                    data-autoid="dds--masthead-eco__l1-nav4"
-                                    href="https://www.ibm.com/support/home/?lnk=msu_usen"
-                                    key=".$4"
-                                  >
-                                    <li>
-                                      <Link
-                                        aria-selected="false"
-                                        className="bx--header__menu-item"
-                                        data-autoid="dds--masthead-eco__l1-nav4"
-                                        element="a"
-                                        href="https://www.ibm.com/support/home/?lnk=msu_usen"
-                                        tabIndex={0}
-                                      >
-                                        <a
+                                                    <span
+                                                      className="bx--text-truncate--end"
+                                                    >
+                                                      Analytics
+                                                    </span>
+                                                  </a>
+                                                </Link>
+                                              </li>
+                                            </ForwardRef(HeaderMenuItem)>
+                                          </ul>
+                                        </li>
+                                      </HeaderMenu>
+                                    </ForwardRef>
+                                    <ForwardRef(HeaderMenuItem)
+                                      aria-selected="false"
+                                      data-autoid="dds--masthead-default__l0-nav4"
+                                      href="https://www.ibm.com/support/home/?lnk=msu_usen"
+                                      key=".$4"
+                                    >
+                                      <li>
+                                        <Link
                                           aria-selected="false"
                                           className="bx--header__menu-item"
-                                          data-autoid="dds--masthead-eco__l1-nav4"
+                                          data-autoid="dds--masthead-default__l0-nav4"
+                                          element="a"
                                           href="https://www.ibm.com/support/home/?lnk=msu_usen"
                                           tabIndex={0}
                                         >
-                                          <span
-                                            className="bx--text-truncate--end"
+                                          <a
+                                            aria-selected="false"
+                                            className="bx--header__menu-item"
+                                            data-autoid="dds--masthead-default__l0-nav4"
+                                            href="https://www.ibm.com/support/home/?lnk=msu_usen"
+                                            tabIndex={0}
                                           >
-                                            Sed cursus ante dapibus diam
-                                          </span>
-                                        </a>
-                                      </Link>
-                                    </li>
-                                  </ForwardRef(HeaderMenuItem)>
-                                </ul>
-                              </nav>
-                            </HeaderNavigation>
-                          </div>
-                          <div
-                            className="bx--header__nav-caret-left-container"
-                            hidden={true}
-                          >
-                            <button
-                              aria-hidden="true"
-                              aria-label="Masthead left caret"
-                              className="bx--header__nav-caret-left"
-                              onClick={[Function]}
-                              tabIndex="-1"
+                                            <span
+                                              className="bx--text-truncate--end"
+                                            >
+                                              Sed cursus ante dapibus diam
+                                            </span>
+                                          </a>
+                                        </Link>
+                                      </li>
+                                    </ForwardRef(HeaderMenuItem)>
+                                  </ul>
+                                </nav>
+                              </HeaderNavigation>
+                            </div>
+                            <div
+                              className="bx--header__nav-caret-left-container"
+                              hidden={true}
                             >
-                              <ForwardRef(CaretLeft20)>
-                                <Icon
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
+                              <button
+                                aria-hidden="true"
+                                aria-label="Masthead left caret"
+                                className="bx--header__nav-caret-left"
+                                onClick={[Function]}
+                                tabIndex="-1"
+                              >
+                                <ForwardRef(CaretLeft20)>
+                                  <Icon
                                     fill="currentColor"
-                                    focusable="false"
                                     height={20}
                                     preserveAspectRatio="xMidYMid meet"
                                     viewBox="0 0 32 32"
                                     width={20}
                                     xmlns="http://www.w3.org/2000/svg"
                                   >
-                                    <path
-                                      d="M20 24L10 16 20 8z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(CaretLeft20)>
-                            </button>
-                            <div
-                              className="bx--header__nav-caret-left-gradient"
-                            />
-                          </div>
-                          <div
-                            className="bx--header__nav-caret-right-container"
-                            hidden={true}
-                          >
+                                    <svg
+                                      aria-hidden={true}
+                                      fill="currentColor"
+                                      focusable="false"
+                                      height={20}
+                                      preserveAspectRatio="xMidYMid meet"
+                                      viewBox="0 0 32 32"
+                                      width={20}
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M20 24L10 16 20 8z"
+                                      />
+                                    </svg>
+                                  </Icon>
+                                </ForwardRef(CaretLeft20)>
+                              </button>
+                              <div
+                                className="bx--header__nav-caret-left-gradient"
+                              />
+                            </div>
                             <div
-                              className="bx--header__nav-caret-right-gradient"
-                            />
-                            <button
-                              aria-hidden="true"
-                              aria-label="Masthead right caret"
-                              className="bx--header__nav-caret-right"
-                              onClick={[Function]}
-                              tabIndex="-1"
+                              className="bx--header__nav-caret-right-container"
+                              hidden={true}
                             >
-                              <ForwardRef(CaretRight20)>
-                                <Icon
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
+                              <div
+                                className="bx--header__nav-caret-right-gradient"
+                              />
+                              <button
+                                aria-hidden="true"
+                                aria-label="Masthead right caret"
+                                className="bx--header__nav-caret-right"
+                                onClick={[Function]}
+                                tabIndex="-1"
+                              >
+                                <ForwardRef(CaretRight20)>
+                                  <Icon
                                     fill="currentColor"
-                                    focusable="false"
                                     height={20}
                                     preserveAspectRatio="xMidYMid meet"
                                     viewBox="0 0 32 32"
                                     width={20}
                                     xmlns="http://www.w3.org/2000/svg"
                                   >
-                                    <path
-                                      d="M12 8L22 16 12 24z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(CaretRight20)>
-                            </button>
+                                    <svg
+                                      aria-hidden={true}
+                                      fill="currentColor"
+                                      focusable="false"
+                                      height={20}
+                                      preserveAspectRatio="xMidYMid meet"
+                                      viewBox="0 0 32 32"
+                                      width={20}
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M12 8L22 16 12 24z"
+                                      />
+                                    </svg>
+                                  </Icon>
+                                </ForwardRef(CaretRight20)>
+                              </button>
+                            </div>
+                          </div>
+                        </HeaderNavContainer>
+                        <div
+                          className="bx--masthead__overlay"
+                        />
+                      </MastheadTopNav>
+                      <MastheadSearch
+                        customProfileLogin={null}
+                        initialSearchTerm=""
+                        isSearchActive={false}
+                        navType="default"
+                        onChangeSearchActive={[Function]}
+                        placeHolderText="Search all of IBM"
+                        renderValue={3}
+                        searchOpenOnload={false}
+                      >
+                        <div
+                          className="bx--masthead__search"
+                          data-autoid="dds--masthead__search"
+                        >
+                          <div
+                            className="bx--header__search--actions"
+                          >
+                            <HeaderGlobalAction
+                              aria-label="Open IBM search field"
+                              className="bx--header__search--search"
+                              data-autoid="dds--masthead-default__l0-search"
+                              onClick={[Function]}
+                              tabIndex="0"
+                            >
+                              <Button
+                                aria-label="Open IBM search field"
+                                className="bx--header__search--search bx--header__action"
+                                dangerDescription="danger"
+                                data-autoid="dds--masthead-default__l0-search"
+                                disabled={false}
+                                hasIconOnly={true}
+                                iconDescription="Open IBM search field"
+                                isExpressive={false}
+                                kind="primary"
+                                onClick={[Function]}
+                                size="default"
+                                tabIndex="0"
+                                tooltipAlignment="center"
+                                tooltipPosition="bottom"
+                                type="button"
+                              >
+                                <button
+                                  aria-describedby={null}
+                                  aria-label="Open IBM search field"
+                                  aria-pressed={null}
+                                  className="bx--header__search--search bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
+                                  data-autoid="dds--masthead-default__l0-search"
+                                  disabled={false}
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onMouseEnter={[Function]}
+                                  onMouseLeave={[Function]}
+                                  tabIndex="0"
+                                  type="button"
+                                >
+                                  <div
+                                    className="bx--assistive-text"
+                                    onMouseEnter={[Function]}
+                                  >
+                                    Open IBM search field
+                                  </div>
+                                  <ForwardRef(Search20)>
+                                    <Icon
+                                      fill="currentColor"
+                                      height={20}
+                                      preserveAspectRatio="xMidYMid meet"
+                                      viewBox="0 0 32 32"
+                                      width={20}
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        fill="currentColor"
+                                        focusable="false"
+                                        height={20}
+                                        preserveAspectRatio="xMidYMid meet"
+                                        viewBox="0 0 32 32"
+                                        width={20}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
+                                        />
+                                      </svg>
+                                    </Icon>
+                                  </ForwardRef(Search20)>
+                                </button>
+                              </Button>
+                            </HeaderGlobalAction>
+                            <HeaderGlobalAction
+                              aria-label="Close"
+                              className="bx--header__search--close"
+                              data-autoid="dds--masthead-default__l0-search--close"
+                              onClick={[Function]}
+                            >
+                              <Button
+                                aria-label="Close"
+                                className="bx--header__search--close bx--header__action"
+                                dangerDescription="danger"
+                                data-autoid="dds--masthead-default__l0-search--close"
+                                disabled={false}
+                                hasIconOnly={true}
+                                iconDescription="Close"
+                                isExpressive={false}
+                                kind="primary"
+                                onClick={[Function]}
+                                size="default"
+                                tabIndex={0}
+                                tooltipAlignment="center"
+                                tooltipPosition="bottom"
+                                type="button"
+                              >
+                                <button
+                                  aria-describedby={null}
+                                  aria-label="Close"
+                                  aria-pressed={null}
+                                  className="bx--header__search--close bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
+                                  data-autoid="dds--masthead-default__l0-search--close"
+                                  disabled={false}
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onMouseEnter={[Function]}
+                                  onMouseLeave={[Function]}
+                                  tabIndex={0}
+                                  type="button"
+                                >
+                                  <div
+                                    className="bx--assistive-text"
+                                    onMouseEnter={[Function]}
+                                  >
+                                    Close
+                                  </div>
+                                  <ForwardRef(Close20)>
+                                    <Icon
+                                      fill="currentColor"
+                                      height={20}
+                                      preserveAspectRatio="xMidYMid meet"
+                                      viewBox="0 0 32 32"
+                                      width={20}
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        fill="currentColor"
+                                        focusable="false"
+                                        height={20}
+                                        preserveAspectRatio="xMidYMid meet"
+                                        viewBox="0 0 32 32"
+                                        width={20}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
+                                        />
+                                      </svg>
+                                    </Icon>
+                                  </ForwardRef(Close20)>
+                                </button>
+                              </Button>
+                            </HeaderGlobalAction>
                           </div>
                         </div>
-                      </HeaderNavContainer>
+                      </MastheadSearch>
                     </div>
-                  </div>
-                </MastheadL1>
+                    <HeaderGlobalBar
+                      className="bx--header__profile"
+                    >
+                      <div
+                        className="bx--header__global bx--header__profile"
+                      >
+                        <MastheadProfile
+                          navType="default"
+                          overflowMenuItemProps={
+                            Object {
+                              "wrapperClassName": "bx--masthead__profile-item",
+                            }
+                          }
+                          overflowMenuProps={
+                            Object {
+                              "ariaLabel": "User Profile",
+                              "data-autoid": "dds--masthead-default__l0-account",
+                              "flipped": true,
+                              "onOpen": [Function],
+                              "renderIcon": [Function],
+                              "style": Object {
+                                "width": "3rem",
+                              },
+                            }
+                          }
+                          profileMenu={Array []}
+                        >
+                          <ForwardRef(OverflowMenu)
+                            ariaLabel="User Profile"
+                            className="bx--header__action"
+                            data-autoid="dds--masthead-default__l0-account"
+                            flipped={true}
+                            onOpen={[Function]}
+                            renderIcon={[Function]}
+                            style={
+                              Object {
+                                "width": "3rem",
+                              }
+                            }
+                          >
+                            <OverflowMenu
+                              ariaLabel="User Profile"
+                              className="bx--header__action"
+                              data-autoid="dds--masthead-default__l0-account"
+                              direction="bottom"
+                              flipped={true}
+                              iconDescription="open and close list of options"
+                              innerRef={null}
+                              light={false}
+                              menuOffset={[Function]}
+                              menuOffsetFlip={[Function]}
+                              onClick={[Function]}
+                              onClose={[Function]}
+                              onKeyDown={[Function]}
+                              onOpen={[Function]}
+                              open={false}
+                              renderIcon={[Function]}
+                              selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
+                              style={
+                                Object {
+                                  "width": "3rem",
+                                }
+                              }
+                            >
+                              <ClickListener
+                                onClickOutside={[Function]}
+                              >
+                                <button
+                                  aria-expanded={false}
+                                  aria-haspopup={true}
+                                  aria-label="User Profile"
+                                  className="bx--header__action bx--overflow-menu"
+                                  data-autoid="dds--masthead-default__l0-account"
+                                  onClick={[Function]}
+                                  onClose={[Function]}
+                                  onKeyDown={[Function]}
+                                  open={false}
+                                  style={
+                                    Object {
+                                      "width": "3rem",
+                                    }
+                                  }
+                                  type="button"
+                                >
+                                  <renderIcon
+                                    aria-label="open and close list of options"
+                                    className="bx--overflow-menu__icon"
+                                    onClick={[Function]}
+                                    onKeyDown={[Function]}
+                                  >
+                                    <ForwardRef(User20)>
+                                      <Icon
+                                        fill="currentColor"
+                                        height={20}
+                                        preserveAspectRatio="xMidYMid meet"
+                                        viewBox="0 0 32 32"
+                                        width={20}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <svg
+                                          aria-hidden={true}
+                                          fill="currentColor"
+                                          focusable="false"
+                                          height={20}
+                                          preserveAspectRatio="xMidYMid meet"
+                                          viewBox="0 0 32 32"
+                                          width={20}
+                                          xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                          <path
+                                            d="M16 4a5 5 0 11-5 5 5 5 0 015-5m0-2a7 7 0 107 7A7 7 0 0016 2zM26 30H24V25a5 5 0 00-5-5H13a5 5 0 00-5 5v5H6V25a7 7 0 017-7h6a7 7 0 017 7z"
+                                          />
+                                        </svg>
+                                      </Icon>
+                                    </ForwardRef(User20)>
+                                  </renderIcon>
+                                </button>
+                              </ClickListener>
+                            </OverflowMenu>
+                          </ForwardRef(OverflowMenu)>
+                        </MastheadProfile>
+                      </div>
+                    </HeaderGlobalBar>
+                  </header>
+                </Header>
               </div>
             </div>
           </render>
@@ -132431,7 +132431,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
 </Container>
 `;
 
-exports[`Storyshots Components|Masthead With Platform 1`] = `
+exports[`Storyshots Components|Masthead With platform 1`] = `
 <Container
   parameters={
     Object {
@@ -133753,7 +133753,7 @@ exports[`Storyshots Components|Quote Default 1`] = `
 </Container>
 `;
 
-exports[`Storyshots Components|Table of contents Dynamic Items 1`] = `
+exports[`Storyshots Components|Table of contents Dynamic items 1`] = `
 <Container
   parameters={
     Object {
@@ -134110,7 +134110,7 @@ exports[`Storyshots Components|Table of contents Dynamic Items 1`] = `
 </Container>
 `;
 
-exports[`Storyshots Components|Table of contents Manually define Menu Items 1`] = `
+exports[`Storyshots Components|Table of contents Manually define menu items 1`] = `
 <Container
   parameters={
     Object {
@@ -134422,7 +134422,7 @@ exports[`Storyshots Components|Table of contents Manually define Menu Items 1`]
 </Container>
 `;
 
-exports[`Storyshots Components|Table of contents With Heading Content 1`] = `
+exports[`Storyshots Components|Table of contents With heading content 1`] = `
 <Container
   parameters={
     Object {
@@ -135039,7 +135039,7 @@ exports[`Storyshots Components|Table of contents With Heading Content 1`] = `
 </Container>
 `;
 
-exports[`Storyshots Components|Tabs Extended Default 1`] = `
+exports[`Storyshots Components|Tabs extended Default 1`] = `
 <Container
   parameters={
     Object {
@@ -135115,7 +135115,7 @@ exports[`Storyshots Components|Tabs Extended Default 1`] = `
 </Container>
 `;
 
-exports[`Storyshots Components|Tabs Extended Media Default 1`] = `
+exports[`Storyshots Components|Tabs extended media Default 1`] = `
 <Container
   parameters={
     Object {