_includes/topnav.html

<header class="site-header">
  <div class="wrapper">
    <div class="site-header-content">
      <div class="site-title">
        <a href="{{ "/" | relative_url }}">
          <img src="/images/gerrit-logo.svg" alt="Gerrit Logo" class="header-logo">
          {{ site.title | escape }}
        </a>
      </div>
      
      <nav class="site-nav">
        <ul>
          {% for item in site.data.content.topnav %}
          {% if item.folderitems %}
          <!-- items with drop-downs handled here -->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle">{{ item.title }}</a>
            <ul class="dropdown-menu">
              {% for folderitem in item.folderitems %}
              {% if folderitem.external_url %}
              <li><a href="{{folderitem.external_url}}" target="_blank">{{folderitem.title}}</a></li>
              {% elsif page.url contains folderitem.url %}
              <li class="dropdownActive"><a href="{{folderitem.url}}">{{folderitem.title}}</a></li>
              {% else %}
              <li><a href="{{folderitem.url}}">{{folderitem.title}}</a></li>
              {% endif %}
              {% endfor %}
            </ul>
          </li>
          {% else %}
          <!-- items without drop-downs handled here -->
          {% if item.external_url %}
          <li><a href="{{item.external_url}}" target="_blank">{{item.title}}</a></li>
          {% else %}
          <li><a href="{{item.url}}">{{item.title}}</a></li>
          {% endif %}
          {% endif %}
          {% endfor %}
          {% if site.feedback_disable == null or site.feedback_disable == false %}
          {% include feedback.html %}
          {% endif %}
          <li>
            <!--start search-->
            <div id="search-container">
                <input type="text" id="search-input" placeholder="search...">
                <ul id="results-container"></ul>
            </div>
            <script src="{{ "/js/jekyll-search.js" }}" type="text/javascript"></script>
            <script type="text/javascript">
              SimpleJekyllSearch.init({
                searchInput: document.getElementById('search-input'),
                resultsContainer: document.getElementById('results-container'),
                dataSource: '{{ "/search.json" }}',
                searchResultTemplate: '<li><a href="{url}" title="{{page.title | escape }}">{title}</a></li>',
                noResultsText: 'No results found.',
                limit: 10,
                fuzzy: true,
              })
            </script>
            <!--end search-->
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>