diff --git a/content/footerNav.yml b/content/footerNav.yml
new file mode 100644
index 00000000000..c371ac1a73a
--- /dev/null
+++ b/content/footerNav.yml
@@ -0,0 +1,43 @@
+community:
+ title: Community
+
+docs:
+ title: Docs
+
+more:
+ title: More
+ items:
+ - title: Tutorial
+ to: /tutorial/tutorial.html
+ - title: Blog
+ to: /blog
+ - title: Acknowledgements
+ to: /acknowledgements.html
+ - title: React Native
+ to: https://facebook.github.io/react-native/
+ external: true
+
+channels:
+ title: Channels
+ items:
+ - title: Github
+ to: https://github.com/facebook/react
+ external: true
+ - title: Stack Overflow
+ to: https://stackoverflow.com/questions/tagged/reactjs
+ external: true
+ - title: Discussion Forums
+ to: https://reactjs.org/community/support.html#popular-discussion-forums
+ external: true
+ - title: Reactiflux Chat
+ to: https://discord.gg/0ZcbPKXt5bZjGY5n
+ external: true
+ - title: DEV Community
+ to: https://dev.to/t/react
+ external: true
+ - title: Facebook
+ to: https://www.facebook.com/react
+ external: true
+ - title: Twitter
+ to: https://twitter.com/reactjs
+ external: true
diff --git a/content/headerNav.yml b/content/headerNav.yml
new file mode 100644
index 00000000000..325a95c483d
--- /dev/null
+++ b/content/headerNav.yml
@@ -0,0 +1,13 @@
+items:
+ - title: Docs
+ to: /docs/getting-started.html
+ activeSelector: /docs/
+ - title: Tutorial
+ to: /tutorial/tutorial.html
+ activeSelector: /tutorial
+ - title: Blog
+ to: /blog/
+ activeSelector: /blog
+ - title: Community
+ to: /community/support.html
+ activeSelector: /community
diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js
index 43b7713fa84..93404e45ab5 100644
--- a/src/components/LayoutFooter/Footer.js
+++ b/src/components/LayoutFooter/Footer.js
@@ -6,14 +6,17 @@
*/
import Container from 'components/Container';
-import ExternalFooterLink from './ExternalFooterLink';
import FooterLink from './FooterLink';
import FooterNav from './FooterNav';
import MetaTitle from 'templates/components/MetaTitle';
+import SectionLinks from './SectionLinks';
import React from 'react';
import {colors, media} from 'theme';
import {sectionListCommunity, sectionListDocs} from 'utils/sectionList';
+// $FlowFixMe
+import navFooter from '../../../content/footerNav.yml';
+
import ossLogoPng from 'images/oss_logo.png';
const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
@@ -60,7 +63,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
},
}}>
- Docs
+ {navFooter.docs.title}
{sectionListDocs.map(section => {
const defaultItem = section.items[0];
return (
@@ -73,52 +76,11 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
})}
- Channels
-
- GitHub
-
-
- Stack Overflow
-
-
- Discussion Forums
-
-
- Reactiflux Chat
-
-
- DEV Community
-
-
- Facebook
-
-
- Twitter
-
+ {navFooter.channels.title}
+
- Community
+ {navFooter.community.title}
{sectionListCommunity.map(section => (
(
))}
- More
- Tutorial
- Blog
-
- Acknowledgements
-
-
- React Native
-
+ {navFooter.more.title}
+
+ links.map(item => {
+ if (item.external) {
+ return (
+
+ {item.title}
+
+ );
+ }
+
+ return (
+
+ {item.title}
+
+ );
+ });
+
+export default SectionLinks;
diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index e0a285e84ff..f12eb5a719a 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -14,6 +14,9 @@ import {version} from 'site-constants';
import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
import DocSearch from './DocSearch';
+// $FlowFixMe
+import navHeader from '../../../content/headerNav.yml';
+
import logoSvg from 'icons/logo.svg';
const Header = ({location}: {location: Location}) => (
@@ -120,26 +123,14 @@ const Header = ({location}: {location: Location}) => (
'linear-gradient(to right, transparent, black 20px, black 90%, transparent)',
},
}}>
-
-
-
-
+ {navHeader.items.map(link => (
+
+ ))}