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

- elementRef
- role

###### Methods

- Public click
- Public focus
- Public mouseenter
- Public setActiveStyles
- Public setInactiveStyles

###### Inputs

- isActive
- isFocus
- subDropdown

###### HostBindings

- attr.role
- attr.tabindex
- class

###### Accessors

- tabIndex
- cssClasses

### 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
get `tabIndex()`

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""