navigation-menu.html.twig

Same filename in other branches
  1. 11.x core/modules/navigation/templates/navigation-menu.html.twig
{% import _self as menus %}
{% set menu_heading_id = 'menu--' ~ menu_name|clean_unique_id %}
<div class="admin-toolbar__item">
  <h4 id="{{ menu_heading_id }}" class="toolbar-block__title visually-hidden focusable">{{ title }}</h4>
  <ul class="toolbar-block__list" aria-labelledby="{{ menu_heading_id }}">
    {{ menus.menu_items(items, attributes, 0) }}
  </ul>
</div>

{% macro menu_items(items, attributes, menu_level) %}
  {% for item in items %}
    {% set item_id = ('navigation-link--' ~ item.original_link.pluginId)|clean_unique_id %}
    {% if menu_level == 0 %}
      {% if item.below is empty  %}
        <li id="{{ item_id }}" class="toolbar-block__list-item">
          {% include '@navigation/toolbar-button.html.twig' with {
            attributes: create_attribute({ 'href': item.url|render, 'data-drupal-tooltip': item.title, 'data-drupal-tooltip-class': 'admin-toolbar__tooltip' }),
            icon: item.class|clean_class,
            html_tag: 'a',
            text: item.title,
            extra_classes: 'toolbar-button--collapsible',
          } only %}
        </li>
      {% else %}
        <li id="{{ item_id }}" class="toolbar-block__list-item toolbar-popover" data-toolbar-popover>
          {% include '@navigation/toolbar-button.html.twig' with {
            action: true,
            attributes: create_attribute({'aria-expanded': 'false', 'aria-controls': item_id, 'data-toolbar-popover-control': true}),
            icon: item.class|clean_class,
            text: item.title,
            extra_classes: 'toolbar-button--expand--side toolbar-button--collapsible toolbar-popover__control',
            has_safe_triangle: TRUE,
          } only %}
          <div class="toolbar-popover__wrapper" data-toolbar-popover-wrapper inert>
            {% if item.url %}
              {{ link(item.title, item.url, create_attribute({'class': ['toolbar-popover__header', 'toolbar-button', 'toolbar-button--large', 'toolbar-button--dark']})) }}
            {% else %}
              <span class="toolbar-popover__header toolbar-button toolbar-button--large toolbar-button--dark toolbar-button--non-interactive">{{ item.title }}</span>
            {% endif %}
            <ul class="toolbar-menu toolbar-popover__menu">
              {{ menus.menu_items(item.below, attributes, 1) }}
            </ul>
          </div>
        </li>
      {% endif %}

    {% elseif menu_level == 1 %}
      <li class="toolbar-menu__item toolbar-menu__item--level-{{ menu_level }}">
        {% if item.below is empty  %}
          <a
            href="{{ item.url }}"
            class="toolbar-button"
            data-index-text="{{ item.title|first|lower }}"
          >{{ item.title }}</a>
        {% else %}
          <button
            class="toolbar-button toolbar-button--expand--down"
            data-toolbar-menu-trigger="{{ menu_level }}"
            aria-expanded="false"
            data-index-text="{{ item.title|first|lower }}"
          >
            <span class="toolbar-menu__link-action visually-hidden">{{ 'Extend'|t }}</span>
            <span class="toolbar-menu__link-title">{{ item.title }}</span>
          </button>
          <ul class="toolbar-menu toolbar-menu--level-{{ menu_level + 1 }}" inert>
            {{ menus.menu_items(item.below, attributes, menu_level + 1) }}
          </ul>
        {% endif %}
      </li>
    {% else %}
      <li class="toolbar-menu__item toolbar-menu__item--level-{{ menu_level }}">
        {% if item.below is empty  %}
          <a
            href="{{ item.url }}"
            class="toolbar-menu__link toolbar-menu__link--{{ menu_level }}"
            data-index-text="{{ item.title|first|lower }}"
          >{{ item.title }}</a>
        {% else %}
          <button
            class="toolbar-menu__link toolbar-menu__link--{{ menu_level }}"
            data-toolbar-menu-trigger="{{ menu_level }}"
            aria-expanded="false"
            data-index-text="{{ item.title|first|lower }}"
          >
            <span class="toolbar-menu__link-action visually-hidden">{{ 'Extend'|t }}</span>
            <span class="toolbar-menu__link-title">{{ item.title }}</span>
          </button>
          <ul class="toolbar-menu toolbar-menu--level-{{ menu_level + 1 }}" inert>
            {{ menus.menu_items(item.below, attributes, menu_level + 1) }}
          </ul>
        {% endif %}
      </li>
    {% endif %}
  {% endfor %}
{% endmacro %}
1 theme call to navigation-menu.html.twig
ShortcutLazyBuilder::lazyLinks in core/modules/navigation/src/ShortcutLazyBuilder.php
The #lazy_builder callback; builds shortcut navigation links.

File

core/modules/navigation/templates/navigation-menu.html.twig

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

  2. {% set menu_heading_id = 'menu--' ~ menu_name|clean_unique_id %}

  3. <div class="admin-toolbar__item">

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

  5.   <ul class="toolbar-block__list" aria-labelledby="{{ menu_heading_id }}">

  6.     {{ menus.menu_items(items, attributes, 0) }}

  7.   </ul>

  8. </div>

  9. 

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

  11.   {% for item in items %}

  12.     {% set item_id = ('navigation-link--' ~ item.original_link.pluginId)|clean_unique_id %}

  13.     {% if menu_level == 0 %}

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

  15.         <li id="{{ item_id }}" class="toolbar-block__list-item">

  16.           {% include '@navigation/toolbar-button.html.twig' with {

  17.             attributes: create_attribute({ 'href': item.url|render, 'data-drupal-tooltip': item.title, 'data-drupal-tooltip-class': 'admin-toolbar__tooltip' }),

  18.             icon: item.class|clean_class,

  19.             html_tag: 'a',

  20.             text: item.title,

  21.             extra_classes: 'toolbar-button--collapsible',

  22.           } only %}

  23.         </li>

  24.       {% else %}

  25.         <li id="{{ item_id }}" class="toolbar-block__list-item toolbar-popover" data-toolbar-popover>

  26.           {% include '@navigation/toolbar-button.html.twig' with {

  27.             action: true,

  28.             attributes: create_attribute({'aria-expanded': 'false', 'aria-controls': item_id, 'data-toolbar-popover-control': true}),

  29.             icon: item.class|clean_class,

  30.             text: item.title,

  31.             extra_classes: 'toolbar-button--expand--side toolbar-button--collapsible toolbar-popover__control',

  32.             has_safe_triangle: TRUE,

  33.           } only %}

  34.           <div class="toolbar-popover__wrapper" data-toolbar-popover-wrapper inert>

  35.             {% if item.url %}

  36.               {{ link(item.title, item.url, create_attribute({'class': ['toolbar-popover__header', 'toolbar-button', 'toolbar-button--large', 'toolbar-button--dark']})) }}

  37.             {% else %}

  38.               <span class="toolbar-popover__header toolbar-button toolbar-button--large toolbar-button--dark toolbar-button--non-interactive">{{ item.title }}</span>

  39.             {% endif %}

  40.             <ul class="toolbar-menu toolbar-popover__menu">

  41.               {{ menus.menu_items(item.below, attributes, 1) }}

  42.             </ul>

  43.           </div>

  44.         </li>

  45.       {% endif %}

  46. 

  47.     {% elseif menu_level == 1 %}

  48.       <li class="toolbar-menu__item toolbar-menu__item--level-{{ menu_level }}">

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

  50.           <a

  51.             href="{{ item.url }}"

  52.             class="toolbar-button"

  53.             data-index-text="{{ item.title|first|lower }}"

  54.           >{{ item.title }}</a>

  55.         {% else %}

  56.           <button

  57.             class="toolbar-button toolbar-button--expand--down"

  58.             data-toolbar-menu-trigger="{{ menu_level }}"

  59.             aria-expanded="false"

  60.             data-index-text="{{ item.title|first|lower }}"

  61.           >

  62.             <span class="toolbar-menu__link-action visually-hidden">{{ 'Extend'|t }}</span>

  63.             <span class="toolbar-menu__link-title">{{ item.title }}</span>

  64.           </button>

  65.           <ul class="toolbar-menu toolbar-menu--level-{{ menu_level + 1 }}" inert>

  66.             {{ menus.menu_items(item.below, attributes, menu_level + 1) }}

  67.           </ul>

  68.         {% endif %}

  69.       </li>

  70.     {% else %}

  71.       <li class="toolbar-menu__item toolbar-menu__item--level-{{ menu_level }}">

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

  73.           <a

  74.             href="{{ item.url }}"

  75.             class="toolbar-menu__link toolbar-menu__link--{{ menu_level }}"

  76.             data-index-text="{{ item.title|first|lower }}"

  77.           >{{ item.title }}</a>

  78.         {% else %}

  79.           <button

  80.             class="toolbar-menu__link toolbar-menu__link--{{ menu_level }}"

  81.             data-toolbar-menu-trigger="{{ menu_level }}"

  82.             aria-expanded="false"

  83.             data-index-text="{{ item.title|first|lower }}"

  84.           >

  85.             <span class="toolbar-menu__link-action visually-hidden">{{ 'Extend'|t }}</span>

  86.             <span class="toolbar-menu__link-title">{{ item.title }}</span>

  87.           </button>

  88.           <ul class="toolbar-menu toolbar-menu--level-{{ menu_level + 1 }}" inert>

  89.             {{ menus.menu_items(item.below, attributes, menu_level + 1) }}

  90.           </ul>

  91.         {% endif %}

  92.       </li>

  93.     {% endif %}

  94.   {% endfor %}

  95. {% endmacro %}

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