OctoberCMS Bootstrap Menu

default.htm

{% if __SELF__.menuItems %}
    <div class="collapse navbar-collapse" id="navcol-1">
        <ul class="nav navbar-nav ml-auto">
            {% partial __SELF__ ~ "::items" items=__SELF__.menuItems %}
        </ul>
    </div>
{% endif %}

items.htm

{% for item in items if not item.viewBag.isHidden %}
  <li class="nav-item {{ item.items ? 'dropdown' : '' }}" role="presentation">
      {% if item.url %}
        <a class="nav-link
            {{ item.items ? 'dropdown-toggle' : '' }}
            {{ item.isActive ? 'active' : '' }}
            {{ item.isChildActive ? 'child-active' : '' }}
            {{ item.viewBag.cssClass }}"
            {% if item.items %}
                data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
            {% endif %}
           href="{{ item.url }}" {{ item.viewBag.isExternal ? 'target="_blank"' }}>
            {{ item.title }}
        </a>
      {% else %}
      <span class="nav-link
              {{ item.items ? 'dropdown-toggle' : '' }}
              {{ item.isActive ? 'active' : '' }}
              {{ item.isChildActive ? 'child-active' : '' }}
              {{ item.viewBag.cssClass }}"
            {% if item.items %}
              data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" {% endif %}>
        {{ item.title }}
      </span>
      {% endif %}

      {% if item.items %}
        <div class="dropdown-menu">
            {% for subitem in item.items %}
              <a class="dropdown-item{{ item.isActive ? ' active' : '' }}"  href="{{ subitem.url }}">{{ subitem.title }}</a>
            {% endfor %}
        </div>
      {% endif %}
  </li>
{% endfor %}