nav-docs.html

<header class="navbar navbar-static-top bd-sidebar" id="top" role="banner">
  <a href="{{ site.baseurl }}/" class="navbar-brand">
    Bootstrap v4 alpha
  </a>

  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#docsNavbarContent">
    &#9776;
  </button>

  <form class="bd-search hidden-sm-down">
    <input type="text" class="form-control" id="search-input" placeholder="Search...">
    <ul class="dropdown-menu bd-search-results" id="search-results"></ul>
  </form>

  <nav class="bd-links collapse navbar-toggleable-xs" id="docsNavbarContent">
    {% for group in site.data.nav %}
      {% assign link = group.pages | first %}
      {% assign slug = group.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-' %}
      {% assign active = nil %}

      {% if page.url contains slug %}
        {% assign active = 'active' %}
      {% endif %}

      <div class="bd-toc-item {{ active }}">
        <a class="bd-toc-link" href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/">
          {{ group.title }}
        </a>

        <ul class="nav bd-sidenav">
          {% for doc in group.pages %}
            {% assign slug = doc.title | downcase | replace: ' ', '-' %}
            {% assign active = nil %}

            {% if page.url contains slug %}
              {% assign active = 'active bd-sidenav-active' %}
            {% endif %}

            <li class="{{ active }}">
              <a href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ doc.title | downcase | replace: ' ', '-' }}">
                {{ doc.title }}
              </a>

              {% unless doc.sections == nil %}
                <ul class="nav">
                  {% for section in doc.sections %}
                    <li>
                      <a href="#{{ section.title | downcase | replace: ' ', '-' }}">
                        {{ section.title }}
                      </a>
                    </li>
                  {% endfor %}
                </ul>
              {% endunless %}
            </li>
          {% endfor %}
        </ul>
      </div>
    {% endfor %}
  </nav>
</header>