navigation-menu.html.twig

{% import _self as menus %}
<ul class="toolbar-block__list">
  {{ menus.menu_items(items, attributes, 0) }}
</ul>

{% 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' 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.icon,
            html_tag: item_link_tag,
            text: item.title,
            modifiers: [
              'collapsible',
              item_link_tag == 'span' ? 'non-interactive' : null
            ]|filter(v => v is not null),
          } only %}
        </li>
      {% else %}
        <li id="{{ item_id }}" class="toolbar-block__list-item toolbar-popover" data-toolbar-popover>
          {% include 'navigation:toolbar-button' with {
            action: 'Extend'|t,
            attributes: create_attribute({
              'aria-expanded': 'false',
              'aria-controls': item_id,
              'data-toolbar-popover-control': true,
              'data-has-safe-triangle': true,
            }),
            icon: item.icon,
            text: item.title,
            modifiers: [
              'expand--side',
              'collapsible',
            ],
            extra_classes: [
              'toolbar-popover__control',
            ],
          } only %}
          <div class="toolbar-popover__wrapper" data-toolbar-popover-wrapper inert>
            {% if item.url %}
              {% include 'navigation:toolbar-button' with {
                attributes: item_link_attributes.setAttribute('href', item.url|render),
                html_tag: item_link_tag,
                text: item.title,
                modifiers: [
                  'large',
                  'dark',
                ],
                extra_classes: [
                  'toolbar-popover__header',
                ],
              } only %}
            {% else %}
              {% include 'navigation:toolbar-button' with {
                attributes: create_attribute(),
                modifiers: [
                  'large',
                  'dark',
                  'non-interactive',
                ],
                extra_classes: [
                  'toolbar-popover__header',
                ],
                html_tag: 'span',
                text: item.title,
              } only %}
            {% 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' 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 %}
          {% include 'navigation:toolbar-button' with {
            attributes: create_attribute({
              'aria-expanded': 'false',
              'data-toolbar-menu-trigger': menu_level,
            }),
            text: item.title,
            modifiers: ['expand--down'],
          } only %}
          <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 data-toolbar-action class="toolbar-menu__link-action visually-hidden">{{ 'Extend'|t }}</span>
            <span class="toolbar-menu__link-title">{{ item.title }}</span>
            {{ icon('navigation', 'chevron', { class: 'toolbar-menu__chevron', size: 16 }) }}
          </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 %}
5 theme calls to navigation-menu.html.twig
NavigationLinkBlock::build in core/modules/navigation/src/Plugin/Block/NavigationLinkBlock.php
Builds and returns the renderable array for this block plugin.
NavigationShortcutsBlock::build in core/modules/navigation/src/Plugin/Block/NavigationShortcutsBlock.php
Builds and returns the renderable array for this block plugin.
NavigationTestBlock::build in core/modules/navigation/tests/navigation_test_block/src/Plugin/Block/NavigationTestBlock.php
Builds and returns the renderable array for this block plugin.
ShortcutLazyBuilder::lazyLinks in core/modules/navigation/src/ShortcutLazyBuilder.php
The #lazy_builder callback; builds shortcut navigation links.
WorkspacesLazyBuilder::renderNavigationLinks in core/modules/navigation/src/WorkspacesLazyBuilder.php
Lazy builder callback for rendering navigation links.

File

View on git.drupalcode.org

core/themes/stable9/templates/navigation/navigation-menu.html.twig

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

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

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

  4. </ul>

  5. 

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

  7.   {% for item in items %}

  8. 

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

  10. 

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

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

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

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

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

  16.       {% endif %}

  17.     {% endif %}

  18. 

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

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

  21.     {% else %}

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

  23.     {% endif %}

  24. 

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

  26.     {% if menu_level == 0 %}

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

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

  29.           {% include 'navigation:toolbar-button' with {

  30.             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'),

  31.             icon: item.icon,

  32.             html_tag: item_link_tag,

  33.             text: item.title,

  34.             modifiers: [

  35.               'collapsible',

  36.               item_link_tag == 'span' ? 'non-interactive' : null

  37.             ]|filter(v => v is not null),

  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' with {

  43.             action: 'Extend'|t,

  44.             attributes: create_attribute({

  45.               'aria-expanded': 'false',

  46.               'aria-controls': item_id,

  47.               'data-toolbar-popover-control': true,

  48.               'data-has-safe-triangle': true,

  49.             }),

  50.             icon: item.icon,

  51.             text: item.title,

  52.             modifiers: [

  53.               'expand--side',

  54.               'collapsible',

  55.             ],

  56.             extra_classes: [

  57.               'toolbar-popover__control',

  58.             ],

  59.           } only %}

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

  61.             {% if item.url %}

  62.               {% include 'navigation:toolbar-button' with {

  63.                 attributes: item_link_attributes.setAttribute('href', item.url|render),

  64.                 html_tag: item_link_tag,

  65.                 text: item.title,

  66.                 modifiers: [

  67.                   'large',

  68.                   'dark',

  69.                 ],

  70.                 extra_classes: [

  71.                   'toolbar-popover__header',

  72.                 ],

  73.               } only %}

  74.             {% else %}

  75.               {% include 'navigation:toolbar-button' with {

  76.                 attributes: create_attribute(),

  77.                 modifiers: [

  78.                   'large',

  79.                   'dark',

  80.                   'non-interactive',

  81.                 ],

  82.                 extra_classes: [

  83.                   'toolbar-popover__header',

  84.                 ],

  85.                 html_tag: 'span',

  86.                 text: item.title,

  87.               } only %}

  88.             {% endif %}

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

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

  91.             </ul>

  92.           </div>

  93.         </li>

  94.       {% endif %}

  95. 

  96.     {% elseif menu_level == 1 %}

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

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

  99.           {% include 'navigation:toolbar-button' with {

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

  101.             text: item.title,

  102.             html_tag: item_link_tag,

  103.             extra_classes: [

  104.               item_link_tag == 'span' ? 'toolbar-button--non-interactive'

  105.             ],

  106.           } only %}

  107.         {% else %}

  108.           {% include 'navigation:toolbar-button' with {

  109.             attributes: create_attribute({

  110.               'aria-expanded': 'false',

  111.               'data-toolbar-menu-trigger': menu_level,

  112.             }),

  113.             text: item.title,

  114.             modifiers: ['expand--down'],

  115.           } only %}

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

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

  118.           </ul>

  119.         {% endif %}

  120.       </li>

  121.     {% else %}

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

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

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

  125.             'class': [

  126.               'toolbar-menu__link',

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

  128.             ],

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

  130.           }) }}

  131.         {% else %}

  132.           <button

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

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

  135.             aria-expanded="false"

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

  137.           >

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

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

  140.             {{ icon('navigation', 'chevron', { class: 'toolbar-menu__chevron', size: 16 }) }}

  141.           </button>

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

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

  144.           </ul>

  145.         {% endif %}

  146.       </li>

  147.     {% endif %}

  148.   {% endfor %}

  149. {% endmacro %}

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