diff --git a/packages/shared-ux/chrome/navigation/src/ui/i18n_strings.ts b/packages/shared-ux/chrome/navigation/src/i18n_strings.ts
similarity index 100%
rename from packages/shared-ux/chrome/navigation/src/ui/i18n_strings.ts
rename to packages/shared-ux/chrome/navigation/src/i18n_strings.ts
diff --git a/packages/shared-ux/chrome/navigation/src/ui/elastic_mark.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/elastic_mark.tsx
similarity index 100%
rename from packages/shared-ux/chrome/navigation/src/ui/elastic_mark.tsx
rename to packages/shared-ux/chrome/navigation/src/ui/components/elastic_mark.tsx
diff --git a/packages/shared-ux/chrome/navigation/src/ui/components/header.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/header.tsx
new file mode 100644
index 0000000000000..b9153a04b87e3
--- /dev/null
+++ b/packages/shared-ux/chrome/navigation/src/ui/components/header.tsx
@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { EuiHeaderLogo, EuiLoadingSpinner } from '@elastic/eui';
+import React from 'react';
+import useObservable from 'react-use/lib/useObservable';
+import { NavigationProps, NavigationServices } from '../../../types';
+import { getI18nStrings } from '../../i18n_strings';
+import { ElasticMark } from './elastic_mark';
+import './header_logo.scss';
+
+type Props = Pick<NavigationProps, 'homeHref'>;
+type Services = Pick<
+  NavigationServices,
+  'basePath' | 'navIsOpen' | 'navigateToUrl' | 'loadingCount$'
+>;
+
+export const NavHeader = (props: Props & Services) => {
+  const strings = getI18nStrings();
+  const { basePath, navIsOpen, navigateToUrl, loadingCount$, homeHref } = props;
+
+  const loadingCount = useObservable(loadingCount$, 0);
+  const homeUrl = basePath.prepend(homeHref);
+  const navigateHome = (event: React.MouseEvent) => {
+    event.preventDefault();
+    navigateToUrl(homeUrl);
+  };
+  const logo =
+    loadingCount === 0 ? (
+      <EuiHeaderLogo
+        iconType="logoElastic"
+        aria-label={strings.headerLogoAriaLabel}
+        onClick={navigateHome}
+        data-test-subj="nav-header-logo"
+      />
+    ) : (
+      <a href={homeUrl} onClick={navigateHome}>
+        <EuiLoadingSpinner
+          size="l"
+          aria-hidden={false}
+          onClick={navigateHome}
+          data-test-subj="nav-header-loading-spinner"
+        />
+      </a>
+    );
+
+  return (
+    <>
+      {logo}
+      {navIsOpen ? <ElasticMark className="chrHeaderLogo__mark" aria-hidden={true} /> : null}
+    </>
+  );
+};
diff --git a/packages/shared-ux/chrome/navigation/src/ui/header_logo.scss b/packages/shared-ux/chrome/navigation/src/ui/components/header_logo.scss
similarity index 100%
rename from packages/shared-ux/chrome/navigation/src/ui/header_logo.scss
rename to packages/shared-ux/chrome/navigation/src/ui/components/header_logo.scss
diff --git a/packages/shared-ux/chrome/navigation/src/ui/components/index.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/index.tsx
new file mode 100644
index 0000000000000..2782906ee8266
--- /dev/null
+++ b/packages/shared-ux/chrome/navigation/src/ui/components/index.tsx
@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { NavHeader } from './header';
+export { LinkToCloud } from './link_to_cloud';
+export { NavigationBucket } from './navigation_bucket';
+export { RecentlyAccessed } from './recently_accessed';
diff --git a/packages/shared-ux/chrome/navigation/src/ui/components/link_to_cloud.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/link_to_cloud.tsx
new file mode 100644
index 0000000000000..ef9f1ba01ee16
--- /dev/null
+++ b/packages/shared-ux/chrome/navigation/src/ui/components/link_to_cloud.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { EuiCollapsibleNavGroup, EuiLink } from '@elastic/eui';
+import React from 'react';
+import { NavigationProps } from '../../../types';
+import { getI18nStrings } from '../../i18n_strings';
+
+interface Props {
+  linkToCloud?: NavigationProps['homeHref'];
+}
+
+export const LinkToCloud = (props: Props) => {
+  const strings = getI18nStrings();
+
+  switch (props.linkToCloud) {
+    case 'projects':
+      return (
+        <EuiLink
+          href="https://cloud.elastic.co/projects"
+          color="text"
+          data-test-subj="nav-header-link-to-projects"
+        >
+          <EuiCollapsibleNavGroup iconType="spaces" title={strings.linkToCloudProjects} />
+        </EuiLink>
+      );
+    case 'deployments':
+      return (
+        <EuiLink
+          href="https://cloud.elastic.co/deployments"
+          color="text"
+          data-test-subj="nav-header-link-to-deployments"
+        >
+          <EuiCollapsibleNavGroup iconType="spaces" title={strings.linkToCloudDeployments} />
+        </EuiLink>
+      );
+    default:
+      return null;
+  }
+};
diff --git a/packages/shared-ux/chrome/navigation/src/ui/navigation_bucket.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_bucket.tsx
similarity index 87%
rename from packages/shared-ux/chrome/navigation/src/ui/navigation_bucket.tsx
rename to packages/shared-ux/chrome/navigation/src/ui/components/navigation_bucket.tsx
index 0b0d6b5b223ab..48ee855901497 100644
--- a/packages/shared-ux/chrome/navigation/src/ui/navigation_bucket.tsx
+++ b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_bucket.tsx
@@ -8,9 +8,9 @@
 
 import { EuiCollapsibleNavGroup, EuiIcon, EuiSideNav, EuiText } from '@elastic/eui';
 import React from 'react';
-import { NavigationBucketProps } from '../../types';
-import { useNavigation } from '../services';
-import { navigationStyles as styles } from '../styles';
+import { NavigationBucketProps } from '../../../types';
+import { useNavigation } from '../../services';
+import { navigationStyles as styles } from '../../styles';
 
 export const NavigationBucket = (opts: NavigationBucketProps) => {
   const { id, items, activeNavItemId, ...props } = opts;
diff --git a/packages/shared-ux/chrome/navigation/src/ui/components/recently_accessed.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/recently_accessed.tsx
new file mode 100644
index 0000000000000..c6b6a6ec14738
--- /dev/null
+++ b/packages/shared-ux/chrome/navigation/src/ui/components/recently_accessed.tsx
@@ -0,0 +1,50 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { EuiCollapsibleNavGroup, EuiSideNav, EuiSideNavItemType } from '@elastic/eui';
+import React from 'react';
+import useObservable from 'react-use/lib/useObservable';
+import { NavigationProps, NavigationServices } from '../../../types';
+import { getI18nStrings } from '../../i18n_strings';
+import { navigationStyles as styles } from '../../styles';
+
+interface Props {
+  recentlyAccessed$: Observable<RecentItem[]>;
+}
+
+export const RecentlyAccessed = (props: Props) => {
+  const strings = getI18nStrings();
+  const recentlyAccessed = useObservable(props.recentlyAccessed$, []);
+  if (recentlyAccessed.length > 0) {
+    const navItems: Array<EuiSideNavItemType<unknown>> = [
+      {
+        name: '', // no list header title
+        id: 'recents_root',
+        items: recentlyAccessed.map(({ id, label, link }) => ({
+          id,
+          name: label,
+          href: link,
+        })),
+      },
+    ];
+
+    return (
+      <EuiCollapsibleNavGroup
+        title={strings.recentlyAccessed}
+        iconType="clock"
+        isCollapsible={true}
+        initialIsOpen={true}
+        data-test-subj={`nav-bucket-recentlyAccessed`}
+      >
+        <EuiSideNav items={navItems} css={styles.euiSideNavItems} />
+      </EuiCollapsibleNavGroup>
+    );
+  }
+
+  return null;
+};
diff --git a/packages/shared-ux/chrome/navigation/src/ui/navigation.tsx b/packages/shared-ux/chrome/navigation/src/ui/navigation.tsx
index 48bccd614fdb9..4c8d4bf20f796 100644
--- a/packages/shared-ux/chrome/navigation/src/ui/navigation.tsx
+++ b/packages/shared-ux/chrome/navigation/src/ui/navigation.tsx
@@ -6,28 +6,18 @@
  * Side Public License, v 1.
  */
 
-import useObservable from 'react-use/lib/useObservable';
 import {
   EuiCollapsibleNavGroup,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiHeaderLogo,
-  EuiLink,
-  EuiLoadingSpinner,
-  EuiSideNav,
-  EuiSideNavItemType,
   EuiSpacer,
   useEuiTheme,
 } from '@elastic/eui';
 import React from 'react';
-import { getI18nStrings } from './i18n_strings';
 import { NavigationBucketProps, NavigationProps } from '../../types';
 import { NavigationModel } from '../model';
 import { useNavigation } from '../services';
-import { navigationStyles as styles } from '../styles';
-import { ElasticMark } from './elastic_mark';
-import './header_logo.scss';
-import { NavigationBucket } from './navigation_bucket';
+import { LinkToCloud, NavHeader, NavigationBucket, RecentlyAccessed } from './components';
 
 export const Navigation = (props: NavigationProps) => {
   const { activeNavItemId, basePath, navIsOpen, navigateToUrl, ...observables } = useNavigation();
@@ -45,97 +35,6 @@ export const Navigation = (props: NavigationProps) => {
   const solutions = nav.getSolutions();
   const { analytics, ml, devTools, management } = nav.getPlatform();
 
-  const strings = getI18nStrings();
-
-  const NavHeader = () => {
-    const loadingCount = useObservable(observables.loadingCount$, 0);
-    const homeUrl = basePath.prepend(props.homeHref);
-    const navigateHome = (event: React.MouseEvent) => {
-      event.preventDefault();
-      navigateToUrl(homeUrl);
-    };
-    const logo =
-      loadingCount === 0 ? (
-        <EuiHeaderLogo
-          iconType="logoElastic"
-          aria-label={strings.headerLogoAriaLabel}
-          onClick={navigateHome}
-          data-test-subj="nav-header-logo"
-        />
-      ) : (
-        <a href={homeUrl} onClick={navigateHome}>
-          <EuiLoadingSpinner
-            size="l"
-            aria-hidden={false}
-            onClick={navigateHome}
-            data-test-subj="nav-header-loading-spinner"
-          />
-        </a>
-      );
-
-    return (
-      <>
-        {logo}
-        {navIsOpen ? <ElasticMark className="chrHeaderLogo__mark" aria-hidden={true} /> : null}
-      </>
-    );
-  };
-
-  const LinkToCloud = () => {
-    switch (props.linkToCloud) {
-      case 'projects':
-        return (
-          <EuiLink
-            href="https://cloud.elastic.co/projects"
-            color="text"
-            data-test-subj="nav-header-link-to-projects"
-          >
-            <EuiCollapsibleNavGroup iconType="spaces" title={strings.linkToCloudProjects} />
-          </EuiLink>
-        );
-      case 'deployments':
-        return (
-          <EuiLink
-            href="https://cloud.elastic.co/deployments"
-            color="text"
-            data-test-subj="nav-header-link-to-deployments"
-          >
-            <EuiCollapsibleNavGroup iconType="spaces" title={strings.linkToCloudDeployments} />
-          </EuiLink>
-        );
-      default:
-        return null;
-    }
-  };
-
-  const RecentlyAccessed = () => {
-    const recentlyAccessed = useObservable(observables.recentlyAccessed$, []);
-
-    const navItems: Array<EuiSideNavItemType<unknown>> = [
-      {
-        name: '',
-        id: 'recents_root',
-        items: recentlyAccessed.map((item) => ({
-          ...item,
-          name: item.label,
-          href: item.link,
-        })),
-      },
-    ];
-
-    return (
-      <EuiCollapsibleNavGroup
-        title={strings.recentlyAccessed}
-        iconType="clock"
-        isCollapsible={true}
-        initialIsOpen={recentlyAccessed.length > 0}
-        data-test-subj={`nav-bucket-recentlyAccessed`}
-      >
-        <EuiSideNav items={navItems} css={styles.euiSideNavItems} />
-      </EuiCollapsibleNavGroup>
-    );
-  };
-
   // higher-order-component to keep the common props DRY
   const NavigationBucketHoc = (outerProps: Omit<NavigationBucketProps, 'activeNavItemId'>) => (
     <NavigationBucket {...outerProps} activeNavItemId={activeNav} />
@@ -145,12 +44,12 @@ export const Navigation = (props: NavigationProps) => {
     <EuiFlexGroup direction="column" gutterSize="none" style={{ overflowY: 'auto' }}>
       <EuiFlexItem grow={false}>
         <EuiCollapsibleNavGroup css={{ background: euiTheme.colors.darkestShade, height: '50px' }}>
-          <NavHeader />
+          <NavHeader {...observables} {...props} {...{ basePath, navIsOpen, navigateToUrl }} />
         </EuiCollapsibleNavGroup>
 
-        <LinkToCloud />
+        <LinkToCloud {...props} />
 
-        <RecentlyAccessed />
+        <RecentlyAccessed {...observables} {...props} />
 
         {solutions.map((solutionBucket, idx) => {
           return <NavigationBucketHoc {...solutionBucket} key={`solution${idx}`} />;