gulp-powered/src/partials/bone/topnav.html

A Gulp builded, Bootstrap-v4 powered static website app starter-kit project

<!-- declaring var in Nunjucks: use `set` keyword -->
{% set navs = [
    { title: 'Home', url: DIR + '/', state: 'home' },
    { title: 'About', url: DIR + 'about/', state: 'about' },
    { title: 'Services', url: DIR + 'services/', state: 'services' },
    { title: 'Contact', url: DIR + 'contact/', state: 'contact' }
] %}

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand" href="/">
      <svg viewBox="0 0 150 150" width="100" height="30">
        <image xlink:href="{{ MEDIA }}logo/copyleft.svg" />
      </svg>
    </a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <!-- for loop in Nunjucks -->
        {% for nav in navs %}
        {% if page == nav.state %}
        <li class="nav-item active">
          {% else %}
          <li class="nav-item">
            {% endif %}
            <a class="nav-link" href="{{ nav.url }}">
              <span>{{ nav.title }}</span>
            </a>
          </li>
          {% endfor %}
          <li class="nav-item">
            {% include 'bone/switch.html' %}
          </li>
        </ul>

      </div>
    </div>
  </nav>