navigation-menu.html.twig

Same filename in other branches
  1. 10 core/modules/navigation/templates/navigation-menu.html.twig
{% import _self as menus %}
<div class="admin-toolbar__item">
  <h4 class="visually-hidden focusable">{{ title }}</h4>
  <ul class="toolbar-block__list">
    {{ menus.menu_items(items, attributes, 0) }}
  </ul>
</div>

{% macro menu_items(items, attributes, menu_level) %}
  {% for item in items %}

    {% set item_link_tag = 'a' %}

    {% if item.url.isRouted %}
      {% if item.url.routeName == '<nolink>' %}
        {% set item_link_tag = constant('\\Drupal\\Core\\GeneratedNoLink::TAG') %}
      {% elseif item.url.routeName == '<button>' %}
        {% set item_link_tag = constant('\\Drupal\\Core\\GeneratedButton::TAG') %}
      {% endif %}
    {% endif %}

    {% if item.url.options.attributes is empty %}
      {% set item_link_attributes = create_attribute() %}
    {% else %}
      {% set item_link_attributes = create_attribute(item.url.options.attributes) %}
    {% endif %}

    {% 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: item_link_attributes.setAttribute('href', item.url|render|default(null)).setAttribute('data-drupal-tooltip', item.title).setAttribute('data-drupal-tooltip-class', 'admin-toolbar__tooltip'),
            icon: item.class|clean_class,
            html_tag: item_link_tag,
            text: item.title,
            extra_classes: 'toolbar-button--collapsible ' ~ (item_link_tag == 'span' ? 'toolbar-button--non-interactive'),
          } 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, item_link_attributes.addClass(['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  %}
          {% include '@navigation/toolbar-button.html.twig' with {
            attributes: item_link_attributes.setAttribute('href', item.url|render|default(null)),
            text: item.title,
            html_tag: item_link_tag,
            extra_classes: item_link_tag == 'span' ? 'toolbar-button--non-interactive',
          } only %}
        {% 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  %}
          {{ link(item.title, item.url, {
            'class': [
              'toolbar-menu__link',
              'toolbar-menu__link--' ~ menu_level,
            ],
            'data-index-text': item.title|first|lower
          }) }}
        {% 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. <div class="admin-toolbar__item">

  3.   <h4 class="visually-hidden focusable">{{ title }}</h4>

  4.   <ul class="toolbar-block__list">

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

  6.   </ul>

  7. </div>

  8. 

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

  10.   {% for item in items %}

  11. 

  12.     {% set item_link_tag = 'a' %}

  13. 

  14.     {% if item.url.isRouted %}

  15.       {% if item.url.routeName == '<nolink>' %}

  16.         {% set item_link_tag = constant('\\Drupal\\Core\\GeneratedNoLink::TAG') %}

  17.       {% elseif item.url.routeName == '<button>' %}

  18.         {% set item_link_tag = constant('\\Drupal\\Core\\GeneratedButton::TAG') %}

  19.       {% endif %}

  20.     {% endif %}

  21. 

  22.     {% if item.url.options.attributes is empty %}

  23.       {% set item_link_attributes = create_attribute() %}

  24.     {% else %}

  25.       {% set item_link_attributes = create_attribute(item.url.options.attributes) %}

  26.     {% endif %}

  27. 

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

  29.     {% if menu_level == 0 %}

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

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

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

  33.             attributes: item_link_attributes.setAttribute('href', item.url|render|default(null)).setAttribute('data-drupal-tooltip', item.title).setAttribute('data-drupal-tooltip-class', 'admin-toolbar__tooltip'),

  34.             icon: item.class|clean_class,

  35.             html_tag: item_link_tag,

  36.             text: item.title,

  37.             extra_classes: 'toolbar-button--collapsible ' ~ (item_link_tag == 'span' ? 'toolbar-button--non-interactive'),

  38.           } only %}

  39.         </li>

  40.       {% else %}

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

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

  43.             action: true,

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

  45.             icon: item.class|clean_class,

  46.             text: item.title,

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

  48.             has_safe_triangle: TRUE,

  49.           } only %}

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

  51.             {% if item.url %}

  52.               {{ link(item.title, item.url, item_link_attributes.addClass(['toolbar-popover__header', 'toolbar-button', 'toolbar-button--large', 'toolbar-button--dark'])) }}

  53.             {% else %}

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

  55.             {% endif %}

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

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

  58.             </ul>

  59.           </div>

  60.         </li>

  61.       {% endif %}

  62. 

  63.     {% elseif menu_level == 1 %}

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

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

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

  67.             attributes: item_link_attributes.setAttribute('href', item.url|render|default(null)),

  68.             text: item.title,

  69.             html_tag: item_link_tag,

  70.             extra_classes: item_link_tag == 'span' ? 'toolbar-button--non-interactive',

  71.           } only %}

  72.         {% else %}

  73.           <button

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

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

  76.             aria-expanded="false"

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

  78.           >

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

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

  81.           </button>

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

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

  84.           </ul>

  85.         {% endif %}

  86.       </li>

  87.     {% else %}

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

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

  90.           {{ link(item.title, item.url, {

  91.             'class': [

  92.               'toolbar-menu__link',

  93.               'toolbar-menu__link--' ~ menu_level,

  94.             ],

  95.             'data-index-text': item.title|first|lower

  96.           }) }}

  97.         {% else %}

  98.           <button

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

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

  101.             aria-expanded="false"

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

  103.           >

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

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

  106.           </button>

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

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

  109.           </ul>

  110.         {% endif %}

  111.       </li>

  112.     {% endif %}

  113.   {% endfor %}

  114. {% endmacro %}

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