# EuiDropdownTreeDirective

**Type:** directive



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.

### Basic Usage
```html
<eui-dropdown euiDropdownTree>
  <button euiButton>Select Items</button>
  <eui-dropdown-content>
    <eui-tree
      [nodes]="treeData"
      [isMultiselect]="true"
      (selectionChange)="onSelectionChange($event)">
    </eui-tree>
  </eui-dropdown-content>
</eui-dropdown>
```

### With Custom Button Template
```html
<eui-dropdown euiDropdownTree [buttonTemplateRef]="customButton">
  <eui-dropdown-content>
    <eui-tree [nodes]="data" [isMultiselect]="true" />
  </eui-dropdown-content>
</eui-dropdown>

<ng-template #customButton let-label>
  <button euiButton euiPrimary>
    <eui-icon-svg icon="eui-tree" />
    {{ label || 'Select from tree' }}
  </button>
</ng-template>
```

### Accessibility
- Dropdown trigger button maintains keyboard accessibility
- Selection state announced through button label updates
- Tree navigation remains accessible within dropdown

### Notes
- Button label automatically updates on selection changes
- Default label shows comma-separated selected node labels
- Custom template receives current label as $implicit context
- Works with both single and multi-select tree modes


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

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