diff --git a/docs/_includes/home-nav.html b/docs/_includes/home-nav.html
index 2f80391b88..3bdb847735 100644
--- a/docs/_includes/home-nav.html
+++ b/docs/_includes/home-nav.html
@@ -11,21 +11,15 @@
     </div>
     <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
       <ul class="nav navbar-nav">
-        <li{% if page.slug == "getting-started" %} class="active"{% endif %}>
-          <a href="../getting-started">Getting started</a>
-        </li>
-        <li{% if page.slug == "css" %} class="active"{% endif %}>
-          <a href="../css">CSS</a>
-        </li>
-        <li{% if page.slug == "components" %} class="active"{% endif %}>
-          <a href="../components">Components</a>
-        </li>
-        <li{% if page.slug == "js" %} class="active"{% endif %}>
-          <a href="../javascript">JavaScript</a>
-        </li>
-        <li{% if page.slug == "customize" %} class="active"{% endif %}>
-          <a href="../customize">Customize</a>
-        </li>
+        {% for group in site.data.nav %}
+          {% assign link = group.pages | first %}
+          {% assign slug = group.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-' %}
+          <li class="nav-item">
+            <a class="nav-link" href="{{ site.baseurl }}{{ group.title | downcase | replace: ' ', '-' }}/{{ link.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-'  }}">
+              {{ group.title }}
+            </a>
+          </li>
+        {% endfor %}
       </ul>
       <ul class="nav navbar-nav navbar-right">
         <li><a href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a></li>
@@ -34,3 +28,4 @@
     </nav>
   </div>
 </header>
+