nav-docs.html

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

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

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

  <nav class="bs-docs-links collapse hidden-xs-down" 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="bs-docs-toc-item {{ active }}">
        <a class="bs-docs-toc-link" href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ link.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-'  }}">
          {{ group.title }}
        </a>

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

            {% if page.url contains slug %}
              {% assign active = 'active bs-docs-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>