# EuiDropdownComponent

**Type:** component



A flexible dropdown menu component that displays contextual content in an overlay panel.
Supports keyboard navigation, nested submenus, positioning strategies, and accessibility features.
Composed of a trigger element that opens a panel containing menu items or custom content.
Handles focus management, scroll behavior, and click-outside detection automatically.

### Basic dropdown with menu items
```html
<eui-dropdown>
  <button euiButton>Open Menu</button>
  <eui-dropdown-item>Action 1</eui-dropdown-item>
  <eui-dropdown-item>Action 2</eui-dropdown-item>
</eui-dropdown>
```

### Accessibility
- Implements ARIA menu pattern with proper roles and keyboard navigation
- Arrow keys navigate between items, Enter/Space activates selection
- Escape closes the dropdown and returns focus to trigger
- Screen readers announce menu state changes via aria-expanded

### Notes
- Use `position` to control dropdown placement (top, right, bottom, left)
- Enable `isExpandOnHover` for submenu expansion without clicking
- Set `hasClosedOnClickInside` to false for multi-select scenarios
- Context menus can be triggered with right-click using `isRightClickEnabled`


**Selector:** `eui-dropdown`

## Inputs
- **e2eAttr**: `string` - Sets the `data-e2e` attribute for dropodown panel. Default: `eui-dropdown`.
- **euiDisabled**: `boolean` - 
- **hasClosedOnClickInside**: `boolean` - Sets the `hasClosedOnClickInside` attribute which controls the auto-closing of the menu when clicking inside.
- **hasTabNavigation**: `boolean` - Sets the `hasTabNavigation` attribute to tab within the dropdown content when there is rich content.
- **height**: `string` - Sets the `height` attribute for the dropdown panel.
- **isBlock**: `boolean` - Sets the `isBlock` attribute in order for the dropdown to take the full width of the parent container.
- **isDropDownRightAligned**: `boolean` - Sets the `isDropDownRightAligned` attribute to align the menu panel on the right of the opening element.
- **isExpandOnHover**: `boolean` - Sets the `isExpandOnHover` attribute which opens the sub dropdown upon hover.
- **isLabelUpdatedFromSelectedItem**: `boolean` - Sets the `isLabelUpdatedFromSelectedItem` attribute which updates the label of the trigger with the selected item.
- **isRightClickEnabled**: `boolean` - Sets the `isRightClickEnabled` attribute to trigger the menu using the right mouse click.
- **position**: `"top" | "right" | "bottom" | "left"` - Sets the `position` attribute for the dropdown panel.
- **subDropdownPosition**: `"right" | "left"` - Sets the `subDropdownPosition` attribute for a multi-level dropdown.
- **tabIndex**: `number` - Sets the `tabindex` attribute for a dropdown panel.
- **width**: `string` - Sets the `width` attribute for the dropdown panel.

## Outputs
- **expand**: `EventEmitter<boolean>` - Event emitted when the menu expands.
- **isDropdownOpen**: `EventEmitter<boolean>` -