menu--primary-menu.html.twig

Same filename in other branches
  1. 9 core/themes/olivero/templates/navigation/menu--primary-menu.html.twig
  2. 10 core/themes/olivero/templates/navigation/menu--primary-menu.html.twig

Olivero's theme implementation for the menus in the primary_menu region.

Available variables:

  • menu_name: The machine name of the menu.
  • items: A nested list of menu items. Each menu item contains:
    • attributes: HTML attributes for the menu item.
    • below: The menu item child items.
    • title: The menu link title.
    • url: The menu link URL, instance of \Drupal\Core\Url
    • localized_options: Menu link localized options.
    • is_expanded: TRUE if the link has visible children within the current menu tree.
    • is_collapsed: TRUE if the link has children within the current menu tree that are not currently visible.
    • in_active_trail: TRUE if the link is in the active trail.

File

core/themes/olivero/templates/navigation/menu--primary-menu.html.twig

View source
  1. {#
  2. /**
  3. * @file
  4. * Olivero's theme implementation for the menus in the primary_menu region.
  5. *
  6. * Available variables:
  7. * - menu_name: The machine name of the menu.
  8. * - items: A nested list of menu items. Each menu item contains:
  9. * - attributes: HTML attributes for the menu item.
  10. * - below: The menu item child items.
  11. * - title: The menu link title.
  12. * - url: The menu link URL, instance of \Drupal\Core\Url
  13. * - localized_options: Menu link localized options.
  14. * - is_expanded: TRUE if the link has visible children within the current
  15. * menu tree.
  16. * - is_collapsed: TRUE if the link has children within the current menu tree
  17. * that are not currently visible.
  18. * - in_active_trail: TRUE if the link is in the active trail.
  19. *
  20. * @ingroup themeable
  21. */
  22. #}
  23. {{ attach_library('olivero/navigation-primary') }}
  24. {% import _self as menus %}
  25. {#
  26. We call a macro which calls itself to render the full tree.
  27. @see https://twig.symfony.com/doc/3.x/tags/macro.html
  28. #}
  29. {% set attributes = attributes.addClass('menu') %}
  30. {{ menus.menu_links(items, attributes, 0, 'primary-menu-item-') }}
  31. {% macro menu_links(items, attributes, menu_level, aria_id) %}
  32. {% set primary_nav_level = 'primary-nav__menu--level-' ~ (menu_level + 1) %}
  33. {% set drupal_selector_primary_nav_level = menu_level <= 1 ? 'primary-nav-menu--level-' ~ (menu_level + 1) : false %}
  34. {% set is_top_level_menu = menu_level == 0 %}
  35. {% import _self as menus %}
  36. {% if items %}
  37. {#
  38. Place the menu arrow (caret) outside of the submenu because the submenu
  39. has the overflow:hidden CSS rule applied.
  40. #}
  41. {% if menu_level == 1 %}
  42. <span data-drupal-selector="primary-nav-menu-🥕" class="primary-nav__menu-🥕"></span>
  43. {% endif %}
  44. <ul {{ attributes.addClass('primary-nav__menu', primary_nav_level).setAttribute('data-drupal-selector', drupal_selector_primary_nav_level) }}>
  45. {% set attributes = attributes.removeClass(primary_nav_level) %}
  46. {% for item in items %}
  47. {% if item.url.isRouted and item.url.routeName == '<nolink>' %}
  48. {% set menu_item_type = 'nolink' %}
  49. {% elseif item.url.isRouted and item.url.routeName == '<button>' %}
  50. {% set menu_item_type = 'button' %}
  51. {% else %}
  52. {% set menu_item_type = 'link' %}
  53. {% endif %}
  54. {% set item_classes = [
  55. 'primary-nav__menu-item',
  56. 'primary-nav__menu-item--' ~ menu_item_type,
  57. 'primary-nav__menu-item--level-' ~ (menu_level + 1),
  58. item.in_active_trail ? 'primary-nav__menu-item--active-trail',
  59. item.below ? 'primary-nav__menu-item--has-children',
  60. ]
  61. %}
  62. {% set link_classes = [
  63. 'primary-nav__menu-link',
  64. 'primary-nav__menu-link--' ~ menu_item_type,
  65. 'primary-nav__menu-link--level-' ~ (menu_level + 1),
  66. item.in_active_trail ? 'primary-nav__menu-link--active-trail',
  67. item.below ? 'primary-nav__menu-link--has-children',
  68. ]
  69. %}
  70. <li{{ item.attributes.addClass(item_classes).setAttribute('data-drupal-selector', is_top_level_menu and item.below ? 'primary-nav-menu-item-has-children' : false) }}>
  71. {#
  72. A unique HTML ID should be used, but that isn't available through
  73. Twig yet, so the |clean_id filter is used for now.
  74. @see https://www.drupal.org/project/drupal/issues/3115445
  75. #}
  76. {% set aria_id = (aria_id ~ loop.index)|clean_id %}
  77. {% set link_title %}
  78. <span class="primary-nav__menu-link-inner primary-nav__menu-link-inner--level-{{ menu_level + 1 }}">{{ item.title }}</span>
  79. {% endset %}
  80. {% if menu_item_type == 'link' or menu_item_type == 'nolink' %}
  81. {{ link(menu_item_type == 'link' ? link_title : item.title, item.url, {
  82. 'class': link_classes,
  83. 'data-drupal-selector': is_top_level_menu ? 'primary-nav-menu-link-has-children' : false,
  84. })
  85. }}
  86. {% if item.below %}
  87. {#
  88. Aria-hidden and tabindex attributes are removed via JS. Button is non-functional,
  89. but still visible in non-JS environments so that chevron can indicate presence of
  90. drop menu).
  91. #}
  92. {% if is_top_level_menu %}
  93. {% set toggle_button_attributes = create_attribute({
  94. 'class': 'primary-nav__button-toggle',
  95. 'data-drupal-selector': 'primary-nav-submenu-toggle-button',
  96. 'aria-controls': aria_id,
  97. 'aria-expanded': 'false',
  98. 'aria-hidden': 'true',
  99. 'tabindex': '-1',
  100. }) %}
  101. <button{{ toggle_button_attributes }}>
  102. <span class="visually-hidden">{{ '@title sub-navigation'|t({'@title': item.title}) }}</span>
  103. <span class="icon--menu-toggle"></span>
  104. </button>
  105. {% endif %}
  106. {% set attributes = attributes.setAttribute('id', aria_id) %}
  107. {{ menus.menu_links(item.below, attributes, menu_level + 1, aria_id) }}
  108. {% endif %}
  109. {% elseif menu_item_type == 'button' %}
  110. {{ link(link_title, item.url, {
  111. 'class': link_classes,
  112. 'aria-controls': is_top_level_menu and item.below ? aria_id : false,
  113. 'aria-expanded': is_top_level_menu and item.below ? 'false' : false,
  114. 'data-drupal-selector': is_top_level_menu and item.below ? 'primary-nav-submenu-toggle-button' : false,
  115. }) }}
  116. {% set attributes = attributes.setAttribute('id', aria_id) %}
  117. {{ menus.menu_links(item.below, attributes, menu_level + 1, aria_id) }}
  118. {% endif %}
  119. </li>
  120. {% endfor %}
  121. </ul>
  122. {% endif %}
  123. {% endmacro %}

Related topics


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