_includes/navigation.html

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
	<div class="container">
		<a class="navbar-brand" href="/"><img src="/images/karaf-logo-new.png"/></a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
			<div>
				<ul class="navbar-nav mr-auto align-items-center text-uppercase">
				  {% for item in site.data.navigation %}

					{% if item.hassubfolder %}
						{% assign subselected = item.subfolderitems | where:"link", page.url  | first %}
						<li class="drop-down {% if page.url == subselected.link %}active{% endif %}"><a href="#">{{ item.name }}</a>
							<ul>
								{% for subitem in item.subfolderitems %}
									<li class="nav-item"><a class="nav-link" href="{{ subitem.link }}">{{ subitem.name }}</a></li>
								{% endfor %}
							</ul>
						  </li>
					{% else %}
						<li {% if page.url == item.link %}class="nav-item active"{% endif %}><a class="nav-link" href="{{ item.link }}">{{ item.name }}</a></li>
					{% endif %}

				  {% endfor %}
					<li class="nav-item">
						<a class="nav-link" href="https://www.apache.org"><img src="/images/apache-feather-tm-new.png"/></a>
					</li>
				</ul>
			<div>
		</div>
	</div>
</nav>