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

6
  • 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? Nov 14, 2016 at 18:04
  • I want a menu like camo.githubusercontent.com/….
    – JimmyD
    Nov 14, 2016 at 18:22
  • You want to have a menu that has headers that have a collapsing accordion type of element? Nov 14, 2016 at 18:33
  • Yes indeed I want a collasable accordion menu of elements
    – JimmyD
    Nov 14, 2016 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, 2016 at 17:34

1 Answer 1

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 and acknowledge you have read our privacy policy.

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