# EuiDropdownItemComponent

**Type:** component

<p>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.</p>
<h3>Basic menu item</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-dropdown&gt;
  &lt;button euiButton&gt;Menu&lt;/button&gt;
  &lt;eui-dropdown-item&gt;Edit&lt;/eui-dropdown-item&gt;
  &lt;eui-dropdown-item [isActive]=&quot;true&quot;&gt;Delete&lt;/eui-dropdown-item&gt;
&lt;/eui-dropdown&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Implements menuitem role for proper screen reader announcement</li>
<li>Supports roving tabindex for keyboard navigation</li>
<li>Focus state is visually indicated and programmatically managed</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Use <code>isActive</code> to highlight the currently selected item</li>
<li>Nest <code>eui-dropdown</code> inside item via <code>subDropdown</code> for hierarchical menus</li>
<li>Focus management is handled automatically by parent dropdown</li>
</ul>


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

**Standalone:** false

## Inputs

- **isActive**: `boolean` - <p>Marks the item as currently selected or active within the dropdown.
Applies distinct styling to indicate the active state to users.</p>

- **isFocus**: `boolean` - <p>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.</p>

- **subDropdown**: `EuiDropdownComponent` - <p>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.</p>

