{% macro renderTopMenu(context, item) %}
  {% set journal3 = context.journal3 %}
  {% set image_width = context.image_width %}
  {% set image_height = context.image_height %}
  <li class="{{ journal3.classes(item.classes) }}">
    {% if item.items %}
      {% if item.link.href %}
        <a href="{{ item.link.href }}" {{ journal3.linkAttrs(item.link) }} class="dropdown-toggle" data-toggle="dropdown" title="{{ item.title }}">
          {% if item.thumb %}
            <span class="menu-image"><img src="{{ item.thumb }}" {% if item.thumb2x %}srcset="{{ item.thumb }} 1x, {{ item.thumb2x }} 2x" {% endif %} alt="{{ item.title }}" width="{{ image_width }}" height="{{ image_height }}"/></span>
          {% endif %}
          {{ journal3.countBadge(item.title, item.link.total, item.link.classes) }}
        </a>
      {% else %}
        <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" title="{{ item.title }}">
          {% if item.thumb %}
            <span class="menu-image"><img src="{{ item.thumb }}" {% if item.thumb2x %}srcset="{{ item.thumb }} 1x, {{ item.thumb2x }} 2x" {% endif %} alt="{{ item.title }}" width="{{ image_width }}" height="{{ image_height }}"/></span>
          {% endif %}
          {{ journal3.countBadge(item.title, item.link.total, item.link.classes) }}
        </a>
      {% endif %}
      <div class="dropdown-menu j-dropdown {{ item.dropdown_color_scheme ?: context.dropdown_color_scheme }}">
        <ul class="j-menu">
          {% for subitem in item.items %}
            {{ _self.renderTopMenu(context, subitem) }}
          {% endfor %}
        </ul>
      </div>
    {% else %}
      {% if item.link.href %}
        <a href="{{ item.link.href }}" {{ journal3.linkAttrs(item.link) }} title="{{ item.title }}">
          {% if item.thumb %}
            <span class="menu-image"><img src="{{ item.thumb }}" {% if item.thumb2x %}srcset="{{ item.thumb }} 1x, {{ item.thumb2x }} 2x" {% endif %} alt="{{ item.title }}" width="{{ image_width }}" height="{{ image_height }}"/></span>
          {% endif %}
          {{ journal3.countBadge(item.title, item.link.total, item.link.classes) }}
        </a>
      {% else %}
        <a href="javascript:;" title="{{ item.title }}">
          {% if item.thumb %}
            <span class="menu-image"><img src="{{ item.thumb }}" {% if item.thumb2x %}srcset="{{ item.thumb }} 1x, {{ item.thumb2x }} 2x" {% endif %} alt="{{ item.title }}" width="{{ image_width }}" height="{{ image_height }}"/></span>
          {% endif %}
          {{ journal3.countBadge(item.title, item.link.total, item.link.classes) }}
        </a>
      {% endif %}
    {% endif %}
  </li>
{% endmacro %}
{% if items %}
  <div class="{{ journal3.classes(classes) }}">
    <button aria-label="Edit" class="admin-edit" type="button" data-edit="{{ edit }}"><em class="fa fa-pencil" data-placement="auto" data-toggle="tooltip-hover" data-tooltip-class="admin-edit-tooltip" title="Edit {{ name }}"></em></button>
    <ul class="j-menu">
      {% for item in items %}
        {{ _self.renderTopMenu(_context, item) }}
      {% endfor %}
    </ul>
  </div>
{% endif %}
