Info

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

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

getcssClasses()

Computes and returns the CSS classes for the component based on its current state.

Returns : string

isOpen

getisOpen()

Whether the eui-dropdown is open.

Example :

<eui-dropdown #dropdown>
     <my-component *ngIf="dropdown.isOpen"></my-component>
</eui-dropdown>

Returns : boolean

File

Description

Basic dropdown with menu items

Accessibility

Notes

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

HostBindings

Accessors

Inputs

Outputs

HostBindings

Methods

Properties

Accessors

results matching ""

No results matching ""