menu-region--middle.html.twig

Same filename and directory in other branches
  1. main core/themes/admin/templates/navigation/menu-region--middle.html.twig
{% import _self as menus %}
<div class="admin-toolbar__item toolbar-block">
  {% set menu_heading_id = 'menu--' ~ menu_name %}
  <h2 id="{{ menu_heading_id }}" class="toolbar-block__title visually-hidden focusable">{{ title }}</h2>
  <ul class="toolbar-menu toolbar-menu toolbar-block__content toolbar-block__content--{{ menu_name }}" aria-toolbar-link__labelledby="{{ menu_heading_id }}">
    {{ menus.menu_items(items, attribute) }}
  </ul>
</div>

{% macro menu_items(items, attributes) %}
  {% for key, item in items %}
    {% set item_class = 'toolbar-link--' ~ item.class|clean_class %}
    <li id="{{ item_id }}" class="{{ item.below ? 'toolbar-menu__item--has-dropdown' }} toolbar-menu__item toolbar-menu__item--level-1" data-url="{{ item.url }}">
      {% if item.below is empty %}
        {% if item.url %}
          <a href="{{ item.url }}" class="toolbar-link toolbar-link--has-icon {{ item_class }}">
            <span>{{ item.title }}</span>
          </a>
        {% else %}
          <button class="toolbar-link toolbar-link--has-icon {{ item_class }}">
            <span>{{ item.title }}</span>
          </button>
        {% endif %}
      {% endif %}
    {% if item.below %}
      <button class="toolbar-link toolbar-link--has-icon {{ item_class }}">
        <span class="toolbar-link__action">{{ 'Extend'|t }}</span>
        <span class="toolbar-link__label">{{ item.title }}</span>
      </button>
      <div class="toolbar-menu__submenu">
        <div class="toolbar-menu__arrow-ref"></div>
        <ul class="toolbar-menu">
          <li class="toolbar-menu__item toolbar-menu__item--to-title">
            <a class="toolbar-link toolbar-link--has-icon {{ item_class }}" href="{{ item.url }}" data-url="{{ item.url }}">
              <span class="toolbar-link__action">{{ 'Extend'|t }}</span>
              <span class="toolbar-link__label">{{ item.title }}</span>
            </a>
          </li>
          {% for item in item.below %}
            <li class="{{ item.below ? 'toolbar-menu__item--has-dropdown'}} toolbar-menu__item toolbar-menu__item--level-2">
              {% if item.below is empty %}
                <a href="{{ item.url }}" class="toolbar-link">
                <span>{{ item.title }}</span>
              </a>
              {% endif %}
              {% if item.below %}
                <button class="toolbar-link" aria-expanded="false" data-url="{{ item.url }}">
                  <span class="toolbar-link__action">{{ 'Extend'|t }}</span>
                  <span class="toolbar-link__label">{{ item.title }}</span>
                </button>
                <ul class="toolbar-menu">
                  {% for item in item.below %}
                    <li class="toolbar-menu__item toolbar-menu__item--level-3">
                      <a href="{{ item.url }}" class="toolbar-link">
                        <span class="toolbar-link__label">{{ item.title }}</span>
                      </a>
                    </li>
                  {% endfor %}
                </ul>
              {% endif %}
            </li>
          {% endfor %}
        </ul>
      </div>
    {% endif %}
  </li>
  {% endfor %}
{% endmacro %}

File

View on git.drupalcode.org

core/themes/admin/templates/navigation/menu-region--middle.html.twig

View source 
  1. {% import _self as menus %}

  2. <div class="admin-toolbar__item toolbar-block">

  3.   {% set menu_heading_id = 'menu--' ~ menu_name %}

  4.   <h2 id="{{ menu_heading_id }}" class="toolbar-block__title visually-hidden focusable">{{ title }}</h2>

  5.   <ul class="toolbar-menu toolbar-menu toolbar-block__content toolbar-block__content--{{ menu_name }}" aria-toolbar-link__labelledby="{{ menu_heading_id }}">

  6.     {{ menus.menu_items(items, attribute) }}

  7.   </ul>

  8. </div>

  9. 

  10. {% macro menu_items(items, attributes) %}

  11.   {% for key, item in items %}

  12.     {% set item_class = 'toolbar-link--' ~ item.class|clean_class %}

  13.     <li id="{{ item_id }}" class="{{ item.below ? 'toolbar-menu__item--has-dropdown' }} toolbar-menu__item toolbar-menu__item--level-1" data-url="{{ item.url }}">

  14.       {% if item.below is empty %}

  15.         {% if item.url %}

  16.           <a href="{{ item.url }}" class="toolbar-link toolbar-link--has-icon {{ item_class }}">

  17.             <span>{{ item.title }}</span>

  18.           </a>

  19.         {% else %}

  20.           <button class="toolbar-link toolbar-link--has-icon {{ item_class }}">

  21.             <span>{{ item.title }}</span>

  22.           </button>

  23.         {% endif %}

  24.       {% endif %}

  25.     {% if item.below %}

  26.       <button class="toolbar-link toolbar-link--has-icon {{ item_class }}">

  27.         <span class="toolbar-link__action">{{ 'Extend'|t }}</span>

  28.         <span class="toolbar-link__label">{{ item.title }}</span>

  29.       </button>

  30.       <div class="toolbar-menu__submenu">

  31.         <div class="toolbar-menu__arrow-ref"></div>

  32.         <ul class="toolbar-menu">

  33.           <li class="toolbar-menu__item toolbar-menu__item--to-title">

  34.             <a class="toolbar-link toolbar-link--has-icon {{ item_class }}" href="{{ item.url }}" data-url="{{ item.url }}">

  35.               <span class="toolbar-link__action">{{ 'Extend'|t }}</span>

  36.               <span class="toolbar-link__label">{{ item.title }}</span>

  37.             </a>

  38.           </li>

  39.           {% for item in item.below %}

  40.             <li class="{{ item.below ? 'toolbar-menu__item--has-dropdown'}} toolbar-menu__item toolbar-menu__item--level-2">

  41.               {% if item.below is empty %}

  42.                 <a href="{{ item.url }}" class="toolbar-link">

  43.                 <span>{{ item.title }}</span>

  44.               </a>

  45.               {% endif %}

  46.               {% if item.below %}

  47.                 <button class="toolbar-link" aria-expanded="false" data-url="{{ item.url }}">

  48.                   <span class="toolbar-link__action">{{ 'Extend'|t }}</span>

  49.                   <span class="toolbar-link__label">{{ item.title }}</span>

  50.                 </button>

  51.                 <ul class="toolbar-menu">

  52.                   {% for item in item.below %}

  53.                     <li class="toolbar-menu__item toolbar-menu__item--level-3">

  54.                       <a href="{{ item.url }}" class="toolbar-link">

  55.                         <span class="toolbar-link__label">{{ item.title }}</span>

  56.                       </a>

  57.                     </li>

  58.                   {% endfor %}

  59.                 </ul>

  60.               {% endif %}

  61.             </li>

  62.           {% endfor %}

  63.         </ul>

  64.       </div>

  65.     {% endif %}

  66.   </li>

  67.   {% endfor %}

  68. {% endmacro %}

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.