0

I'm try to overwrite the menu.html.twig file to support my menu structure.

My menu has some links and sublinks (only one level deep). Now when I write the menu.html.twig file I only to all the root links. No subitems can be found.

Can someone tells me what I'm doing wrong?

My source code of menu.html.twig looks like:

{% import _self as menus %}

<ul class="nav side-menu">

{% for item in items %}

{% if item.below | length == 0 %}
  <li {% if item.in_active_trail%}class="current-page"{% endif %}>
    {{link(item.title, item.url)}}
    </li>
{% else %}
  <li><a><i class="fa fa-edit"></i> item.title <span class="fa fa-chevron-down"></span></a>
    <ul class="nav child_menu">

      {% for subItem in item.below %}
      <li>{{link(subItem.title, subitem.url)}}}</li>
      {% endfor %}
    </ul>

{% endif %}

{% endfor %}
</ul>

My menu structure in Drupal looks like: enter image description here

  • I am not following. It isn't entirely clear what you are attempting to accomplish. What are you specifically doing to the menu that requires you theme it differently? – Shane Birley Nov 14 '16 at 18:04
  • I want a menu like camo.githubusercontent.com/…. – JimmyD Nov 14 '16 at 18:22
  • You want to have a menu that has headers that have a collapsing accordion type of element? – Shane Birley Nov 14 '16 at 18:33
  • Yes indeed I want a collasable accordion menu of elements – JimmyD Nov 14 '16 at 18:54
  • I almost have it. Only I can't find the url of the below item. When I loop over all the below items and use the <li>{{link(subItem.title, subitem.url)}}}</li> syntax I got an error. – JimmyD Nov 15 '16 at 17:34
0

Found a way to display the menu correctly.

{% import _self as menus %}

<ul class="nav side-menu">

{% for item in items %}

{% if not item.below %}
  <li {% if item.in_active_trail%}class="current-page"{% endif %}>
    {{link(item.title, item.url)}}
    </li>
{% else %}
  <li><a><i class="fa fa-edit"></i> {{item.title}} <span class="fa fa-chevron-down"></span></a>
    <ul class="nav child_menu">

      {% for subItem in item.below %}
        <li><a href="{{ path(subItem.url.routename, {(subItem.url.routeParameters|keys|first) : (subItem.url.routeParameters|first)}) }}">{{subItem.title}}</a></li>
      {% endfor %}
    </ul>

{% endif %}

{% endfor %}
</ul>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.