diff --git a/content/docs/reference-dom-elements.md b/content/api/dom-elements.md
similarity index 99%
rename from content/docs/reference-dom-elements.md
rename to content/api/dom-elements.md
index fb010ca61da..81c0dbf6401 100644
--- a/content/docs/reference-dom-elements.md
+++ b/content/api/dom-elements.md
@@ -3,8 +3,9 @@ id: dom-elements
 title: DOM Elements
 layout: docs
 category: Reference
-permalink: docs/dom-elements.html
+permalink: api/dom-elements.html
 redirect_from:
+  - "docs/dom-elements.html"
   - "docs/tags-and-attributes.html"
   - "docs/dom-differences.html"
   - "docs/special-non-dom-attributes.html"
diff --git a/content/docs/reference-events.md b/content/api/events.md
similarity index 99%
rename from content/docs/reference-events.md
rename to content/api/events.md
index 828b63917e3..d90d3ec9362 100644
--- a/content/docs/reference-events.md
+++ b/content/api/events.md
@@ -1,9 +1,11 @@
 ---
 id: events
 title: SyntheticEvent
-permalink: docs/events.html
+permalink: api/events.html
 layout: docs
 category: Reference
+redirect_from:
+  - "docs/events.html"
 ---
 
 This reference guide documents the `SyntheticEvent` wrapper that forms part of React's Event System. See the [Handling Events](/docs/handling-events.html) guide to learn more.
diff --git a/content/docs/reference-glossary.md b/content/api/glossary.md
similarity index 99%
rename from content/docs/reference-glossary.md
rename to content/api/glossary.md
index 0cbac1981ce..63bf61e3621 100644
--- a/content/docs/reference-glossary.md
+++ b/content/api/glossary.md
@@ -3,8 +3,9 @@ id: glossary
 title: Glossary of React Terms
 layout: docs
 category: Reference
-permalink: docs/glossary.html
-
+permalink: api/glossary.html
+redirect_from:
+  - "docs/glossary.html"
 ---
 
 ## Single-page Application
diff --git a/content/docs/reference-javascript-environment-requirements.md b/content/api/javascript-environment-requirements.md
similarity index 90%
rename from content/docs/reference-javascript-environment-requirements.md
rename to content/api/javascript-environment-requirements.md
index 398266425cd..ac59f74742e 100644
--- a/content/docs/reference-javascript-environment-requirements.md
+++ b/content/api/javascript-environment-requirements.md
@@ -3,7 +3,9 @@ id: javascript-environment-requirements
 title: JavaScript Environment Requirements
 layout: docs
 category: Reference
-permalink: docs/javascript-environment-requirements.html
+permalink: api/javascript-environment-requirements.html
+redirect_from:
+  - "docs/javascript-environment-requirements.html"
 ---
 
 React 16 depends on the collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). If you support older browsers and devices which may not yet provide these natively (e.g. IE < 11), consider including a global polyfill in your bundled application, such as [core-js](https://github.com/zloirock/core-js) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/).
diff --git a/content/api/nav.yml b/content/api/nav.yml
new file mode 100644
index 00000000000..99f70ed7f2a
--- /dev/null
+++ b/content/api/nav.yml
@@ -0,0 +1,25 @@
+- title: Reference
+  items:
+    - id: react-api
+      title: React
+      subitems:
+        - id: react-component
+          title: React.Component
+    - id: react-dom
+      title: ReactDOM
+    - id: react-dom-server
+      title: ReactDOMServer
+    - id: dom-elements
+      title: DOM Elements
+    - id: events
+      title: SyntheticEvent
+    - id: test-utils
+      title: Test Utilities
+    - id: shallow-renderer
+      title: Shallow Renderer
+    - id: test-renderer
+      title: Test Renderer
+    - id: javascript-environment-requirements
+      title: JS Environment Requirements
+    - id: glossary
+      title: Glossary
\ No newline at end of file
diff --git a/content/docs/reference-pure-render-mixin.md b/content/api/pure-render-mixin.md
similarity index 95%
rename from content/docs/reference-pure-render-mixin.md
rename to content/api/pure-render-mixin.md
index 6da08e31b25..4d5f954d4b3 100644
--- a/content/docs/reference-pure-render-mixin.md
+++ b/content/api/pure-render-mixin.md
@@ -3,7 +3,9 @@ id: pure-render-mixin
 title: PureRenderMixin
 layout: docs
 category: Reference
-permalink: docs/pure-render-mixin.html
+permalink: api/pure-render-mixin.html
+redirect_from:
+  - "docs/pure-render-mixin.html"
 ---
 
 > Note
diff --git a/content/docs/reference-react-component.md b/content/api/react-component.md
similarity index 99%
rename from content/docs/reference-react-component.md
rename to content/api/react-component.md
index 153b0a62fca..a1abd380a38 100644
--- a/content/docs/reference-react-component.md
+++ b/content/api/react-component.md
@@ -3,8 +3,9 @@ id: react-component
 title: React.Component
 layout: docs
 category: Reference
-permalink: docs/react-component.html
+permalink: api/react-component.html
 redirect_from:
+  - "docs/react-component.html"
   - "docs/component-api.html"
   - "docs/component-specs.html"
   - "docs/component-specs-ko-KR.html"
diff --git a/content/docs/reference-react-dom-server.md b/content/api/react-dom-server.md
similarity index 98%
rename from content/docs/reference-react-dom-server.md
rename to content/api/react-dom-server.md
index 4db8f492983..3a9df3b801a 100644
--- a/content/docs/reference-react-dom-server.md
+++ b/content/api/react-dom-server.md
@@ -3,7 +3,9 @@ id: react-dom-server
 title: ReactDOMServer
 layout: docs
 category: Reference
-permalink: docs/react-dom-server.html
+permalink: api/react-dom-server.html
+redirect_from:
+  - "docs/react-dom-server.html"
 ---
 
 The `ReactDOMServer` object enables you to render components to static markup. Typically, it's used on a Node server:
diff --git a/content/docs/reference-react-dom.md b/content/api/react-dom.md
similarity index 98%
rename from content/docs/reference-react-dom.md
rename to content/api/react-dom.md
index 319e395ba82..86feeae1456 100644
--- a/content/docs/reference-react-dom.md
+++ b/content/api/react-dom.md
@@ -3,7 +3,9 @@ id: react-dom
 title: ReactDOM
 layout: docs
 category: Reference
-permalink: docs/react-dom.html
+permalink: api/react-dom.html
+redirect_from:
+  - "docs/react-dom.html"
 ---
 
 If you load React from a `<script>` tag, these top-level APIs are available on the `ReactDOM` global. If you use ES6 with npm, you can write `import ReactDOM from 'react-dom'`. If you use ES5 with npm, you can write `var ReactDOM = require('react-dom')`.
diff --git a/content/docs/reference-react.md b/content/api/react.md
similarity index 99%
rename from content/docs/reference-react.md
rename to content/api/react.md
index 4b1885aeda0..3c6b4614948 100644
--- a/content/docs/reference-react.md
+++ b/content/api/react.md
@@ -3,8 +3,9 @@ id: react-api
 title: React Top-Level API
 layout: docs
 category: Reference
-permalink: docs/react-api.html
+permalink: api/react-api.html
 redirect_from:
+  - "docs/react-api.html"
   - "docs/reference.html"
   - "docs/clone-with-props.html"
   - "docs/top-level-api.html"
diff --git a/content/docs/addons-shallow-renderer.md b/content/api/shallow-renderer.md
similarity index 96%
rename from content/docs/addons-shallow-renderer.md
rename to content/api/shallow-renderer.md
index 6d3e5dfa077..ef1f3a046b1 100644
--- a/content/docs/addons-shallow-renderer.md
+++ b/content/api/shallow-renderer.md
@@ -1,9 +1,11 @@
 ---
 id: shallow-renderer
 title: Shallow Renderer
-permalink: docs/shallow-renderer.html
+permalink: api/shallow-renderer.html
 layout: docs
 category: Reference
+redirect_from:
+  - "docs/shallow-renderer.html"
 ---
 
 **Importing**
diff --git a/content/docs/reference-test-renderer.md b/content/api/test-renderer.md
similarity index 99%
rename from content/docs/reference-test-renderer.md
rename to content/api/test-renderer.md
index 4c6bcfc4470..9f02ab221eb 100644
--- a/content/docs/reference-test-renderer.md
+++ b/content/api/test-renderer.md
@@ -1,9 +1,11 @@
 ---
 id: test-renderer
 title: Test Renderer
-permalink: docs/test-renderer.html
+permalink: api/test-renderer.html
 layout: docs
 category: Reference
+redirect_from:
+  - "docs/test-renderer.html"
 ---
 
 **Importing**
diff --git a/content/docs/addons-test-utils.md b/content/api/test-utils.md
similarity index 98%
rename from content/docs/addons-test-utils.md
rename to content/api/test-utils.md
index d83be3e611e..5e8fd94fac2 100644
--- a/content/docs/addons-test-utils.md
+++ b/content/api/test-utils.md
@@ -1,9 +1,11 @@
 ---
 id: test-utils
 title: Test Utilities
-permalink: docs/test-utils.html
+permalink: api/test-utils.html
 layout: docs
 category: Reference
+redirect_from:
+  - "docs/test-utils.html"
 ---
 
 **Importing**
diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index 7b385b3d416..bfb125753fd 100644
--- a/content/docs/nav.yml
+++ b/content/docs/nav.yml
@@ -58,31 +58,6 @@
       title: Integrating with Other Libraries
     - id: accessibility
       title: Accessibility
-- title: Reference
-  items:
-    - id: react-api
-      title: React
-      subitems:
-        - id: react-component
-          title: React.Component
-    - id: react-dom
-      title: ReactDOM
-    - id: react-dom-server
-      title: ReactDOMServer
-    - id: dom-elements
-      title: DOM Elements
-    - id: events
-      title: SyntheticEvent
-    - id: test-utils
-      title: Test Utilities
-    - id: shallow-renderer
-      title: Shallow Renderer
-    - id: test-renderer
-      title: Test Renderer
-    - id: javascript-environment-requirements
-      title: JS Environment Requirements
-    - id: glossary
-      title: Glossary
 - title: Contributing
   items:
   - id: how-to-contribute
diff --git a/gatsby-node.js b/gatsby-node.js
index 0fc10c4f15e..edd86c7df16 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -31,6 +31,7 @@ exports.createPages = async ({graphql, boundActionCreators}) => {
   const blogTemplate = resolve('./src/templates/blog.js');
   const communityTemplate = resolve('./src/templates/community.js');
   const docsTemplate = resolve('./src/templates/docs.js');
+  const apiTemplate = resolve('./src/templates/api.js');
   const tutorialTemplate = resolve('./src/templates/tutorial.js');
   const homeTemplate = resolve('./src/templates/home.js');
 
@@ -77,6 +78,7 @@ exports.createPages = async ({graphql, boundActionCreators}) => {
       slug.includes('community/') ||
       slug.includes('contributing/') ||
       slug.includes('docs/') ||
+      slug.includes('api/') ||
       slug.includes('tutorial/') ||
       slug.includes('warnings/')
     ) {
@@ -85,6 +87,8 @@ exports.createPages = async ({graphql, boundActionCreators}) => {
         template = blogTemplate;
       } else if (slug.includes('community/')) {
         template = communityTemplate;
+      } else if (slug.includes('api/')) {
+        template = apiTemplate;
       } else if (
         slug.includes('contributing/') ||
         slug.includes('docs/') ||
diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index d3bc48fa7f2..c42a7a461d8 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -118,6 +118,11 @@ const Header = ({location}) => (
             title="Docs"
             to="/docs/hello-world.html"
           />
+          <HeaderLink
+            isActive={location.pathname.includes('/api/')}
+            title="API"
+            to="/api/react-api.html"
+          />
           <HeaderLink
             isActive={location.pathname.includes('/tutorial/')}
             title="Tutorial"
diff --git a/src/layouts/index.js b/src/layouts/index.js
index b8e68576d00..2637c207927 100644
--- a/src/layouts/index.js
+++ b/src/layouts/index.js
@@ -42,7 +42,7 @@ class Template extends Component {
     let layoutHasSidebar = false;
     if (
       location.pathname.match(
-        /^\/(docs|tutorial|community|blog|contributing|warnings)/,
+        /^\/(docs|api|tutorial|community|blog|contributing|warnings)/,
       )
     ) {
       layoutHasSidebar = true;
diff --git a/src/templates/api.js b/src/templates/api.js
new file mode 100644
index 00000000000..67fb8d4d98d
--- /dev/null
+++ b/src/templates/api.js
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import MarkdownPage from 'components/MarkdownPage';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {createLinkDocs} from 'utils/createLink';
+import {sectionListAPI} from 'utils/sectionList';
+
+const Api = ({data, location}) => (
+  <MarkdownPage
+    createLink={createLinkDocs}
+    location={location}
+    markdownRemark={data.markdownRemark}
+    sectionList={sectionListAPI}
+    titlePostfix=" - React"
+  />
+);
+
+Api.propTypes = {
+  data: PropTypes.object.isRequired,
+};
+
+// eslint-disable-next-line no-undef
+export const pageQuery = graphql`
+  query TemplateApiMarkdown($slug: String!) {
+    markdownRemark(fields: {slug: {eq: $slug}}) {
+      html
+      frontmatter {
+        title
+        next
+        prev
+      }
+      fields {
+        path
+        slug
+      }
+    }
+  }
+`;
+
+export default Api;
diff --git a/src/utils/sectionList.js b/src/utils/sectionList.js
index b7cb8ae4206..4c41a9f5000 100644
--- a/src/utils/sectionList.js
+++ b/src/utils/sectionList.js
@@ -9,6 +9,7 @@
 import navCommunity from '../../content/community/nav.yml';
 import navDocs from '../../content/docs/nav.yml';
 import navTutorial from '../../content/tutorial/nav.yml';
+import navAPI from '../../content/api/nav.yml';
 
 const sectionListDocs = navDocs.map(item => ({
   ...item,
@@ -20,8 +21,14 @@ const sectionListCommunity = navCommunity.map(item => ({
   directory: 'community',
 }));
 
+const sectionListAPI = navAPI.map(item => ({
+  ...item,
+  directory: 'api',
+}));
+
 export {
   sectionListCommunity,
   sectionListDocs,
+  sectionListAPI,
   navTutorial as sectionListTutorial,
 };