### File

`packages/components/eui-dropdown/eui-dropdown.component.ts`

### Description

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

Example :

    <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`

### Implements

`OnInit` `OnDestroy` `AfterViewInit`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
encapsulation | `ViewEncapsulation.None`
providers | `EuiDropdownService`
selector | `eui-dropdown`
imports | `OverlayModule` `ScrollingModule` `A11yModule` `ObserversModule`
templateUrl | `./eui-dropdown.component.html`
styleUrl | `./eui-dropdown.scss`

### Index

###### Properties
euiDropdownItems Public isOpened Public parentDropdown templatePortalContent Public trapFocusAutoCapture triggerRef
###### Methods
Public closeDropdown Public createKeyboardHandlerSubscription Public onClick Public onTriggerClicked Public onTriggerRightClicked Public openDropdown Public projectContentChanged Public setParentDropdown
###### Inputs
e2eAttr euiDisabled hasClosedOnClickInside hasTabNavigation height isBlock isDropDownRightAligned isExpandOnHover isLabelUpdatedFromSelectedItem isRightClickEnabled position subDropdownPosition tabIndex width
###### Outputs
expand isDropdownOpen
###### HostBindings
class
###### Accessors
cssClasses isOpen

### Inputs

e2eAttr
Type : `string`
Default value : `'eui-dropdown'`
Sets the `data-e2e` attribute for dropodown panel. Default: `eui-dropdown`.

euiDisabled
Type : `boolean`
Default value : `false`

hasClosedOnClickInside
Type : `boolean`
Default value : `true`
Sets the `hasClosedOnClickInside` attribute which controls the auto-closing of the menu when clicking inside.

hasTabNavigation
Type : `boolean`
Default value : `false`
Sets the `hasTabNavigation` attribute to tab within the dropdown content when there is rich content.

height
Type : `string`
Default value : `'auto'`
Sets the `height` attribute for the dropdown panel.

isBlock
Type : `boolean`
Default value : `false`
Sets the `isBlock` attribute in order for the dropdown to take the full width of the parent container.

isDropDownRightAligned
Type : `boolean`
Default value : `false`
Sets the `isDropDownRightAligned` attribute to align the menu panel on the right of the opening element.

isExpandOnHover
Type : `boolean`
Default value : `false`
Sets the `isExpandOnHover` attribute which opens the sub dropdown upon hover.

isLabelUpdatedFromSelectedItem
Type : `boolean`
Default value : `false`
Sets the `isLabelUpdatedFromSelectedItem` attribute which updates the label of the trigger with the selected item.

isRightClickEnabled
Type : `boolean`
Default value : `false`
Sets the `isRightClickEnabled` attribute to trigger the menu using the right mouse click.

position
Type : `"top" | "right" | "bottom" | "left"`
Default value : `'bottom'`
Sets the `position` attribute for the dropdown panel.

subDropdownPosition
Type : `"right" | "left"`
Default value : `'right'`
Sets the `subDropdownPosition` attribute for a multi-level dropdown.

tabIndex
Type : `number`
Default value : `-1`
Sets the `tabindex` attribute for a dropdown panel.

width
Type : `string`
Default value : `'auto'`
Sets the `width` attribute for the dropdown panel.

### Outputs

expand
Type : `EventEmitter<boolean>`
Event emitted when the menu expands.

isDropdownOpen
Type : `EventEmitter<boolean>`

### HostBindings

class
Type : `string`
Computes and returns the CSS classes for the component based on its current state.

### Methods

Public closeDropdown
`closeDropdown(recursively: unknown)`
Close a dropdown Parameters :
Name | Type | Optional | Default value | Description
recursively | `unknown` | No | `false` | If true, close the parent dropdown as well
Returns : `void`

Public createKeyboardHandlerSubscription
`createKeyboardHandlerSubscription()`
Handles the keyboard navigation on the menu items upon opening the dropdown. Returns : `void`

Public onClick
`onClick()`
Method fired upon clicking the dropdown content. Returns : `void`

Public onTriggerClicked
`onTriggerClicked(e: Event)`
Method fired upon clicking the dropdown trigger. Parameters :
Name | Type | Optional | Description
e | `Event` | No | Event triggered when the dropdown trigger is clicked.
Returns : `void`

Public onTriggerRightClicked
`onTriggerRightClicked(e: Event)`
Method fired upon right clicking the dropdown trigger in case of context menu. Parameters :
Name | Type | Optional | Description
e | `Event` | No | Event triggered when the dropdown trigger is right clicked.
Returns : `void`

Public openDropdown
`openDropdown(origin: HTMLElement, position?: literal type)`
Method fired when the dropdown is opened. Parameters :
Name | Type | Optional | Description
origin | `HTMLElement` | No | Origin of the dropdown position
position | `literal type` | Yes | Position of the dropdown
Returns : `void`

Public projectContentChanged
`projectContentChanged()`
Method fired when the dropdown content is changed. Returns : `void`

Public setParentDropdown
`setParentDropdown(parentDropdown: EuiDropdownComponent)`
Sets the parent dropdown for a sub-dropdown. Parameters :
Name | Type | Optional | Description
parentDropdown | `EuiDropdownComponent` | No | Parent dropdown component
Returns : `void`

### Properties

euiDropdownItems
Type : `QueryList<unknown>`
Decorators : `@ContentChildren(EuiDropdownItemComponent, {descendants: true})`

Public isOpened
Type : `unknown`
Default value : `signal(false)`

Public parentDropdown
Type : `EuiDropdownComponent`

templatePortalContent
Type : `TemplateRef<unknown>`
Decorators : `@ViewChild('templatePortalContent')`

Public trapFocusAutoCapture
Type : `unknown`
Default value : `true`

triggerRef
Type : `ElementRef<HTMLElement>`
Decorators : `@ViewChild('triggerRef')`

### Accessors

cssClasses
get `cssClasses()`
Computes and returns the CSS classes for the component based on its current state. Returns : `string`

isOpen
get `isOpen()`
Whether the eui-dropdown is open. Example :
    <eui-dropdown #dropdown>
         <my-component *ngIf="dropdown.isOpen"></my-component>
    </eui-dropdown>
Returns : `boolean`

# results matching ""

# No results matching ""