diff --git a/packages/components/psammead-navigation/CHANGELOG.md b/packages/components/psammead-navigation/CHANGELOG.md
index a42b7a1aa8..1f4bda9794 100644
--- a/packages/components/psammead-navigation/CHANGELOG.md
+++ b/packages/components/psammead-navigation/CHANGELOG.md
@@ -3,6 +3,8 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 2.3.0 | [PR#2117](https://github.com/bbc/psammead/pull/2117) Pass `dir` prop to `Navigation` component instead of `NavigationLi` |
+| 2.2.11 | [PR#2092](https://github.com/bbc/psammead/pull/2092) Refactored navigation component |
 | 2.2.12 | [PR#2145](https://github.com/bbc/psammead/pull/2145) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 2.2.11 | [PR#1963](https://github.com/bbc/psammead/pull/2092) Refactored navigation component
 | 2.2.10 | [PR#2081](https://github.com/bbc/psammead/pull/2081) Talos - Bump Dependencies - @bbc/psammead-styles, @bbc/psammead-visually-hidden-text |
diff --git a/packages/components/psammead-navigation/README.md b/packages/components/psammead-navigation/README.md
index 0ab5f2ca06..b193a898b5 100644
--- a/packages/components/psammead-navigation/README.md
+++ b/packages/components/psammead-navigation/README.md
@@ -19,6 +19,7 @@ The `@bbc/psammead-navigation` package is a set of two components, `NavigationUl
 | script   | object  | Yes   | N/A     |  `{ canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, }` |
 | skipLinkText | string | Yes | N/A    | `Skip to content` |
 | service | string | Yes | N/A | `'news'` |
+| dir      | string  | No       | `ltr`   | `rtl` |
 
 ### NavigationUl
 
@@ -34,7 +35,6 @@ The `@bbc/psammead-navigation` package is a set of two components, `NavigationUl
 | -------- | ------- | -------- | ------- | -------- |
 | url      | string  | Yes      | N/A     | `/sport` |
 | script   | object  | Yes      | N/A     |  `{ canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, }` |
-| dir      | string  | No       | `ltr`   | `rtl`    |
 | active   | boolean | No       | `false` | `true`   |
 | currentPageText | string | No | `null`  | `Current page` |
 | service | string | Yes | N/A | `'news'` |
diff --git a/packages/components/psammead-navigation/package-lock.json b/packages/components/psammead-navigation/package-lock.json
index 36deaeca0e..5538f8f481 100644
--- a/packages/components/psammead-navigation/package-lock.json
+++ b/packages/components/psammead-navigation/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-navigation",
-  "version": "2.2.12",
+  "version": "2.3.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/packages/components/psammead-navigation/package.json b/packages/components/psammead-navigation/package.json
index 563a04bea6..1c753c99d8 100644
--- a/packages/components/psammead-navigation/package.json
+++ b/packages/components/psammead-navigation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-navigation",
-  "version": "2.2.12",
+  "version": "2.3.0",
   "description": "A navigation bar to use on index pages",
   "main": "dist/index.js",
   "module": "esm/index.js",
diff --git a/packages/components/psammead-navigation/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-navigation/src/__snapshots__/index.test.jsx.snap
index fbac43baaf..79a4373e1a 100644
--- a/packages/components/psammead-navigation/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-navigation/src/__snapshots__/index.test.jsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Navigation should render correctly 1`] = `
-.c7 {
+.c8 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   -webkit-clip: rect(1px,1px,1px,1px);
@@ -13,10 +13,6 @@ exports[`Navigation should render correctly 1`] = `
   margin: 0;
 }
 
-.c0 {
-  background-color: #B80000;
-}
-
 .c1 {
   position: relative;
   max-width: 80rem;
@@ -64,23 +60,22 @@ exports[`Navigation should render correctly 1`] = `
   overflow: hidden;
 }
 
-.c4 {
+.c5 {
   display: inline-block;
   position: relative;
   z-index: 2;
 }
 
-.c4::after {
+.c5::after {
   content: '';
   position: absolute;
   bottom: 0;
   width: 80rem;
   border-bottom: 0.0625rem solid #eab3b3;
   z-index: -1;
-  left: 0;
 }
 
-.c5 {
+.c6 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -94,7 +89,7 @@ exports[`Navigation should render correctly 1`] = `
   padding: 0.75rem 1rem;
 }
 
-.c5:hover::after {
+.c6:hover::after {
   content: '';
   position: absolute;
   left: 0;
@@ -104,7 +99,7 @@ exports[`Navigation should render correctly 1`] = `
   border-bottom: 0.3125rem solid #FFFFFF;
 }
 
-.c5:focus::after {
+.c6:focus::after {
   content: '';
   position: absolute;
   left: 0;
@@ -115,7 +110,7 @@ exports[`Navigation should render correctly 1`] = `
   border: 0.25rem solid #FFFFFF;
 }
 
-.c8 {
+.c9 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: ReithSans,Helvetica,Arial,sans-serif;
@@ -129,7 +124,7 @@ exports[`Navigation should render correctly 1`] = `
   padding: 0.75rem 1rem;
 }
 
-.c8:hover::after {
+.c9:hover::after {
   content: '';
   position: absolute;
   left: 0;
@@ -138,7 +133,7 @@ exports[`Navigation should render correctly 1`] = `
   border-bottom: 0.25rem solid #FFFFFF;
 }
 
-.c8:focus::after {
+.c9:focus::after {
   content: '';
   position: absolute;
   left: 0;
@@ -149,7 +144,7 @@ exports[`Navigation should render correctly 1`] = `
   border: 0.25rem solid #FFFFFF;
 }
 
-.c6::after {
+.c7::after {
   content: '';
   position: absolute;
   left: 0;
@@ -158,6 +153,14 @@ exports[`Navigation should render correctly 1`] = `
   border-bottom: 0.25rem solid #FFFFFF;
 }
 
+.c0 {
+  background-color: #B80000;
+}
+
+.c0 .c4::after {
+  left: 0;
+}
+
 @media (min-width:20rem) and (max-width:37.4375rem) {
   .c2 {
     font-size: 1rem;
@@ -185,47 +188,48 @@ exports[`Navigation should render correctly 1`] = `
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
-  .c5 {
+  .c6 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c5 {
+  .c6 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (max-width:24.9375rem) {
-  .c5 {
+  .c6 {
     padding: 0.75rem 0.5rem;
   }
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
-  .c8 {
+  .c9 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c8 {
+  .c9 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (max-width:24.9375rem) {
-  .c8 {
+  .c9 {
     padding: 0.75rem 0.5rem;
   }
 }
 
 <nav
   class="c0"
+  dir="ltr"
   role="navigation"
 >
   <div
@@ -242,20 +246,19 @@ exports[`Navigation should render correctly 1`] = `
       role="list"
     >
       <li
-        class="c4"
-        dir="ltr"
+        class="c4 c5"
         role="listitem"
       >
         <a
-          class="c5"
+          class="c6"
           href="/igbo"
         >
           <span
-            class="c6"
+            class="c7"
             role="text"
           >
             <span
-              class="c7"
+              class="c8"
             >
               Current page
               , 
@@ -265,36 +268,33 @@ exports[`Navigation should render correctly 1`] = `
         </a>
       </li>
       <li
-        class="c4"
-        dir="ltr"
+        class="c4 c5"
         role="listitem"
       >
         <a
-          class="c8"
+          class="c9"
           href="/igbo/egwuregwu"
         >
           Egwuregwu
         </a>
       </li>
       <li
-        class="c4"
-        dir="ltr"
+        class="c4 c5"
         role="listitem"
       >
         <a
-          class="c8"
+          class="c9"
           href="/igbo/media/video"
         >
           Ihe nkiri
         </a>
       </li>
       <li
-        class="c4"
-        dir="ltr"
+        class="c4 c5"
         role="listitem"
       >
         <a
-          class="c8"
+          class="c9"
           href="/igbo/popular/read"
         >
           Nke ka ewuewu
diff --git a/packages/components/psammead-navigation/src/index.jsx b/packages/components/psammead-navigation/src/index.jsx
index aad7feb728..8310183b0a 100644
--- a/packages/components/psammead-navigation/src/index.jsx
+++ b/packages/components/psammead-navigation/src/index.jsx
@@ -29,10 +29,6 @@ const SKIP_LINK_BORDER = '0.1875rem'; // 3px
 const SKIP_LINK_TOP_POSITION_LARGE = '-4rem'; // -64px
 const SKIP_LINK_TOP_POSITION_SMALL = '-3rem'; // -48px
 
-const StyledNav = styled.nav`
-  background-color: ${C_POSTBOX};
-`;
-
 const NavWrapper = styled.div`
   position: relative;
   max-width: ${GEL_GROUP_5_SCREEN_WIDTH_MIN};
@@ -93,15 +89,6 @@ const StyledListItem = styled.li`
     width: ${GEL_GROUP_5_SCREEN_WIDTH_MIN};
     border-bottom: 0.0625rem solid ${BORDER_COLOR};
     z-index: -1;
-
-    ${({ dir }) =>
-      dir === 'ltr'
-        ? css`
-            left: 0;
-          `
-        : css`
-            right: 0;
-          `}
   }
 `;
 
@@ -172,12 +159,11 @@ export const NavigationLi = ({
   children: link,
   url,
   script,
-  dir,
   currentPageText,
   active,
   service,
 }) => (
-  <StyledListItem role="listitem" dir={dir}>
+  <StyledListItem role="listitem">
     {active && currentPageText ? (
       <StyledLink
         href={url}
@@ -197,8 +183,20 @@ export const NavigationLi = ({
   </StyledListItem>
 );
 
-const Navigation = ({ children, script, skipLinkText, service }) => (
-  <StyledNav role="navigation">
+const StyledNav = styled.nav`
+  background-color: ${C_POSTBOX};
+
+  ${StyledListItem} {
+    ${({ dir }) => css`
+      &::after {
+        ${dir === 'ltr' ? 'left' : 'right'}: 0;
+      }
+    `}
+  }
+`;
+
+const Navigation = ({ children, script, skipLinkText, service, dir }) => (
+  <StyledNav role="navigation" dir={dir}>
     <NavWrapper>
       <SkipLink href="#content" script={script} service={service}>
         {skipLinkText}
@@ -213,8 +211,11 @@ Navigation.propTypes = {
   script: shape(scriptPropType).isRequired,
   skipLinkText: string.isRequired,
   service: string.isRequired,
+  dir: oneOf(['ltr', 'rtl']),
 };
 
+Navigation.defaultProps = { dir: 'ltr' };
+
 NavigationUl.propTypes = {
   children: node.isRequired,
 };
@@ -223,14 +224,12 @@ NavigationLi.propTypes = {
   children: node.isRequired,
   url: string.isRequired,
   script: shape(scriptPropType).isRequired,
-  dir: oneOf(['ltr', 'rtl']),
   active: bool,
   currentPageText: string,
   service: string.isRequired,
 };
 
 NavigationLi.defaultProps = {
-  dir: 'ltr',
   active: false,
   currentPageText: null,
 };
diff --git a/packages/components/psammead-navigation/src/index.stories.jsx b/packages/components/psammead-navigation/src/index.stories.jsx
index f5339f50fd..6ebd3b042d 100644
--- a/packages/components/psammead-navigation/src/index.stories.jsx
+++ b/packages/components/psammead-navigation/src/index.stories.jsx
@@ -16,6 +16,8 @@ import Navigation, { NavigationUl, NavigationLi } from './index';
 import igboNavData from '../testHelpers/igbo';
 import pidginNavData from '../testHelpers/pidgin';
 import yorubaNavData from '../testHelpers/yoruba';
+import arabicNavData from '../testHelpers/arabic';
+
 import notes from '../README.md';
 
 const navStoriesData = [
@@ -37,6 +39,13 @@ const navStoriesData = [
     currentPageText: 'Current page',
     data: yorubaNavData,
   },
+  {
+    title: 'arabic',
+    skipLinkText: 'إذهب الى المحتوى',
+    currentPageText: 'Current page',
+    data: arabicNavData,
+    dir: 'rtl',
+  },
 ];
 
 const offScreenText = (
@@ -111,10 +120,10 @@ const StyledMain = styled.main`
   padding: 0px 1rem;
 `;
 
-const navigationStory = (skipLinkText, currentPageText, navData, brand) =>
+const navigationStory = (skipLinkText, currentPageText, navData, dir, brand) =>
   inputProvider({
     // eslint-disable-next-line react/prop-types
-    componentFunction: ({ script, dir, service }) => (
+    componentFunction: ({ script, service }) => (
       <>
         {brand && getBrand()}
 
@@ -122,6 +131,7 @@ const navigationStory = (skipLinkText, currentPageText, navData, brand) =>
           script={script}
           skipLinkText={skipLinkText}
           service={service}
+          dir={dir}
         >
           <NavigationUl>
             {navData.map((item, index) => {
@@ -133,7 +143,6 @@ const navigationStory = (skipLinkText, currentPageText, navData, brand) =>
                   key={title}
                   url={url}
                   script={script}
-                  dir={dir}
                   active={active}
                   currentPageText={currentPageText}
                   service={service}
@@ -161,10 +170,10 @@ const storiesWithoutBrand = storiesOf(
   .addDecorator(dirDecorator);
 
 navStoriesData.map(item => {
-  const { title, skipLinkText, currentPageText, data } = item;
+  const { title, skipLinkText, currentPageText, data, dir } = item;
   return storiesWithoutBrand.add(
     title,
-    navigationStory(skipLinkText, currentPageText, data),
+    navigationStory(skipLinkText, currentPageText, data, dir),
     {
       notes,
     },
@@ -181,6 +190,7 @@ storiesWithBrand.add(
     navStoriesData[0].skipLinkText,
     navStoriesData[0].currentPageText,
     igboNavData,
+    navStoriesData[0].dir,
     true,
   ),
   {
diff --git a/packages/components/psammead-navigation/testHelpers/arabic.js b/packages/components/psammead-navigation/testHelpers/arabic.js
new file mode 100644
index 0000000000..ef459c1888
--- /dev/null
+++ b/packages/components/psammead-navigation/testHelpers/arabic.js
@@ -0,0 +1,72 @@
+const arabicNavData = [
+  {
+    title: 'رئيسية',
+    url: '/arabic',
+  },
+  {
+    title: 'شرق أوسط',
+    url: '/arabic/middleeast',
+  },
+  {
+    title: 'عالم',
+    url: '/arabic/world',
+  },
+  {
+    title: 'علوم وتكنولوجيا',
+    url: '/arabic/scienceandtech',
+  },
+  {
+    title: 'صحة',
+    url: '/arabic/topics/c4794229-7f87-43ce-ac0a-6cfcd6d3cef2',
+  },
+  {
+    title: 'اقتصاد',
+    url: '/arabic/business',
+  },
+  {
+    title: 'فنون',
+    url: '/arabic/artandculture',
+  },
+  {
+    title: 'رياضة',
+    url: '/arabic/sports',
+  },
+  {
+    title: 'مجلة',
+    url: '/arabic/magazine',
+  },
+  {
+    title: 'مرأة',
+    url: '/arabic/topics/e45cb5f8-3c87-4ebd-ac1c-058e9be22862',
+  },
+  {
+    title: 'فيديو',
+    url: '/arabic/media',
+  },
+  {
+    title: 'صحافة',
+    url: '/arabic/inthepress',
+  },
+  {
+    title: 'صور',
+    url: '/arabic/media/photogalleries',
+  },
+  {
+    title: 'برامجنا',
+    url: '/arabic/tv-and-radio-37728883',
+  },
+  {
+    title: 'ترند',
+    url: '/arabic/trending',
+  },
+  {
+    title: 'حوارات',
+    url: '/arabic/interactivity',
+  },
+  {
+    title: 'ملفات',
+    url: '/arabic/in_depth',
+  },
+];
+
+export default arabicNavData;