</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>
</nav>
</div>
</header>
+