You are here

ultimenu.html.twig in Ultimenu 8.2

Same filename and directory in other branches
  1. 8 templates/ultimenu.html.twig

Default theme implementation for Ultimenu block (the UL list or container).

If you need to customize the actual flyout, use region.html.twig instead.

Available variables:

  • items: The renderable array containing the menu.
  • attributes.class: A string containing the CSS classes for the SECTION tag:
    • ultimenu ultimenu--ORIENTATION ultimenu--MENU-NAME SKIN-NAME.
    • ultimenu ultimenu--horizontal ultimenu--htb ultimenu--main ultimenu--blue

The following variables are provided for contextual information.

  • config: An array of the block's configuration settings. Includes

    • menu_name: main
    • skin: modules/custom/ultimenu/skins/ultimenu--htb-tabs-blue.css
    • skin_name: ultimenu--htb-tabs-blue (based on safe CSS file name)
    • orientation:
      • ultimenu--htb: horizontal to bottom
      • ultimenu--htt: horizontal to top
      • ultimenu--vtr: vertical to right
      • ultimenu--vtl: vertical to left

File

templates/ultimenu.html.twig
View source
  1. {#
  2. /**
  3. * @file
  4. * Default theme implementation for Ultimenu block (the UL list or container).
  5. *
  6. * If you need to customize the actual flyout, use region.html.twig instead.
  7. *
  8. * Available variables:
  9. * - items: The renderable array containing the menu.
  10. * - attributes.class: A string containing the CSS classes for the SECTION tag:
  11. * - ultimenu ultimenu--ORIENTATION ultimenu--MENU-NAME SKIN-NAME.
  12. * - ultimenu ultimenu--horizontal ultimenu--htb ultimenu--main ultimenu--blue
  13. *
  14. * The following variables are provided for contextual information.
  15. * - config: An array of the block's configuration settings. Includes
  16. * - menu_name: main
  17. * - skin: modules/custom/ultimenu/skins/ultimenu--htb-tabs-blue.css
  18. * - skin_name: ultimenu--htb-tabs-blue (based on safe CSS file name)
  19. * - orientation:
  20. * - ultimenu--htb: horizontal to bottom
  21. * - ultimenu--htt: horizontal to top
  22. * - ultimenu--vtr: vertical to right
  23. * - ultimenu--vtl: vertical to left
  24. *
  25. * @see template_preprocess_ultimenu()
  26. */
  27. #}
  28. {%
  29. set classes = [
  30. 'ultimenu--' ~ config.menu_name|clean_class,
  31. config.orientation ? config.orientation|clean_class,
  32. 'v' in config.orientation ? 'ultimenu--vertical' : 'ultimenu--horizontal',
  33. config.skin_name ? config.skin_name|clean_class,
  34. ]
  35. %}
  36. {%
  37. set item_classes = [
  38. 'ultimenu__item',
  39. 'uitem',
  40. ]
  41. %}
  42. {% spaceless %}
  43. {% if items -%}
  44. <ul id="{{ attributes.id|clean_id }}"{{ attributes.addClass(classes)|without('id') }}>
  45. {%- for item in items -%}
  46. <li{{ item.attributes.addClass(item_classes, item.flyout ? 'has-ultimenu') }}>
  47. {%- if item.link -%}
  48. {{ item.link }}
  49. {%- endif -%}
  50. {%- if item.flyout -%}
  51. <section{{ item.flyout_attributes }}>
  52. {{ item.flyout }}
  53. </section>
  54. {%- endif -%}
  55. </li>
  56. {%- endfor -%}
  57. </ul>
  58. {%- endif %}
  59. {% endspaceless %}