diff --git a/__mocks__/navigation/sidebarNavigationItems.ts b/__mocks__/navigation/sidebarNavigationItems.ts
new file mode 100644
index 000000000..fe0df5f06
--- /dev/null
+++ b/__mocks__/navigation/sidebarNavigationItems.ts
@@ -0,0 +1,78 @@
+import { SidebarNavigationItem } from '@/src/lib/interfaces/page-info';
+
+export const mockedSidebarNavigationConfigRoutes: SidebarNavigationItem[] = [
+  {
+    title: 'Page 1',
+    path: 'page-1',
+    ignoreLink: false,
+    children: [
+      {
+        title: 'Page 1-1',
+        path: 'page-1-1',
+        children: [
+          {
+            title: 'Page 1-1-1',
+            path: 'page-1-1-1',
+            children: [],
+          },
+          {
+            title: 'Page 1-1-2',
+            path: 'page-1-1-2',
+            children: [],
+          },
+        ],
+      },
+      {
+        title: 'Page 1-2',
+        path: 'page-1-2',
+        children: [],
+      },
+    ],
+  },
+  {
+    title: 'Page 2',
+    path: 'page-2',
+    ignoreLink: false,
+    children: [],
+  },
+  {
+    title: 'Page 3',
+    path: 'page-3',
+    ignoreLink: false,
+    children: [
+      {
+        title: 'Page 3-1',
+        path: 'page-3-1',
+        children: [
+          {
+            title: 'Page 3-1-1',
+            path: 'page-3-1-1',
+            children: [],
+          },
+          {
+            title: 'Page 3-1-2',
+            path: 'page-3-1-2',
+            children: [],
+          },
+        ],
+      },
+      {
+        title: 'Page 3-2',
+        path: 'page-3-2',
+        children: [],
+      },
+    ],
+  },
+  {
+    title: 'Page 4',
+    path: 'page-4',
+    ignoreLink: false,
+    children: [],
+  },
+  {
+    title: 'Page 5',
+    path: 'page-5',
+    ignoreLink: false,
+    children: [],
+  },
+];
diff --git a/src/components/navigation/ArticlePaging.stories.tsx b/src/components/navigation/ArticlePaging.stories.tsx
index c5de4605d..79c599d70 100644
--- a/src/components/navigation/ArticlePaging.stories.tsx
+++ b/src/components/navigation/ArticlePaging.stories.tsx
@@ -1,6 +1,7 @@
 // Replace your-renderer with the renderer you are using (e.g., react, vue3, etc.)
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { mockedSidebarNavigationConfigRoutes } from '@/__mocks__/navigation/sidebarNavigationItems';
 import { ArticlePaging } from './ArticlePaging';
 
 const meta: Meta<typeof ArticlePaging> = {
@@ -32,60 +33,7 @@ export const Basic: Story = {
       enableSearch: true,
       enableBreadcrumb: true,
       enableNextPrevious: true,
-      routes: [
-        {
-          title: 'Page 1',
-          path: 'page-1',
-          ignoreLink: false,
-          children: [
-            {
-              title: 'Page 1-1',
-              path: 'page-1-1',
-              children: [
-                {
-                  title: 'Page 1-1-1',
-                  path: 'page-1-1-1',
-                  children: [],
-                },
-                {
-                  title: 'Page 1-1-2',
-                  path: 'page-1-1-2',
-                  children: [],
-                },
-              ],
-            },
-            {
-              title: 'Page 1-2',
-              path: 'page-1-2',
-              children: [],
-            },
-          ],
-        },
-        {
-          title: 'Page 2',
-          path: 'page-2',
-          ignoreLink: false,
-          children: [],
-        },
-        {
-          title: 'Page 3',
-          path: 'page-3',
-          ignoreLink: false,
-          children: [],
-        },
-        {
-          title: 'Page 4',
-          path: 'page-4',
-          ignoreLink: false,
-          children: [],
-        },
-        {
-          title: 'Page 5',
-          path: 'page-5',
-          ignoreLink: false,
-          children: [],
-        },
-      ],
+      routes: mockedSidebarNavigationConfigRoutes,
     },
   },
 };
diff --git a/src/components/navigation/ArticlePagingNext.stories.tsx b/src/components/navigation/ArticlePagingNext.stories.tsx
new file mode 100644
index 000000000..cd79de8da
--- /dev/null
+++ b/src/components/navigation/ArticlePagingNext.stories.tsx
@@ -0,0 +1,39 @@
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, etc.)
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { mockedSidebarNavigationConfigRoutes } from '@/__mocks__/navigation/sidebarNavigationItems';
+import { ArticlePagingNext } from './ArticlePagingNext';
+
+const meta: Meta<typeof ArticlePagingNext> = {
+  title: 'Components/Navigation/ArticlePagingNext',
+  component: ArticlePagingNext,
+};
+export default meta;
+
+type Story = StoryObj<typeof ArticlePagingNext>;
+
+export const Basic: Story = {
+  parameters: {
+    nextjs: {
+      router: {
+        basePath: '/test',
+      },
+    },
+  },
+  args: {
+    enabled: true,
+    currentFileName: 'page-2',
+    currentPath: '/example/page-2',
+    config: {
+      title: 'Test',
+      description: 'Mocked content for storybook',
+      heading: true,
+      path: '/example',
+      showRootAsSections: false,
+      enableSearch: true,
+      enableBreadcrumb: true,
+      enableNextPrevious: true,
+      routes: mockedSidebarNavigationConfigRoutes,
+    },
+  },
+};
diff --git a/src/components/navigation/Footer.stories.tsx b/src/components/navigation/Footer.stories.tsx
new file mode 100644
index 000000000..93f8adcbd
--- /dev/null
+++ b/src/components/navigation/Footer.stories.tsx
@@ -0,0 +1,16 @@
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, etc.)
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Footer } from './Footer';
+
+const meta: Meta<typeof Footer> = {
+  title: 'Components/Navigation/Footer',
+  component: Footer,
+};
+export default meta;
+
+type Story = StoryObj<typeof Footer>;
+
+export const Basic: Story = {
+  args: {},
+};
diff --git a/src/components/navigation/InPageNav.stories.tsx b/src/components/navigation/InPageNav.stories.tsx
new file mode 100644
index 000000000..d6b7abc44
--- /dev/null
+++ b/src/components/navigation/InPageNav.stories.tsx
@@ -0,0 +1,31 @@
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, etc.)
+import type { Meta, StoryObj } from '@storybook/react';
+
+import InPageNav from './InPageNav';
+
+const meta: Meta<typeof InPageNav> = {
+  title: 'Components/Navigation/InPageNav',
+  component: InPageNav,
+};
+export default meta;
+
+type Story = StoryObj<typeof InPageNav>;
+
+export const Basic: Story = {
+  args: {
+    titles: [
+      {
+        title: 'Title 1',
+        id: 'title-1',
+      },
+      {
+        title: 'Title 2',
+        id: 'title-2',
+      },
+      {
+        title: 'Title 3',
+        id: 'title-3',
+      },
+    ],
+  },
+};
diff --git a/src/components/navigation/InPageNavSmall.stories.tsx b/src/components/navigation/InPageNavSmall.stories.tsx
new file mode 100644
index 000000000..f733abaa5
--- /dev/null
+++ b/src/components/navigation/InPageNavSmall.stories.tsx
@@ -0,0 +1,31 @@
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, etc.)
+import type { Meta, StoryObj } from '@storybook/react';
+
+import InPageNavSmall from './InPageNavSmall';
+
+const meta: Meta<typeof InPageNavSmall> = {
+  title: 'Components/Navigation/InPageNavSmall',
+  component: InPageNavSmall,
+};
+export default meta;
+
+type Story = StoryObj<typeof InPageNavSmall>;
+
+export const Basic: Story = {
+  args: {
+    titles: [
+      {
+        title: 'Title 1',
+        id: 'title-1',
+      },
+      {
+        title: 'Title 2',
+        id: 'title-2',
+      },
+      {
+        title: 'Title 3',
+        id: 'title-3',
+      },
+    ],
+  },
+};