ultimenu-8.x-2.x-dev/templates/ultimenu.html.twig

{#
/**
 * @file
 * 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
 *
 * @see template_preprocess_ultimenu()
 */
#}
{%
  set classes = [
    'ultimenu--' ~ config.menu_name|clean_class,
    config.orientation ? config.orientation|clean_class,
    'v' in config.orientation ? 'ultimenu--vertical' : 'ultimenu--horizontal',
    config.skin_name ? config.skin_name|clean_class,
  ]
%}
{%
  set item_classes = [
    'ultimenu__item',
    'uitem',
  ]
%}
{% if items -%}
  <ul id="{{ attributes.id|clean_id }}"{{ attributes.addClass(classes)|without('id') }}>
    {%- for item in items -%}
      <li{{ item.attributes.addClass(item_classes, item.flyout ? 'has-ultimenu') }}>
        {%- if item.link -%}
          {{ item.link }}
        {%- endif -%}
        {%- if item.flyout -%}
          <section{{ item.flyout_attributes }}>
            {{ item.flyout }}
          </section>
        {%- endif -%}
      </li>
    {%- endfor -%}
  </ul>
{%- endif %}