# EuiDropdownItemComponent

**Type:** component



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


**Selector:** `eui-dropdown-item, [euiDropdownItem]`

## Inputs
- **isActive**: `boolean` - Marks the item as currently selected or active within the dropdown. Applies distinct styling to indicate the active state to users.
- **isFocus**: `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**: `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.