diff --git a/src/app/components/Navigation/README.md b/src/app/components/Navigation/README.md
new file mode 100644
index 00000000000..d27d7872ded
--- /dev/null
+++ b/src/app/components/Navigation/README.md
@@ -0,0 +1,25 @@
+## Description
+
+This component renders a the navigation bar which comprises of two tiers, the primary being three categories and the secondary being links to topics.
+
+## Props
+
+| Name                      | type                        | Description                                               |
+| ------------------------- | --------------------------- | --------------------------------------------------------- |
+| navItems                  | Navigation[]                | Array of Navigation items to display within the component |
+| propsForTopBarOJComponent | { blocks?: TopStoryItem[] } | Optional object with blocks to display TopStoryItem       |
+
+## How to use
+
+Import and use the component in your page or story:
+
+```tsx
+import Navigation from './Navigation';
+```
+
+```tsx
+<NavigationComponent
+  navItems={navItems}
+  propsForTopBarOJComponent={propsForTopBarOJComponent}
+/>
+```
diff --git a/src/app/components/Navigation/index.stories.tsx b/src/app/components/Navigation/index.stories.tsx
index d2291ddba5f..c1f6d664e52 100644
--- a/src/app/components/Navigation/index.stories.tsx
+++ b/src/app/components/Navigation/index.stories.tsx
@@ -1,8 +1,68 @@
-const Component = () => <div>Navigation</div>;
+import Navigation from '.';
+import { ServiceContextProvider } from '#app/contexts/ServiceContext';
+import type {
+  Navigation as NavigationType,
+  Services,
+} from '#app/models/types/global';
+import readme from './README.md';
+import metadata from './metadata.json';
+
+interface Props {
+  navItems: NavigationType[];
+  service: Services;
+}
+
+const Component = ({ navItems, service }: Props) => {
+  return (
+    <ServiceContextProvider service={service}>
+      <Navigation navItems={navItems} />
+    </ServiceContextProvider>
+  );
+};
 
 export default {
-  title: 'Components/NewNavigation',
+  title: 'Components/Navigation',
   Component,
+  parameters: {
+    docs: { readme },
+    metadata,
+  },
 };
 
-export const Example = Component;
+export const Arabic = () => {
+  const navItems = [
+    {
+      title: 'رئيسية',
+      url: '/home',
+      subItems: [
+        { title: 'أخبار', url: '/home/section1' },
+        { title: 'شاهد', url: '/home/section2' },
+        { title: 'صحة وعلوم', url: '/home/section3' },
+      ],
+    },
+    {
+      title: 'شاهد',
+      url: '/news',
+    },
+  ];
+  return <Component navItems={navItems} service={'arabic'} />;
+};
+
+export const Pidgin = () => {
+  const navItems = [
+    {
+      title: 'News',
+      url: '/home',
+      subItems: [
+        { title: 'Nigeria', url: '/home/section1' },
+        { title: 'Africa', url: '/home/section2' },
+        { title: 'World', url: '/home/section3' },
+      ],
+    },
+    {
+      title: 'Video',
+      url: '/news',
+    },
+  ];
+  return <Component navItems={navItems} service={'pidgin'} />;
+};
diff --git a/src/app/components/Navigation/metadata.json b/src/app/components/Navigation/metadata.json
new file mode 100644
index 00000000000..4e517ba8410
--- /dev/null
+++ b/src/app/components/Navigation/metadata.json
@@ -0,0 +1,29 @@
+{
+  "alpha": false,
+  "lastUpdated": {
+    "day": 24,
+    "month": "February",
+    "year": 2026
+  },
+  "uxAccessibilityDoc": {
+    "done": false,
+    "reference": {
+      "url": "",
+      "label": "Screen Reader UX"
+    }
+  },
+  "acceptanceCriteria": {
+    "done": false,
+    "reference": {
+      "url": "",
+      "label": "Accessibility Acceptance Criteria"
+    }
+  },
+  "swarm": {
+    "done": false,
+    "reference": {
+      "url": "",
+      "label": "Accessibility Swarm Notes"
+    }
+  }
+}