diff --git a/packages/shared-ux/chrome/navigation/mocks/src/jest.ts b/packages/shared-ux/chrome/navigation/mocks/src/jest.ts
index 4fd298811b5d8..d2e7f9b77ca22 100644
--- a/packages/shared-ux/chrome/navigation/mocks/src/jest.ts
+++ b/packages/shared-ux/chrome/navigation/mocks/src/jest.ts
@@ -29,5 +29,19 @@ export const getServicesMock = ({
     navigateToUrl,
     onProjectNavigationChange: jest.fn(),
     activeNodes$: of(activeNodes),
+    cloudLinks: {
+      billingAndSub: {
+        title: 'Mock Billing & Subscriptions',
+        href: 'https://cloud.elastic.co/account/billing',
+      },
+      performance: {
+        title: 'Mock Performance',
+        href: 'https://cloud.elastic.co/deployments/123456789/performance',
+      },
+      userAndRoles: {
+        title: 'Mock Users & Roles',
+        href: 'https://cloud.elastic.co/deployments/123456789/security/users',
+      },
+    },
   };
 };
diff --git a/packages/shared-ux/chrome/navigation/src/ui/__snapshots__/default_navigation.test.tsx.snap b/packages/shared-ux/chrome/navigation/src/ui/__snapshots__/default_navigation.test.tsx.snap
new file mode 100644
index 0000000000000..232d6b7dc610e
--- /dev/null
+++ b/packages/shared-ux/chrome/navigation/src/ui/__snapshots__/default_navigation.test.tsx.snap
@@ -0,0 +1,678 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DefaultNavigation /> builds the full navigation tree when only custom project is provided reading the title from config or deeplink 1`] = `
+Array [
+  Object {
+    "children": Array [
+      Object {
+        "children": undefined,
+        "deepLink": undefined,
+        "href": undefined,
+        "id": "item1",
+        "isActive": false,
+        "path": Array [
+          "group1",
+          "item1",
+        ],
+        "renderItem": undefined,
+        "title": "Item 1",
+      },
+      Object {
+        "children": undefined,
+        "deepLink": Object {
+          "baseUrl": "",
+          "href": "",
+          "id": "item2",
+          "title": "Title from deeplink!",
+          "url": "",
+        },
+        "href": undefined,
+        "id": "item2",
+        "isActive": false,
+        "path": Array [
+          "group1",
+          "item2",
+        ],
+        "renderItem": undefined,
+        "title": "Title from deeplink!",
+      },
+      Object {
+        "children": undefined,
+        "deepLink": Object {
+          "baseUrl": "",
+          "href": "",
+          "id": "item2",
+          "title": "Title from deeplink!",
+          "url": "",
+        },
+        "href": undefined,
+        "id": "item3",
+        "isActive": false,
+        "path": Array [
+          "group1",
+          "item3",
+        ],
+        "renderItem": undefined,
+        "title": "Deeplink title overriden",
+      },
+    ],
+    "deepLink": undefined,
+    "href": undefined,
+    "id": "group1",
+    "isActive": false,
+    "path": Array [
+      "group1",
+    ],
+    "title": "Group 1",
+    "type": "navGroup",
+  },
+  Object {
+    "children": Array [
+      Object {
+        "children": Array [
+          Object {
+            "children": undefined,
+            "deepLink": Object {
+              "baseUrl": "/mocked",
+              "href": "http://mocked/discover",
+              "id": "discover",
+              "title": "Deeplink discover",
+              "url": "/mocked/discover",
+            },
+            "href": undefined,
+            "id": "discover",
+            "isActive": false,
+            "path": Array [
+              "rootNav:analytics",
+              "root",
+              "discover",
+            ],
+            "renderItem": undefined,
+            "title": "Deeplink discover",
+          },
+          Object {
+            "children": undefined,
+            "deepLink": Object {
+              "baseUrl": "/mocked",
+              "href": "http://mocked/dashboards",
+              "id": "dashboards",
+              "title": "Deeplink dashboards",
+              "url": "/mocked/dashboards",
+            },
+            "href": undefined,
+            "id": "dashboards",
+            "isActive": false,
+            "path": Array [
+              "rootNav:analytics",
+              "root",
+              "dashboards",
+            ],
+            "renderItem": undefined,
+            "title": "Deeplink dashboards",
+          },
+          Object {
+            "children": undefined,
+            "deepLink": Object {
+              "baseUrl": "/mocked",
+              "href": "http://mocked/visualize",
+              "id": "visualize",
+              "title": "Deeplink visualize",
+              "url": "/mocked/visualize",
+            },
+            "href": undefined,
+            "id": "visualize",
+            "isActive": false,
+            "path": Array [
+              "rootNav:analytics",
+              "root",
+              "visualize",
+            ],
+            "renderItem": undefined,
+            "title": "Deeplink visualize",
+          },
+        ],
+        "deepLink": undefined,
+        "href": undefined,
+        "id": "root",
+        "isActive": false,
+        "path": Array [
+          "rootNav:analytics",
+          "root",
+        ],
+        "title": "",
+      },
+    ],
+    "deepLink": undefined,
+    "href": undefined,
+    "icon": "stats",
+    "id": "rootNav:analytics",
+    "isActive": false,
+    "path": Array [
+      "rootNav:analytics",
+    ],
+    "title": "Data exploration",
+    "type": "navGroup",
+  },
+  Object {
+    "children": Array [
+      Object {
+        "children": Array [
+          Object {
+            "children": undefined,
+            "deepLink": Object {
+              "baseUrl": "/mocked",
+              "href": "http://mocked/ml:overview",
+              "id": "ml:overview",
+              "title": "Deeplink ml:overview",
+              "url": "/mocked/ml:overview",
+            },
+            "href": undefined,
+            "id": "ml:overview",
+            "isActive": false,
+            "path": Array [
+              "rootNav:ml",
+              "root",
+              "ml:overview",
+            ],
+            "renderItem": undefined,
+            "title": "Deeplink ml:overview",
+          },
+          Object {
+            "children": undefined,
+            "deepLink": Object {
+              "baseUrl": "/mocked",
+              "href": "http://mocked/ml:notifications",
+              "id": "ml:notifications",
+              "title": "Deeplink ml:notifications",
+              "url": "/mocked/ml:notifications",
+            },
+            "href": undefined,
+            "id": "ml:notifications",
+            "isActive": false,
+            "path": Array [
+              "rootNav:ml",
+              "root",
+              "ml:notifications",
+            ],
+            "renderItem": undefined,
+            "title": "Deeplink ml:notifications",
+          },
+        ],
+        "deepLink": undefined,
+        "href": undefined,
+        "id": "root",
+        "isActive": false,
+        "path": Array [
+          "rootNav:ml",
+          "root",
+        ],
+        "title": "",
+      },
+      Object {
+        "children": Array [
+          Object {
+            "children": undefined,
+            "deepLink": Object {
+              "baseUrl": "/mocked",
+              "href": "http://mocked/ml:anomalyDetection",
+              "id": "ml:anomalyDetection",
+              "title": "Deeplink ml:anomalyDetection",
+              "url": "/mocked/ml:anomalyDetection",
+            },
+            "href": undefined,
+            "id": "ml:anomalyDetection",
+            "isActive": false,
+            "path": Array [
+              "rootNav:ml",
+              "anomaly_detection",
+              "ml:anomalyDetection",
+            ],
+            "renderItem": undefined,
+            "title": "Jobs",
+          },
+          Object {
+            "children": undefined,
+            "deepLink": Object {
+              "baseUrl": "/mocked",
+              "href": "http://mocked/ml:anomalyExplorer",
+              "id": "ml:anomalyExplorer",
+              "title": "Deeplink ml:anomalyExplorer",
+              "url": "/mocked/ml:anomalyExplorer",
+            },
+            "href": undefined,
+            "id": "ml:anomalyExplorer",
+            "isActive": false,
+            "path": Array [
+              "rootNav:ml",
+              "anomaly_detection",
+              "ml:anomalyExplorer",
+            ],
+            "renderItem": undefined,
+            "title": "Deeplink ml:anomalyExplorer",
+          },
+          Object {
+            "children": undefined,
+            "deepLink": Object {
+              "baseUrl": "/mocked",
+              "href": "http://mocked/ml:singleMetricViewer",
+              "id": "ml:singleMetricViewer",
+              "title": "Deeplink ml:singleMetricViewer",
+              "url": "/mocked/ml:singleMetricViewer",
+            },
+            "href": undefined,
+            "id": "ml:singleMetricViewer",
+            "isActive": false,
+            "path": Array [
+              "rootNav:ml",
+              "anomaly_detection",
+              "ml:singleMetricViewer",
+            ],
+            "renderItem": undefined,
+            "title": "Deeplink ml:singleMetricViewer",
+          },
+          Object {
+            "children": undefined,
+            "deepLink": Object {
+              "baseUrl": "/mocked",
+              "href": "http://mocked/ml:settings",
+              "id": "ml:settings",
+              "title": "Deeplink ml:settings",
+              "url": "/mocked/ml:settings",
+            },
+            "href": undefined,
+            "id": "ml:settings",
+            "isActive": false,
+            "path": Array [
+              "rootNav:ml",
+              "anomaly_detection",
+              "ml:settings",
+            ],
+            "renderItem": undefined,
+            "title": "Deeplink ml:settings",
+          },
+        ],
+        "deepLink": undefined,
+        "href": undefined,
+        "id": "anomaly_detection",
+        "isActive": false,
+        "path": Array [
+          "rootNav:ml",
+          "anomaly_detection",
+        ],
+        "title": "Anomaly Detection",
+      },
+      Object {
+        "children": Array [
+          Object {
+            "children": undefined,
+            "deepLink": Object {
+              "baseUrl": "/mocked",
+              "href": "http://mocked/ml:dataFrameAnalytics",
+              "id": "ml:dataFrameAnalytics",
+              "title": "Deeplink ml:dataFrameAnalytics",
+              "url": "/mocked/ml:dataFrameAnalytics",
+            },
+            "href": undefined,
+            "id": "ml:dataFrameAnalytics",
+            "isActive": false,
+            "path": Array [
+              "rootNav:ml",
+              "data_frame_analytics",
+              "ml:dataFrameAnalytics",
+            ],
+            "renderItem": undefined,
+            "title": "Jobs",
+          },
+          Object {
+            "children": undefined,
+            "deepLink": Object {
+              "baseUrl": "/mocked",
+              "href": "http://mocked/ml:resultExplorer",
+              "id": "ml:resultExplorer",
+              "title": "Deeplink ml:resultExplorer",
+              "url": "/mocked/ml:resultExplorer",
+            },
+            "href": undefined,
+            "id": "ml:resultExplorer",
+            "isActive": false,
+            "path": Array [
+              "rootNav:ml",
+              "data_frame_analytics",
+              "ml:resultExplorer",
+            ],
+            "renderItem": undefined,
+            "title": "Deeplink ml:resultExplorer",
+          },
+          Object {
+            "children": undefined,
+            "deepLink": Object {
+              "baseUrl": "/mocked",
+              "href": "http://mocked/ml:analyticsMap",
+              "id": "ml:analyticsMap",
+              "title": "Deeplink ml:analyticsMap",
+              "url": "/mocked/ml:analyticsMap",
+            },
+            "href": undefined,
+            "id": "ml:analyticsMap",
+            "isActive": false,
+            "path": Array [
+              "rootNav:ml",
+              "data_frame_analytics",
+              "ml:analyticsMap",
+            ],
+            "renderItem": undefined,
+            "title": "Deeplink ml:analyticsMap",
+          },
+        ],
+        "deepLink": undefined,
+        "href": undefined,
+        "id": "data_frame_analytics",
+        "isActive": false,
+        "path": Array [
+          "rootNav:ml",
+          "data_frame_analytics",
+        ],
+        "title": "Data Frame Analytics",
+      },
+      Object {
+        "children": Array [
+          Object {
+            "children": undefined,
+            "deepLink": Object {
+              "baseUrl": "/mocked",
+              "href": "http://mocked/ml:nodesOverview",
+              "id": "ml:nodesOverview",
+              "title": "Deeplink ml:nodesOverview",
+              "url": "/mocked/ml:nodesOverview",
+            },
+            "href": undefined,
+            "id": "ml:nodesOverview",
+            "isActive": false,
+            "path": Array [
+              "rootNav:ml",
+              "model_management",
+              "ml:nodesOverview",
+            ],
+            "renderItem": undefined,
+            "title": "Deeplink ml:nodesOverview",
+          },
+          Object {
+            "children": undefined,
+            "deepLink": Object {
+              "baseUrl": "/mocked",
+              "href": "http://mocked/ml:nodes",
+              "id": "ml:nodes",
+              "title": "Deeplink ml:nodes",
+              "url": "/mocked/ml:nodes",
+            },
+            "href": undefined,
+            "id": "ml:nodes",
+            "isActive": false,
+            "path": Array [
+              "rootNav:ml",
+              "model_management",
+              "ml:nodes",
+            ],
+            "renderItem": undefined,
+            "title": "Deeplink ml:nodes",
+          },
+        ],
+        "deepLink": undefined,
+        "href": undefined,
+        "id": "model_management",
+        "isActive": false,
+        "path": Array [
+          "rootNav:ml",
+          "model_management",
+        ],
+        "title": "Model Management",
+      },
+      Object {
+        "children": Array [
+          Object {
+            "children": undefined,
+            "deepLink": Object {
+              "baseUrl": "/mocked",
+              "href": "http://mocked/ml:fileUpload",
+              "id": "ml:fileUpload",
+              "title": "Deeplink ml:fileUpload",
+              "url": "/mocked/ml:fileUpload",
+            },
+            "href": undefined,
+            "id": "ml:fileUpload",
+            "isActive": false,
+            "path": Array [
+              "rootNav:ml",
+              "data_visualizer",
+              "ml:fileUpload",
+            ],
+            "renderItem": undefined,
+            "title": "File",
+          },
+          Object {
+            "children": undefined,
+            "deepLink": Object {
+              "baseUrl": "/mocked",
+              "href": "http://mocked/ml:indexDataVisualizer",
+              "id": "ml:indexDataVisualizer",
+              "title": "Deeplink ml:indexDataVisualizer",
+              "url": "/mocked/ml:indexDataVisualizer",
+            },
+            "href": undefined,
+            "id": "ml:indexDataVisualizer",
+            "isActive": false,
+            "path": Array [
+              "rootNav:ml",
+              "data_visualizer",
+              "ml:indexDataVisualizer",
+            ],
+            "renderItem": undefined,
+            "title": "Data view",
+          },
+        ],
+        "deepLink": undefined,
+        "href": undefined,
+        "id": "data_visualizer",
+        "isActive": false,
+        "path": Array [
+          "rootNav:ml",
+          "data_visualizer",
+        ],
+        "title": "Data Visualizer",
+      },
+      Object {
+        "children": Array [
+          Object {
+            "children": undefined,
+            "deepLink": Object {
+              "baseUrl": "/mocked",
+              "href": "http://mocked/ml:explainLogRateSpikes",
+              "id": "ml:explainLogRateSpikes",
+              "title": "Deeplink ml:explainLogRateSpikes",
+              "url": "/mocked/ml:explainLogRateSpikes",
+            },
+            "href": undefined,
+            "id": "ml:explainLogRateSpikes",
+            "isActive": false,
+            "path": Array [
+              "rootNav:ml",
+              "aiops_labs",
+              "ml:explainLogRateSpikes",
+            ],
+            "renderItem": undefined,
+            "title": "Deeplink ml:explainLogRateSpikes",
+          },
+          Object {
+            "children": undefined,
+            "deepLink": Object {
+              "baseUrl": "/mocked",
+              "href": "http://mocked/ml:logPatternAnalysis",
+              "id": "ml:logPatternAnalysis",
+              "title": "Deeplink ml:logPatternAnalysis",
+              "url": "/mocked/ml:logPatternAnalysis",
+            },
+            "href": undefined,
+            "id": "ml:logPatternAnalysis",
+            "isActive": false,
+            "path": Array [
+              "rootNav:ml",
+              "aiops_labs",
+              "ml:logPatternAnalysis",
+            ],
+            "renderItem": undefined,
+            "title": "Deeplink ml:logPatternAnalysis",
+          },
+          Object {
+            "children": undefined,
+            "deepLink": Object {
+              "baseUrl": "/mocked",
+              "href": "http://mocked/ml:changePointDetections",
+              "id": "ml:changePointDetections",
+              "title": "Deeplink ml:changePointDetections",
+              "url": "/mocked/ml:changePointDetections",
+            },
+            "href": undefined,
+            "id": "ml:changePointDetections",
+            "isActive": false,
+            "path": Array [
+              "rootNav:ml",
+              "aiops_labs",
+              "ml:changePointDetections",
+            ],
+            "renderItem": undefined,
+            "title": "Deeplink ml:changePointDetections",
+          },
+        ],
+        "deepLink": undefined,
+        "href": undefined,
+        "id": "aiops_labs",
+        "isActive": false,
+        "path": Array [
+          "rootNav:ml",
+          "aiops_labs",
+        ],
+        "title": "AIOps labs",
+      },
+    ],
+    "deepLink": undefined,
+    "href": undefined,
+    "icon": "machineLearningApp",
+    "id": "rootNav:ml",
+    "isActive": false,
+    "path": Array [
+      "rootNav:ml",
+    ],
+    "title": "Machine Learning",
+    "type": "navGroup",
+  },
+  Object {
+    "children": undefined,
+    "deepLink": Object {
+      "baseUrl": "/mocked",
+      "href": "http://mocked/dev_tools",
+      "id": "dev_tools",
+      "title": "Deeplink dev_tools",
+      "url": "/mocked/dev_tools",
+    },
+    "href": undefined,
+    "icon": "editorCodeBlock",
+    "id": "devTools",
+    "isActive": false,
+    "path": Array [
+      "devTools",
+    ],
+    "title": "Developer tools",
+    "type": "navGroup",
+  },
+  Object {
+    "breadcrumbStatus": "hidden",
+    "children": Array [
+      Object {
+        "children": Array [
+          Object {
+            "children": undefined,
+            "deepLink": Object {
+              "baseUrl": "/mocked",
+              "href": "http://mocked/management",
+              "id": "management",
+              "title": "Deeplink management",
+              "url": "/mocked/management",
+            },
+            "href": undefined,
+            "id": "management",
+            "isActive": false,
+            "path": Array [
+              "project_settings_project_nav",
+              "settings",
+              "management",
+            ],
+            "renderItem": undefined,
+            "title": "Management",
+          },
+          Object {
+            "children": undefined,
+            "deepLink": undefined,
+            "href": "https://cloud.elastic.co/deployments/123456789/security/users",
+            "id": "cloudLinkUserAndRoles",
+            "isActive": false,
+            "path": Array [
+              "project_settings_project_nav",
+              "settings",
+              "cloudLinkUserAndRoles",
+            ],
+            "renderItem": undefined,
+            "title": "Mock Users & Roles",
+          },
+          Object {
+            "children": undefined,
+            "deepLink": undefined,
+            "href": "https://cloud.elastic.co/deployments/123456789/performance",
+            "id": "cloudLinkPerformance",
+            "isActive": false,
+            "path": Array [
+              "project_settings_project_nav",
+              "settings",
+              "cloudLinkPerformance",
+            ],
+            "renderItem": undefined,
+            "title": "Mock Performance",
+          },
+          Object {
+            "children": undefined,
+            "deepLink": undefined,
+            "href": "https://cloud.elastic.co/account/billing",
+            "id": "cloudLinkBilling",
+            "isActive": false,
+            "path": Array [
+              "project_settings_project_nav",
+              "settings",
+              "cloudLinkBilling",
+            ],
+            "renderItem": undefined,
+            "title": "Mock Billing & Subscriptions",
+          },
+        ],
+        "deepLink": undefined,
+        "href": undefined,
+        "id": "settings",
+        "isActive": false,
+        "path": Array [
+          "project_settings_project_nav",
+          "settings",
+        ],
+        "title": "",
+      },
+    ],
+    "deepLink": undefined,
+    "href": undefined,
+    "icon": "gear",
+    "id": "project_settings_project_nav",
+    "isActive": false,
+    "path": Array [
+      "project_settings_project_nav",
+    ],
+    "title": "Project settings",
+    "type": "navGroup",
+  },
+]
+`;
diff --git a/packages/shared-ux/chrome/navigation/src/ui/components/navigation.test.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/navigation.test.tsx
index 1c9655eaf27ce..fce8f41734014 100644
--- a/packages/shared-ux/chrome/navigation/src/ui/components/navigation.test.tsx
+++ b/packages/shared-ux/chrome/navigation/src/ui/components/navigation.test.tsx
@@ -735,4 +735,36 @@ describe('<Navigation />', () => {
       );
     });
   });
+
+  describe('cloud links', () => {
+    test('render the cloud link', async () => {
+      const onProjectNavigationChange = jest.fn();
+
+      const { findByTestId } = render(
+        <NavigationProvider {...services} onProjectNavigationChange={onProjectNavigationChange}>
+          <Navigation>
+            <Navigation.Group id="group1">
+              <Navigation.Item id="cloudLink1" cloudLink="userAndRoles" />
+              <Navigation.Item id="cloudLink2" cloudLink="performance" />
+              <Navigation.Item id="cloudLink3" cloudLink="billingAndSub" />
+            </Navigation.Group>
+          </Navigation>
+        </NavigationProvider>
+      );
+
+      expect(await findByTestId('nav-item-group1.cloudLink1')).toBeVisible();
+      expect(await findByTestId('nav-item-group1.cloudLink2')).toBeVisible();
+      expect(await findByTestId('nav-item-group1.cloudLink3')).toBeVisible();
+
+      expect(await (await findByTestId('nav-item-group1.cloudLink1')).textContent).toBe(
+        'Mock Users & RolesExternal link'
+      );
+      expect(await (await findByTestId('nav-item-group1.cloudLink2')).textContent).toBe(
+        'Mock PerformanceExternal link'
+      );
+      expect(await (await findByTestId('nav-item-group1.cloudLink3')).textContent).toBe(
+        'Mock Billing & SubscriptionsExternal link'
+      );
+    });
+  });
 });
diff --git a/packages/shared-ux/chrome/navigation/src/ui/default_navigation.test.tsx b/packages/shared-ux/chrome/navigation/src/ui/default_navigation.test.tsx
index d7eb8d75a7b56..ad6f2caf16c0c 100644
--- a/packages/shared-ux/chrome/navigation/src/ui/default_navigation.test.tsx
+++ b/packages/shared-ux/chrome/navigation/src/ui/default_navigation.test.tsx
@@ -106,60 +106,105 @@ describe('<DefaultNavigation />', () => {
         onProjectNavigationChange.mock.calls[onProjectNavigationChange.mock.calls.length - 1];
       const [navTreeGenerated] = lastCall;
 
-      expect(navTreeGenerated.navigationTree).toEqual([
-        {
-          id: 'group1',
-          path: ['group1'],
-          title: '',
-          isActive: false,
-          children: [
-            {
-              id: 'item1',
-              title: 'Item 1',
-              href: 'http://foo',
-              isActive: false,
-              path: ['group1', 'item1'],
-            },
-            {
-              id: 'item2',
-              title: 'Item 2',
-              href: 'http://foo',
-              isActive: false,
-              path: ['group1', 'item2'],
-            },
-            {
-              id: 'group1A',
-              title: 'Group1A',
-              isActive: false,
-              path: ['group1', 'group1A'],
-              children: [
-                {
-                  id: 'item1',
-                  title: 'Group 1A Item 1',
-                  href: 'http://foo',
-                  isActive: false,
-                  path: ['group1', 'group1A', 'item1'],
-                },
-                {
-                  id: 'group1A_1',
-                  title: 'Group1A_1',
-                  isActive: false,
-                  path: ['group1', 'group1A', 'group1A_1'],
-                  children: [
-                    {
-                      id: 'item1',
-                      title: 'Group 1A_1 Item 1',
-                      href: 'http://foo',
-                      isActive: false,
-                      path: ['group1', 'group1A', 'group1A_1', 'item1'],
-                    },
-                  ],
-                },
-              ],
-            },
-          ],
-        },
-      ]);
+      expect(navTreeGenerated.navigationTree).toMatchInlineSnapshot(`
+        Array [
+          Object {
+            "children": Array [
+              Object {
+                "children": undefined,
+                "deepLink": undefined,
+                "href": "http://foo",
+                "id": "item1",
+                "isActive": false,
+                "path": Array [
+                  "group1",
+                  "item1",
+                ],
+                "renderItem": undefined,
+                "title": "Item 1",
+              },
+              Object {
+                "children": undefined,
+                "deepLink": undefined,
+                "href": "http://foo",
+                "id": "item2",
+                "isActive": false,
+                "path": Array [
+                  "group1",
+                  "item2",
+                ],
+                "renderItem": undefined,
+                "title": "Item 2",
+              },
+              Object {
+                "children": Array [
+                  Object {
+                    "children": undefined,
+                    "deepLink": undefined,
+                    "href": "http://foo",
+                    "id": "item1",
+                    "isActive": false,
+                    "path": Array [
+                      "group1",
+                      "group1A",
+                      "item1",
+                    ],
+                    "renderItem": undefined,
+                    "title": "Group 1A Item 1",
+                  },
+                  Object {
+                    "children": Array [
+                      Object {
+                        "children": undefined,
+                        "deepLink": undefined,
+                        "href": "http://foo",
+                        "id": "item1",
+                        "isActive": false,
+                        "path": Array [
+                          "group1",
+                          "group1A",
+                          "group1A_1",
+                          "item1",
+                        ],
+                        "renderItem": undefined,
+                        "title": "Group 1A_1 Item 1",
+                      },
+                    ],
+                    "deepLink": undefined,
+                    "href": undefined,
+                    "id": "group1A_1",
+                    "isActive": false,
+                    "path": Array [
+                      "group1",
+                      "group1A",
+                      "group1A_1",
+                    ],
+                    "title": "Group1A_1",
+                  },
+                ],
+                "deepLink": undefined,
+                "href": undefined,
+                "id": "group1A",
+                "isActive": false,
+                "path": Array [
+                  "group1",
+                  "group1A",
+                ],
+                "title": "Group1A",
+              },
+            ],
+            "deepLink": undefined,
+            "href": undefined,
+            "id": "group1",
+            "isActive": false,
+            "path": Array [
+              "group1",
+            ],
+            "title": "",
+            "type": "navGroup",
+          },
+        ]
+      `);
     });
 
     test('should read the title from deeplink', async () => {
@@ -223,50 +268,76 @@ describe('<DefaultNavigation />', () => {
         onProjectNavigationChange.mock.calls[onProjectNavigationChange.mock.calls.length - 1];
       const [navTreeGenerated] = lastCall;
 
-      expect(navTreeGenerated.navigationTree).toEqual([
-        {
-          id: 'root',
-          path: ['root'],
-          title: '',
-          isActive: false,
-          children: [
-            {
-              id: 'group1',
-              path: ['root', 'group1'],
-              title: '',
-              isActive: false,
-              children: [
-                {
-                  id: 'item1',
-                  path: ['root', 'group1', 'item1'],
-                  title: 'Title from deeplink',
-                  isActive: false,
-                  deepLink: {
-                    id: 'item1',
-                    title: 'Title from deeplink',
-                    baseUrl: '',
-                    url: '',
-                    href: '',
+      expect(navTreeGenerated.navigationTree).toMatchInlineSnapshot(`
+        Array [
+          Object {
+            "children": Array [
+              Object {
+                "children": Array [
+                  Object {
+                    "children": undefined,
+                    "deepLink": Object {
+                      "baseUrl": "",
+                      "href": "",
+                      "id": "item1",
+                      "title": "Title from deeplink",
+                      "url": "",
+                    },
+                    "href": undefined,
+                    "id": "item1",
+                    "isActive": false,
+                    "path": Array [
+                      "root",
+                      "group1",
+                      "item1",
+                    ],
+                    "renderItem": undefined,
+                    "title": "Title from deeplink",
                   },
-                },
-                {
-                  id: 'item2',
-                  title: 'Overwrite deeplink title',
-                  path: ['root', 'group1', 'item2'],
-                  isActive: false,
-                  deepLink: {
-                    id: 'item1',
-                    title: 'Title from deeplink',
-                    baseUrl: '',
-                    url: '',
-                    href: '',
+                  Object {
+                    "children": undefined,
+                    "deepLink": Object {
+                      "baseUrl": "",
+                      "href": "",
+                      "id": "item1",
+                      "title": "Title from deeplink",
+                      "url": "",
+                    },
+                    "href": undefined,
+                    "id": "item2",
+                    "isActive": false,
+                    "path": Array [
+                      "root",
+                      "group1",
+                      "item2",
+                    ],
+                    "renderItem": undefined,
+                    "title": "Overwrite deeplink title",
                   },
-                },
-              ],
-            },
-          ],
-        },
-      ]);
+                ],
+                "deepLink": undefined,
+                "href": undefined,
+                "id": "group1",
+                "isActive": false,
+                "path": Array [
+                  "root",
+                  "group1",
+                ],
+                "title": "",
+              },
+            ],
+            "deepLink": undefined,
+            "href": undefined,
+            "id": "root",
+            "isActive": false,
+            "path": Array [
+              "root",
+            ],
+            "title": "",
+            "type": "navGroup",
+          },
+        ]
+      `);
     });
 
     test('should allow href for absolute links', async () => {
@@ -306,31 +377,50 @@ describe('<DefaultNavigation />', () => {
         onProjectNavigationChange.mock.calls[onProjectNavigationChange.mock.calls.length - 1];
       const [navTreeGenerated] = lastCall;
 
-      expect(navTreeGenerated.navigationTree).toEqual([
-        {
-          id: 'root',
-          path: ['root'],
-          title: '',
-          isActive: false,
-          children: [
-            {
-              id: 'group1',
-              path: ['root', 'group1'],
-              title: '',
-              isActive: false,
-              children: [
-                {
-                  id: 'item1',
-                  path: ['root', 'group1', 'item1'],
-                  title: 'Absolute link',
-                  href: 'https://example.com',
-                  isActive: false,
-                },
-              ],
-            },
-          ],
-        },
-      ]);
+      expect(navTreeGenerated.navigationTree).toMatchInlineSnapshot(`
+        Array [
+          Object {
+            "children": Array [
+              Object {
+                "children": Array [
+                  Object {
+                    "children": undefined,
+                    "deepLink": undefined,
+                    "href": "https://example.com",
+                    "id": "item1",
+                    "isActive": false,
+                    "path": Array [
+                      "root",
+                      "group1",
+                      "item1",
+                    ],
+                    "renderItem": undefined,
+                    "title": "Absolute link",
+                  },
+                ],
+                "deepLink": undefined,
+                "href": undefined,
+                "id": "group1",
+                "isActive": false,
+                "path": Array [
+                  "root",
+                  "group1",
+                ],
+                "title": "",
+              },
+            ],
+            "deepLink": undefined,
+            "href": undefined,
+            "id": "root",
+            "isActive": false,
+            "path": Array [
+              "root",
+            ],
+            "title": "",
+            "type": "navGroup",
+          },
+        ]
+      `);
     });
 
     test('should throw if href is not an absolute links', async () => {
@@ -601,45 +691,38 @@ describe('<DefaultNavigation />', () => {
       });
 
       // The project navigation tree passed
-      expect(navTreeGenerated.navigationTree[0]).toEqual({
-        id: 'group1',
-        title: 'Group 1',
-        path: ['group1'],
-        isActive: false,
-        children: [
-          {
-            id: 'item1',
-            title: 'Item 1',
-            isActive: false,
-            path: ['group1', 'item1'],
-          },
-          {
-            id: 'item2',
-            path: ['group1', 'item2'],
-            title: 'Title from deeplink!',
-            isActive: false,
-            deepLink: {
-              id: 'item2',
-              title: 'Title from deeplink!',
-              baseUrl: '',
-              url: '',
-              href: '',
-            },
-          },
-          {
-            id: 'item3',
-            title: 'Deeplink title overriden',
-            path: ['group1', 'item3'],
-            isActive: false,
-            deepLink: {
-              id: 'item2',
-              title: 'Title from deeplink!',
-              baseUrl: '',
-              url: '',
-              href: '',
-            },
-          },
-        ],
+      expect(navTreeGenerated.navigationTree).toMatchSnapshot();
+    });
+
+    describe('cloud links', () => {
+      test('render the cloud link', async () => {
+        const { findByTestId } = render(
+          <NavigationProvider {...services}>
+            <DefaultNavigation projectNavigationTree={[]} />
+          </NavigationProvider>
+        );
+
+        expect(
+          await (
+            await findByTestId(
+              'nav-item-project_settings_project_nav.settings.cloudLinkUserAndRoles'
+            )
+          ).textContent
+        ).toBe('Mock Users & RolesExternal link');
+
+        expect(
+          await (
+            await findByTestId(
+              'nav-item-project_settings_project_nav.settings.cloudLinkPerformance'
+            )
+          ).textContent
+        ).toBe('Mock PerformanceExternal link');
+
+        expect(
+          await (
+            await findByTestId('nav-item-project_settings_project_nav.settings.cloudLinkBilling')
+          ).textContent
+        ).toBe('Mock Billing & SubscriptionsExternal link');
       });
     });
   });