# EuiDropdownTreeDirective

**Type:** directive

<p>Directive that integrates eui-tree with eui-dropdown for tree-based selection in dropdown menus.
Automatically updates dropdown trigger button label based on tree selection state.
Supports custom button templates for flexible trigger rendering.
Displays selected node labels as comma-separated text in the dropdown trigger.
Must be applied to eui-dropdown component containing an eui-tree child.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-dropdown euiDropdownTree&gt;
  &lt;button euiButton&gt;Select Items&lt;/button&gt;
  &lt;eui-dropdown-content&gt;
    &lt;eui-tree
      [nodes]=&quot;treeData&quot;
      [isMultiselect]=&quot;true&quot;
      (selectionChange)=&quot;onSelectionChange($event)&quot;&gt;
    &lt;/eui-tree&gt;
  &lt;/eui-dropdown-content&gt;
&lt;/eui-dropdown&gt;</code></pre></div><h3>With Custom Button Template</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-dropdown euiDropdownTree [buttonTemplateRef]=&quot;customButton&quot;&gt;
  &lt;eui-dropdown-content&gt;
    &lt;eui-tree [nodes]=&quot;data&quot; [isMultiselect]=&quot;true&quot; /&gt;
  &lt;/eui-dropdown-content&gt;
&lt;/eui-dropdown&gt;

&lt;ng-template #customButton let-label&gt;
  &lt;button euiButton euiPrimary&gt;
    &lt;eui-icon-svg icon=&quot;eui-tree&quot; /&gt;
    {{ label || &#39;Select from tree&#39; }}
  &lt;/button&gt;
&lt;/ng-template&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Dropdown trigger button maintains keyboard accessibility</li>
<li>Selection state announced through button label updates</li>
<li>Tree navigation remains accessible within dropdown</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Button label automatically updates on selection changes</li>
<li>Default label shows comma-separated selected node labels</li>
<li>Custom template receives current label as $implicit context</li>
<li>Works with both single and multi-select tree modes</li>
</ul>


**Selector:** `eui-dropdown[euiDropdownTree]`

**Standalone:** false

## Inputs

- **buttonTemplateRef**: `TemplateRef<any>` - <p>Template reference for custom dropdown trigger button rendering.
Receives current selection label as template context ($implicit).
Allows complete customization of dropdown trigger appearance.</p>

