Using Wagtailmenus and solution to adding Flat Menus as a dropdown item to the main menu.

n my previous post I gave a example of a template for a ‘main_menu’ in wagtail menus.
https://www.blogger.com/blog/post/edit/preview/8608610523928821757/2576531812455589045

My next task was in Wagtailmenus how to display custom flat menus as dropdowns. And so it seems it wasn’t that straightforward. In hindsight may be solved by better planning and partly due to the fact I’d taken a Django site and made it into a Wagtail CMS driven one. Meaning that not all APP pages are created and accessible through the Wagtail CMS - Ideally they would be. In which case you could use the ‘Allow sub-menu for this item’ tick box that would automatically generate the menu items.

So anyway I thought it’d be handy to be able to have ‘Flat menus’ that I could add to the Main Menu, and I’ve come up with a way to facilitate that. It feels a little hacky in areas, so feel free to contribute any changes that you think would help. I’ve added the code to Github .

In my Main Menu template I use 'item-handle' to check against an 'if' statement to switch the menu I'm showing. I would need to do this but in the call up {% flat_menu 'sub-folder' %} I can't use {% flat_menu 'sub-{{ item.handle }}' %}

Which would make my code look a lot better.

In base.html

{% main_menu max_levels=3 template="menus/custom_main_menu.html" %}

in menus/custom_main_menu.html

{% load menu_tags %}
{% if menu_items %}
 <nav class="nav-main">
      <ul>
        {% for item in menu_items %}
          <li class="menu-item">
              {% if item.handle == 'folder' %}
              <a href="#" data-nav-primary-submenu-trigger="" class="submenu-trigger icon icon-{{ item.handle }}">{{ item.text }}</a>
              <div class="nav-submenu">
                  <h2 id="nav-submenu-quiver-title" class="icon icon-{{ item.handle }}">{{ item.text }}</h2>
                  {% flat_menu 'sub-folder' template="menus/custom_sub_menu.html" %}
              </div>
              {% elif item.handle == 'date' %}
              <a href="#" data-nav-primary-submenu-trigger="" class="submenu-trigger icon icon-{{ item.handle }}">{{ item.text }}</a>
              <div class="nav-submenu">
                  <h2 id="nav-submenu-calendar-title" class="icon icon-{{ item.handle }}">{{ item.text }}</h2>
                  {% flat_menu 'sub-date' template="menus/custom_sub_menu.html" %}
              </div>
              {% else %}
              <a href="{{ item.href }}" class="icon icon-{{ item.handle }}">{{ item.text }}</a>
          {% endif %}
            </li>
        {% endfor %}
      </ul>
 </nav>
{% endif %}

in custom_sub_menu.html

{% load menu_tags %}
{% if menu_items %}
  <ul class="nav-submenu__list" aria-labelledby="nav-submenu-{{ item.text }}-title">
    {% for item in menu_items %}
      <li class="menu-item">
        <a href="{{ item.href }}" class="icon icon-{{ item.handle }}">{{ item.text }}</a>
      </li>
    {% endfor %}
  </ul>
{% endif %}

This is available at https://github.com/deejayM/flat_menu_dropdown_example .  Please help me improve this if you can, it's meant as a quick fix to my issue and not a full solution but thought it may help someone else looking to solve the same problem. 

WagtailMenu template example

I found it difficult to find an example of a Menu template example for WagtailMenus -> https://wagtailmenus.readthedocs.io/en/stable/

The 'menus' folder will go in the 'templates' folder of your app.  

This is a very simple example and does not include a Sub Menu .  Which will follow. 

{% load menu_tags %}
{% if menu_items %}
 <nav class="nav-main">
      <ul>
        {% for item in menu_items %}
          <li class="menu-item">
            <a href="{{ item.href }}" class="icon {{ item.handle }}">{{ item.text }}</a>
          </li>
        {% endfor %}
      </ul>
 </nav>
{% endif %}

I've used 'handle' to store the class name I want, but this may not be suitable for you.