eui documentation
  1. Components
  2. EuiDropdownItemComponent

File

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

Description

Represents an individual selectable item within an eui-dropdown menu. Implements keyboard navigation and focus management through the CDK Highlightable interface. Supports nested submenus and active/focused visual states for accessibility. Typically used as a child element within eui-dropdown to create menu options.

Basic menu item

Example :
<eui-dropdown>
  <button euiButton>Menu</button>
  <eui-dropdown-item>Edit</eui-dropdown-item>
  <eui-dropdown-item [isActive]="true">Delete</eui-dropdown-item>
</eui-dropdown>

Accessibility

  • Implements menuitem role for proper screen reader announcement
  • Supports roving tabindex for keyboard navigation
  • Focus state is visually indicated and programmatically managed

Notes

  • Use isActive to highlight the currently selected item
  • Nest eui-dropdown inside item via subDropdown for hierarchical menus
  • Focus management is handled automatically by parent dropdown

Implements

Highlightable

Metadata

changeDetection ChangeDetectionStrategy.OnPush
encapsulation ViewEncapsulation.None
selector eui-dropdown-item, [euiDropdownItem]
imports EUI_ICON
templateUrl ./eui-dropdown-item.component.html

Index

Properties
Methods
Inputs
HostBindings
Accessors

Inputs

isActive
Type : boolean

Marks the item as currently selected or active within the dropdown. Applies distinct styling to indicate the active state to users.
isFocus
Type : boolean

Indicates whether the item currently has keyboard focus during navigation. Controls tabindex and applies focus styling for accessibility compliance. Managed internally by the keyboard navigation system.
subDropdown
Type : EuiDropdownComponent

Reference to a nested dropdown component that opens as a submenu from this item. When provided, displays a visual indicator and enables hierarchical menu navigation.

HostBindings

attr.role
Type : string
Default value : 'menuitem'
attr.tabindex
Type : number
class
Type : string

Methods

Public click
click()
Returns : void
Public focus
focus(options?: FocusOptions)
Parameters :
Name Type Optional
options FocusOptions Yes
Returns : void
Public mouseenter
mouseenter()
Returns : void
Public setActiveStyles
setActiveStyles()
Returns : void
Public setInactiveStyles
setInactiveStyles()
Returns : void

Properties

elementRef
Type : unknown
Default value : inject(ElementRef)
role
Type : string
Default value : 'menuitem'
Decorators :
@HostBinding('attr.role')

Accessors

tabIndex
gettabIndex()
cssClasses
getcssClasses()

results matching ""

    No results matching ""