file menu.html.twig

Default theme implementation to display a menu.

Available variables:

  • classes: A list of classes to apply to the top level
      element.
    • dropdown_classes: A list of classes to apply to the dropdown
        element.
      • 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.
      Define a custom macro that will render all menu trees.
      Source
      1. {#
      2. /**
      3. * @file
      4. * Default theme implementation to display a menu.
      5. *
      6. * Available variables:
      7. * - classes: A list of classes to apply to the top level <ul> element.
      8. * - dropdown_classes: A list of classes to apply to the dropdown <ul> element.
      9. * - menu_name: The machine name of the menu.
      10. * - items: A nested list of menu items. Each menu item contains:
      11. * - attributes: HTML attributes for the menu item.
      12. * - below: The menu item child items.
      13. * - title: The menu link title.
      14. * - url: The menu link url, instance of \Drupal\Core\Url
      15. * - localized_options: Menu link localized options.
      16. *
      17. * @ingroup templates
      18. *
      19. * Define a custom macro that will render all menu trees.
      20. */
      21. #}
      22. {% macro menu_links(items, attributes, menu_level, classes, dropdown_classes) %}
      23. {% if items %}
      24. <ul{{ attributes.addClass(menu_level == 0 ? classes : dropdown_classes) }}>
      25. {% for item in items %}
      26. {%
      27. set item_classes = item.url.getOption('container_attributes').class | split(" ")
      28. %}
      29. {%
      30. set item_classes = [
      31. item.is_expanded and item.below ? 'expanded dropdown',
      32. item.in_active_trail ? 'active active-trail',
      33. loop.first ? 'first',
      34. loop.last ? 'last',
      35. ]
      36. %}
      37. <li{{ item.attributes.addClass(item_classes) }}>
      38. {% set link_title = item.title %}
      39. {% set link_attributes = item.link_attributes %}
      40. {% if menu_level == 0 and item.is_expanded and item.below %}
      41. {% set link_title %}{{ link_title }} <span class="caret"></span>{% endset %}
      42. {% set link_attributes = link_attributes.addClass('dropdown-toggle').setAttribute('data-toggle', 'dropdown') %}
      43. {% endif %}
      44. {# Must use link() here so it triggers hook_link_alter(). #}
      45. {{ link(link_title, item.url, link_attributes.addClass(item.in_active_trail ? 'active-trail')) }}
      46. {% if item.below %}
      47. {{ _self.menu_links(item.below, attributes.removeClass(classes), menu_level + 1, classes, dropdown_classes) }}
      48. {% endif %}
      49. </li>
      50. {% endfor %}
      51. </ul>
      52. {% endif %}
      53. {% endmacro %}
      54. {#
      55. Invoke the custom macro defined above. If classes were provided, use them.
      56. This allows the template to be extended without having to also duplicate the
      57. code above. @see http://twig.sensiolabs.org/doc/tags/macro.html
      58. #}
      59. {{ _self.menu_links(items, attributes, 0, classes ?: ['menu', 'menu--' ~ menu_name|clean_class, 'nav'], dropdown_classes ?: ['dropdown-menu']) }}

      Related topics