### File

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

### Description

The eui-dropdown component is composed of a trigger, usually a button, which allows to display the dropdown content specified with the eui-dropdown-content.

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

### Methods

Public closeDropdown
`closeDropdown(recursively)`

Close a dropdown

Parameters :

Name | Optional | Default value | Description
recursively | 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<>`
Decorators : `@ContentChildren(EuiDropdownItemComponent, {descendants: true})`

Public isOpened
Default value : `signal(false)`

Public parentDropdown
Type : `EuiDropdownComponent`

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

Public trapFocusAutoCapture
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 ""