# EuiDropdownComponent

**Type:** component

<p>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.</p>
<h3>Basic dropdown with menu items</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-dropdown&gt;
  &lt;button euiButton&gt;Open Menu&lt;/button&gt;
  &lt;eui-dropdown-item&gt;Action 1&lt;/eui-dropdown-item&gt;
  &lt;eui-dropdown-item&gt;Action 2&lt;/eui-dropdown-item&gt;
&lt;/eui-dropdown&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Implements ARIA menu pattern with proper roles and keyboard navigation</li>
<li>Arrow keys navigate between items, Enter/Space activates selection</li>
<li>Escape closes the dropdown and returns focus to trigger</li>
<li>Screen readers announce menu state changes via aria-expanded</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Use <code>position</code> to control dropdown placement (top, right, bottom, left)</li>
<li>Enable <code>isExpandOnHover</code> for submenu expansion without clicking</li>
<li>Set <code>hasClosedOnClickInside</code> to false for multi-select scenarios</li>
<li>Context menus can be triggered with right-click using <code>isRightClickEnabled</code></li>
</ul>


**Selector:** `eui-dropdown`

**Standalone:** false

## Inputs

- **e2eAttr**: `string` - <p>Sets the <code>data-e2e</code> attribute for dropodown panel. Default: <code>eui-dropdown</code>.</p>

- **euiDisabled**: `boolean` - 
- **hasClosedOnClickInside**: `boolean` - <p>Sets the <code>hasClosedOnClickInside</code> attribute which controls the auto-closing of the menu when clicking inside.</p>

- **hasTabNavigation**: `boolean` - <p>Sets the <code>hasTabNavigation</code> attribute to tab within the dropdown content when there is rich content.</p>

- **height**: `string` - <p>Sets the <code>height</code> attribute for the dropdown panel.</p>

- **isBlock**: `boolean` - <p>Sets the <code>isBlock</code> attribute in order for the dropdown to take the full width of the parent container.</p>

- **isDropDownRightAligned**: `boolean` - <p>Sets the <code>isDropDownRightAligned</code> attribute to align the menu panel on the right of the opening element.</p>

- **isExpandOnHover**: `boolean` - <p>Sets the <code>isExpandOnHover</code> attribute which opens the sub dropdown upon hover.</p>

- **isLabelUpdatedFromSelectedItem**: `boolean` - <p>Sets the <code>isLabelUpdatedFromSelectedItem</code> attribute which updates the label of the trigger with the selected item.</p>

- **isRightClickEnabled**: `boolean` - <p>Sets the <code>isRightClickEnabled</code> attribute to trigger the menu using the right mouse click.</p>

- **position**: `"top" | "right" | "bottom" | "left"` - <p>Sets the <code>position</code> attribute for the dropdown panel.</p>

- **subDropdownPosition**: `"right" | "left"` - <p>Sets the <code>subDropdownPosition</code> attribute for a multi-level dropdown.</p>

- **tabIndex**: `number` - <p>Sets the <code>tabindex</code> attribute for a dropdown panel.</p>

- **width**: `string` - <p>Sets the <code>width</code> attribute for the dropdown panel.</p>


## Outputs

- **expand**: `EventEmitter<boolean>` - <p>Event emitted when the menu expands.</p>

- **isDropdownOpen**: `EventEmitter<boolean>` - 
