diff --git a/src/content/components/index.ts b/src/content/components/index.ts
index 615bf2bdcc9..ae72da139d7 100644
--- a/src/content/components/index.ts
+++ b/src/content/components/index.ts
@@ -1,7 +1,8 @@
 import {dateComponents} from './date-components';
+import {navigationComponents} from './navigation';
 import type {Lib} from './types';
 import {uikit} from './uikit';
 
 export type {SandboxType, SandboxProps, Component} from './types';
 
-export const libs: Lib[] = [uikit, dateComponents];
+export const libs: Lib[] = [uikit, dateComponents, navigationComponents];
diff --git a/src/content/components/navigation/ActionBar/index.ts b/src/content/components/navigation/ActionBar/index.ts
new file mode 100644
index 00000000000..2e92c3f566b
--- /dev/null
+++ b/src/content/components/navigation/ActionBar/index.ts
@@ -0,0 +1,7 @@
+import {Component} from '../../types';
+
+export const actionBarConfig: Component = {
+    id: 'action-bar',
+    title: 'Action Bar',
+    isComingSoon: true,
+};
diff --git a/src/content/components/navigation/AllPagesPanel/index.ts b/src/content/components/navigation/AllPagesPanel/index.ts
new file mode 100644
index 00000000000..a3188b2ef41
--- /dev/null
+++ b/src/content/components/navigation/AllPagesPanel/index.ts
@@ -0,0 +1,7 @@
+import {Component} from '../../types';
+
+export const allPagesPanelConfig: Component = {
+    id: 'all-pages-panel',
+    title: 'All Pages Panel',
+    isComingSoon: true,
+};
diff --git a/src/content/components/navigation/AsideHeader/index.ts b/src/content/components/navigation/AsideHeader/index.ts
new file mode 100644
index 00000000000..f69f1a86b6e
--- /dev/null
+++ b/src/content/components/navigation/AsideHeader/index.ts
@@ -0,0 +1,7 @@
+import {Component} from '../../types';
+
+export const asideHeaderConfig: Component = {
+    id: 'aside-header',
+    title: 'Aside Header',
+    isComingSoon: true,
+};
diff --git a/src/content/components/navigation/Drawer/index.ts b/src/content/components/navigation/Drawer/index.ts
new file mode 100644
index 00000000000..cc3f6d7724c
--- /dev/null
+++ b/src/content/components/navigation/Drawer/index.ts
@@ -0,0 +1,7 @@
+import {Component} from '../../types';
+
+export const drawerConfig: Component = {
+    id: 'drawer',
+    title: 'Drawer',
+    isComingSoon: true,
+};
diff --git a/src/content/components/navigation/HotkeysPanel/index.ts b/src/content/components/navigation/HotkeysPanel/index.ts
new file mode 100644
index 00000000000..48d97e9859c
--- /dev/null
+++ b/src/content/components/navigation/HotkeysPanel/index.ts
@@ -0,0 +1,7 @@
+import {Component} from '../../types';
+
+export const hotkeysPanelConfig: Component = {
+    id: 'hotkeys-panel',
+    title: 'Hotkeys Panel',
+    isComingSoon: true,
+};
diff --git a/src/content/components/navigation/MobileHeader/index.ts b/src/content/components/navigation/MobileHeader/index.ts
new file mode 100644
index 00000000000..886c6742016
--- /dev/null
+++ b/src/content/components/navigation/MobileHeader/index.ts
@@ -0,0 +1,7 @@
+import {Component} from '../../types';
+
+export const mobileHeaderConfig: Component = {
+    id: 'mobile-header',
+    title: 'Mobile Header',
+    isComingSoon: true,
+};
diff --git a/src/content/components/navigation/Settings/index.ts b/src/content/components/navigation/Settings/index.ts
new file mode 100644
index 00000000000..f5379b5c971
--- /dev/null
+++ b/src/content/components/navigation/Settings/index.ts
@@ -0,0 +1,7 @@
+import {Component} from '../../types';
+
+export const settingsConfig: Component = {
+    id: 'settings',
+    title: 'Settings',
+    isComingSoon: true,
+};
diff --git a/src/content/components/navigation/index.ts b/src/content/components/navigation/index.ts
new file mode 100644
index 00000000000..930d84082ca
--- /dev/null
+++ b/src/content/components/navigation/index.ts
@@ -0,0 +1,31 @@
+import {sortBy} from 'lodash';
+
+import {getLibById} from '../../../utils';
+import {Component, Lib} from '../types';
+
+import {actionBarConfig} from './ActionBar';
+import {allPagesPanelConfig} from './AllPagesPanel';
+import {asideHeaderConfig} from './AsideHeader';
+import {drawerConfig} from './Drawer';
+import {hotkeysPanelConfig} from './HotkeysPanel';
+import {mobileHeaderConfig} from './MobileHeader';
+import {settingsConfig} from './Settings';
+
+const {config} = getLibById('navigation');
+
+const components: Component[] = [
+    actionBarConfig,
+    allPagesPanelConfig,
+    asideHeaderConfig,
+    drawerConfig,
+    hotkeysPanelConfig,
+    mobileHeaderConfig,
+    settingsConfig,
+];
+
+export const navigationComponents: Lib = {
+    id: config.id,
+    title: config.title,
+    primary: config.primary,
+    components: sortBy(components, 'title'),
+};