diff --git a/public/app/features/datasources/pages/DataSourceDashboardsPage.tsx b/public/app/features/datasources/pages/DataSourceDashboardsPage.tsx
index 8913c74cf2c..9f8fc7d00ab 100644
--- a/public/app/features/datasources/pages/DataSourceDashboardsPage.tsx
+++ b/public/app/features/datasources/pages/DataSourceDashboardsPage.tsx
@@ -4,14 +4,16 @@ import { Page } from 'app/core/components/Page/Page';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 
 import { DataSourceDashboards } from '../components/DataSourceDashboards';
+import { useDataSourceSettingsNav } from '../state';
 
 export interface Props extends GrafanaRouteComponentProps<{ uid: string }> {}
 
 export function DataSourceDashboardsPage(props: Props) {
   const uid = props.match.params.uid;
+  const nav = useDataSourceSettingsNav(uid, 'dashboards');
 
   return (
-    <Page navId={`datasource-dashboards-${uid}`}>
+    <Page navId="datasources" pageNav={nav.main}>
       <Page.Contents>
         <DataSourceDashboards uid={uid} />
       </Page.Contents>
diff --git a/public/app/features/datasources/pages/EditDataSourcePage.tsx b/public/app/features/datasources/pages/EditDataSourcePage.tsx
index 7d57c31abb0..22f959c5a4a 100644
--- a/public/app/features/datasources/pages/EditDataSourcePage.tsx
+++ b/public/app/features/datasources/pages/EditDataSourcePage.tsx
@@ -15,7 +15,7 @@ export function EditDataSourcePage(props: Props) {
   const nav = useDataSourceSettingsNav(uid, pageId);
 
   return (
-    <Page navModel={nav}>
+    <Page navId="datasources" pageNav={nav.main}>
       <Page.Contents>
         <EditDataSource uid={uid} pageId={pageId} />
       </Page.Contents>
diff --git a/public/app/features/datasources/state/hooks.ts b/public/app/features/datasources/state/hooks.ts
index 7cf1013c91e..01e57ae5db1 100644
--- a/public/app/features/datasources/state/hooks.ts
+++ b/public/app/features/datasources/state/hooks.ts
@@ -1,7 +1,7 @@
 import { useContext, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { DataSourcePluginMeta, DataSourceSettings, urlUtil } from '@grafana/data';
+import { DataSourcePluginMeta, DataSourceSettings, NavModelItem, urlUtil } from '@grafana/data';
 import { cleanUpAction } from 'app/core/actions/cleanUp';
 import appEvents from 'app/core/app_events';
 import { contextSrv } from 'app/core/core';
@@ -127,10 +127,10 @@ export const useDataSourceSettingsNav = (dataSourceId: string, pageId: string |
   const dataSource = useDataSource(dataSourceId);
   const { plugin, loadError, loading } = useDataSourceSettings();
   const navIndex = useSelector((state: StoreState) => state.navIndex);
-  const navIndexId = pageId ? `datasource-page-${pageId}` : `datasource-settings-${dataSourceId}`;
+  const navIndexId = pageId ? `datasource-${pageId}-${dataSourceId}` : `datasource-settings-${dataSourceId}`;
 
   if (loadError) {
-    const node = {
+    const node: NavModelItem = {
       text: loadError,
       subTitle: 'Data Source Error',
       icon: 'exclamation-triangle',