diff --git a/docs/test/feature.md b/docs/test/feature.md
new file mode 100644
index 0000000000000..8fe5cbc782df6
--- /dev/null
+++ b/docs/test/feature.md
@@ -0,0 +1,6 @@
+---
+id: feature
+title: Sub-directory Test
+---
+
+Testing subdirectory
diff --git a/lib/core/DocsLayout.js b/lib/core/DocsLayout.js
index 5889511637b3a..7f5b0ad7a2f23 100644
--- a/lib/core/DocsLayout.js
+++ b/lib/core/DocsLayout.js
@@ -28,6 +28,23 @@ class DocsLayout extends React.Component {
           this.props.metadata.localized_id
         ] || this.props.metadata.title
       : this.props.metadata.title;
+    const prevDir =
+      metadata.previous_id && metadata.previous_id.includes('/')
+        ? metadata.previous_id.split('/')[0]
+        : '.';
+    const curDir = metadata.id.includes('/') ? metadata.id.split('/')[0] : '.';
+    const nextDir =
+      metadata.next_id && metadata.next_id.includes('/')
+        ? metadata.next_id.split('/')[0]
+        : '.';
+    let prevLink = metadata.previous_id + '.html';
+    if (prevDir !== curDir && curDir != '.') {
+      prevLink = '../' + prevLink;
+    }
+    let nextLink = metadata.next_id + '.html';
+    if (nextDir !== curDir && curDir != '.') {
+      nextLink = '../' + nextLink;
+    }
     return (
       <Site
         config={this.props.config}
@@ -52,9 +69,7 @@ class DocsLayout extends React.Component {
             />
             <div className="docs-prevnext">
               {metadata.previous_id && (
-                <a
-                  className="docs-prev button"
-                  href={metadata.previous_id + '.html'}>
+                <a className="docs-prev button" href={prevLink}>
                   ←{' '}
                   {i18n
                     ? translation[this.props.metadata.language][
@@ -68,9 +83,7 @@ class DocsLayout extends React.Component {
                 </a>
               )}
               {metadata.next_id && (
-                <a
-                  className="docs-next button"
-                  href={metadata.next_id + '.html'}>
+                <a className="docs-next button" href={nextLink}>
                   {i18n
                     ? translation[this.props.metadata.language][
                         'localized-strings'
diff --git a/lib/server/readMetadata.js b/lib/server/readMetadata.js
index fd1e24551fc89..0e61af555fbef 100644
--- a/lib/server/readMetadata.js
+++ b/lib/server/readMetadata.js
@@ -150,6 +150,15 @@ function processMetadata(file) {
   if (metadata.id.includes('/')) {
     throw new Error('Document id cannot include "/".');
   }
+
+  // if file is located in subdirectory,
+  // it will have the directory name appended to it's id
+  const curDir = path.dirname(file.split(getDocsPath() + '/')[1]);
+  if (curDir !== '.') {
+    metadata.id = curDir + '/' + metadata.id;
+    metadata.source = curDir + '/' + metadata.source;
+  }
+
   if (!metadata.title) {
     metadata.title = metadata.id;
   }
diff --git a/website/sidebars.json b/website/sidebars.json
index 0f3f0d6ee9830..28523252a0d26 100644
--- a/website/sidebars.json
+++ b/website/sidebars.json
@@ -19,6 +19,9 @@
       "doc-markdown",
       "api-pages",
       "site-config"
+    ],
+    "Test": [
+      "test/feature"
     ]
   }
 }